1

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?

pmrotule
  • 9,065
  • 4
  • 50
  • 58
  • 1
    Would you mind filing an issue at https://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 Feb 22 '17 at 15:37
  • 1
    @JeffPosnick Great thanks! Here's the link: https://github.com/GoogleChrome/sw-precache/issues/252 – pmrotule Feb 22 '17 at 20:34
  • 1
    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 Feb 23 '17 at 14:54

1 Answers1

0

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;
        });
    });
oninross
  • 989
  • 6
  • 23