If you're building a PWA application using Modyo, and your Service worker is not properly configured, you might run into an error that says there's no service worker detected. Don't worry, this is a necessary element for your PWA to be installable. Let's take a look at how to install a service worker in just a few steps.
Click on Channels.
Click on Sites.
Select your site
Click on Site settings.
Click on PWA.
Check Enable top level service worker.
Click on Save.
Click on Templates.
Click on Snippets.
Click on service_worker_js.
Type const cacheName = 'cache';
Copy the following code for the fetch event listener:
self.addEventListener('fetch', function(event){ if(!(event.request.url.indexOf('http') === 0)) return; event.respondWith(async function() { try{ var res = await fetch(event.request); var cache = await caches.open(cacheName); cache.put(event.request.url, res.clone()); return res; } catch(error){ return caches.match(event.request); } }()); });
Copy the following code for the activate event listener:
self.addEventListener('activate', function(event){ event.waitUntil( caches.keys().then(function(cacheNames){ caches.delete(cacheName); }) ); });
Click on Save.
Click on Publish.
Click on Publish.
Click on Publish.
Click on Go to site.
Click on Install App.
🏠 Go to Learning path: Cross-platform development with PWAs