Progressive Web App “does not work offline” error

Question

I have written a progressive web app, following all available guides and examples, but for some reason when I click the Add to homescreen button, I keep getting thi

Answer 1

Also you need to define fetch listener in a service worker file:

this.addEventListener('fetch', function (event) {
    // it can be empty if you just want to get rid of that error
});

Answer 2

So it took me a couple of hours, but I eventually figured out that there is a required scope parameter that you need to specify in the client JavaScript when connecting to the serviceworker, if it's not running on the root (/) path.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js?v2', {
        scope: '.' // <--- THIS BIT IS REQUIRED
    }).then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
}

You can see the working product here:

• App: https://stampy.me/pwgen/
• Manifest file: https://stampy.me/pwgen/manifest.json
• ServiceWorker file: https://stampy.me/pwgen/sw.js
• App script: https://stampy.me/pwgen/script.js (scroll to bottom for PWA code)

I hope my pain can save someone else some time.