gatsby-offline + onServiceWorkerUpdateReady

[blurr83]

Description

On Deployment to server, at times the serviceworker:
a) won't update w/latest version
b) will update but doesn't seem to fully load in precache
c) when offline pages won't load

Steps to reproduce

I've enabled 'gatsby-plugin-offline' in the project. Run gatsby build and the serve to test on local.
The console should show the sw install and that offline is ready. Went offline then navigated (or refreshed with an update on reload off) and nothing loads from the cache.

Expected result

When visiting the site, an updated service worker should be loaded in and an alert given to ask to reload the page. New content should be visible and available offline.

Actual result

Most of the time no alert and no updated service worker. If offline, pages won't load (sometimes they will if already visited - but that's even hit and miss).

_Edit 4/5/20_ - I've been ably to get the cache to work offline, but only by force clearing the old service worker. For some reason, it just won't leave and be replaced w/the updated one (that's larger in size). In gatsby-browser.js, the example from the site to give the user the option to reload won't fire. And unregistering the service worker. with gatsby-plugin-remove-serviceworker, doesn't seem to register either.

Environment

System:
OS: macOS 10.15.4
CPU: (6) x64 Intel(R) Core(TM) i5-8600 CPU @ 3.10GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 13.6.0 - /usr/local/bin/node
npm: 6.13.4 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 80.0.3987.149
Safari: 13.1
npmPackages:
gatsby: ^2.20.10 => 2.20.10
gatsby-concurrent-mode: ^1.0.0 => 1.0.0
gatsby-image: ^2.2.30 => 2.3.1
gatsby-plugin-analytics: ^0.2.0 => 0.2.0
gatsby-plugin-catch-links: ^2.1.19 => 2.2.1
gatsby-plugin-config: ^1.0.7 => 1.0.7
gatsby-plugin-emotion: ^4.1.13 => 4.2.1
gatsby-plugin-gtag: ^1.0.13 => 1.0.13
gatsby-plugin-htaccess: ^1.4.0 => 1.4.0
gatsby-plugin-manifest: ^2.3.3 => 2.3.3
gatsby-plugin-material-ui: ^2.1.6 => 2.1.6
gatsby-plugin-offline: ^3.1.2 => 3.1.2
gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3
gatsby-plugin-preload-fonts: ^1.0.27 => 1.1.1
gatsby-plugin-react-helmet: ^3.1.16 => 3.2.1
gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0
gatsby-plugin-sass: ^2.1.24 => 2.2.1
gatsby-plugin-sharp: ^2.2.36 => 2.5.3
gatsby-plugin-sitemap: ^2.2.22 => 2.3.1
gatsby-plugin-styled-components: ^3.1.14 => 3.2.1
gatsby-source-filesystem: ^2.1.35 => 2.2.2
gatsby-source-graphql: ^2.3.0 => 2.3.0
gatsby-source-wordpress: ^3.2.3 => 3.2.3
gatsby-transformer-pdf: ^1.1.17 => 1.2.1
gatsby-transformer-remote-filesystem: ^1.0.0 => 1.0.0
gatsby-transformer-sharp: ^2.4.3 => 2.4.3
gatsby-transformer-sqip: ^2.1.40 => 2.2.3
gatsby-wpgraphql-inline-images: ^0.1.6 => 0.1.6
npmGlobalPackages:
gatsby-cli: 2.8.27

[blurr83]

Another thing I've come across is when it does work - it might work on one device, but not another. For instance, if you had two iPads one will get the message & refresh and can work offline - the other won't get the message and won't really function at all.

[madalynrose]

Hello there, @blurr83! I'm sorry you haven't gotten a response until now. It would help if you could provide us with a minimal reproduction either by linking to a repository or recreating a small example in something like codesandbox so we can dig into the code and debug. Thanks!

[blurr83]

Hi @madalynrose - I'll see if I can set that up. Some of the original issues, through a lot of trial and error, I was able to figure out what was causing it. Some of it had to do with how the instructions for offline were laid out, and lack of full instructions when it came to overriding workbox.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[wardpeet]

@blurr83 mind telling us what you did exactly? Like a before and after so we can update our documentation?

[thandaanda]

HI @blurr83 ,
Would you mind sharing what you did to fix the underlying issue.
We are facing the same issues you mentioned.
YNWA

[meganesu]

Hi @blurr83! We haven’t heard from you in a while, and we don't have enough information at this point to make updates to the docs.

Are you able to provide a minimal reproduction, or detail what steps you took to resolve the issues? It will be difficult for us to act on this issue without that information.

Thanks for your contribution! 💜

[afonsorp]

Hi @thandaanda and @blurr83, how did you guys solve this? Having some similar issue and can't find any solution

[blurr83]

Hi @afonsorp, @thandaanda, and @meganesu = it has been hectic on my end project-wise as this has been on my agency backburner.

Most of the fix ended up being lots of trial and error (and making sure caches were cleared out). One thing I/we came across, especially on iPad/iPhone, was that if a "bad" version had been rolled out - until the cache was cleared from Safari's system settings, the update would never really roll out. After that, it was digging into workbox's settings and a lot of Google. Another "kicker" was just that if you have a lot of assets - be patient - as obviously those take a bit of time to download/update. In order to handle video on Safari, as that was another issue in of itself, we made use of the 'add-to-sw-code.js' file to set up some custom video preCache rules. Also, if using Google Analytics/GTM, be mindful that some of the instructions/plugins can actually cause these to break. 'gatsby-plugin-google-gtag' seems to be the most "stable" and plays the nicest with offline and Firebase usage.

For instance, what we ended finding "worked" was:

{
      resolve: `gatsby-plugin-offline`,
      options: {
        appendScript: `src/add-to-sw-code.js`,
        workboxConfig: {
           cacheId: `cmpV0.0.2a`,
           globPatterns: ['**/*.{js,json,html,woff2,ttf,svg,png,jpg,pdf}'],
           maximumFileSizeToCacheInBytes: 50000000,
           cleanupOutdatedCaches: true,
           runtimeCaching: [
            {
              urlPattern: /(\.js$|\.css$\/)/,
              handler: `CacheFirst`,
            },
          ],
         }
       },
     }