JavaScript（PWA）-初始化服务人员的正确方法是什么？

Question

What is the better way to initialize service-worker used for PWA caching?

Method 1: I expect that in this case will be installed new SW instance. I guess that's not necessary and I want to re-activate existing SW already running in the browser - am I right?

 if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('sw.js').then(registration => { // Registration success }, function(err) { // Registration failed }); }); } 

Method 2: In this case I'm checking that there SW already registered and I'm installing registering a new one only if there is non registered.

 if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.getRegistrations().then(registrations => { const isServiceWorkerNotRegistered = registrations.length === 0; if (isServiceWorkerNotRegistered) { navigator.serviceWorker.register('sw.js').then(registration => { // Registration success }).catch(error => { // Registration failed }); } else { console.log('Service worker already registered.'); } }); }); } 

On top of that... Is it really necessary to wait for window to load (line 2)? Since SW is running asynchronously in the browser I guess I don't need the app to be completely loaded.

Answer 1

Waiting for the load event is so that assets being downloaded by the service worker don't take bandwidth and device resources from rendering the currently requested page. See improving the boilerplate .

For your registration question, use the simple first version.

Unless you change the URL of the service worker script, navigator.serviceWorker.register() is effectively a no-op during subsequent visits.

subsequent visits

If the service worker is not registered, register will register it. If a service worker is already registered, register will basically not do anything.