Progressive web app offline refresh doesn't work

Question

I recently made my first progressive web app with a service worker generated by the Google node module "sw-precache" (I've used the Gulp task in the demo). Everything works fine and I am able to navigate through the web app when I am offline using Chrome on mobile or using the icon created by Chrome using the "Add to home screen" option (my progressive web app).

I only have one weird issue: if I am offline and I refresh the page in Chrome, it still works but if I do the same using the pwa, it shows the dinosaur and the "You are offline" message (refresh by scrolling up). But if I navigate through the app without refreshing a page, no dinosaur.

Is it a known issue?

Would you mind filing an issue at github.com/GoogleChrome/sw-precache/issues with more details, including the URL of your deployed web app, and the specific configuration you're passing to sw-precache? I'll follow up there. Thanks! — Jeff Posnick
@JeffPosnick Great thanks! Here's the link: github.com/GoogleChrome/sw-precache/issues/252 — pmrotule
I'm voting to close this question as off-topic because it is best addressed in the issue tracker of the specific library it applies to. — Jeff Posnick

oninross oninross · Accepted Answer · 2017-06-24T09:26:28

From the looks of it, you jut only used sw-precache. The service worker seems to does not have an event handler to listen to what to do if the page is not cached. You can use sw-toolbox to handle the caching of future visits and handle the offline page. Heres the code

self.toolbox.router.get('/(.*)', function (req, vals, opts) {
    return self.toolbox.networkFirst(req, vals, opts)
        .catch(function (error) {
            if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) {
                return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts);
            }
            throw error;
        });
    });

Progressive web app offline refresh doesn't work

1 Answers