fix(gatsby-plugin-offline): Upgrade workbox to v6

[kije]

Description

This PR upgrades the quite outdated workbox from v4.x to v6.0. The previously used approach using workbox-build/generateSW can no longer be used with workbox v6, since workbox started with v5 to transpile and bundle the generated Service worker, and access to the workbox library was no longer possible in the appended code (this wasn't an officially supported/recommended approach anyways). The new version now uses the InjectManifest webpack plugin, which provides the benefit of transpiling/bundling the service worker with webpack. However, since InjectManifest does not provide convenient features like declaring route handlers via the runtimeCaching option.

Users who previously have used this option to add custom handlers or modify the default handlers will need to change their configuration and implement the custom/modified handlers via a custom swSrc file using workbox directly (migration path described in the README).

Thus, these changes are a major, breaking change.

Notable changes:

• Upgraded workbox from v4.x to v6.x
• No longer uses workbox-build/generateSW. public/sw.js is now generated during the build-javascript stage via the workbox-webpack-plugin
• precache resources gathered from built pages is no longer inlined in the sw.js itself, but written after the build to a separate file that gets included via importScripts in the service worker. The file name contains a content hash to ensure that a service worker update is triggered it it's content changes
• default runtime caching handlers: only cache successful (HTTP status 200) responses
• added deletePreviousCacheVersionsOnUpdate for cleaning up old cache versions in case cacheId changes

Related Issues

Fixes #28287
Fixes #28289
Fixes #32497
Fixes #29407
Fixes #29448

[kije]

I'm not quite sure what the issue with the 2 remaining failing e2e tests is. Seems somewhat unrelated to the changes in this PR?

[KyleAMathews]

Yes, those two e2e tests are failing on every PR atm.

[kije]

So I think this PR is ready to be reviewed if someone wants to review it. Happy to work on any feedback 👍

[jangam2021]

was hoping this will be added in current release, I guess I have to wait for next release now :)

[kije]

@LekoArts nto sure if you are the right person to mention, but you were the one who replied to my initial issue and suggested I should create a PR.

Will this PR still get reviewed?

[jangam2021]

@kije could you please confirm if below mentioned problem is solved with this release

reference 1 : https://stackoverflow.com/a/67377906
reference 2 : https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v5#precachefallback_in_runtime_caching

problem with current version offline plugin:
I have setup PWA with my site. if user gets disconnected from internet while browsing the site, he can still browse the pages which are cached. but if user gets disconnected and then he clicks on any link whose underline page is not cached yet. the page throws error
"
This site can’t be reached
The webpage at https://mydemosite.gatsbyjs.io/about might be temporarily down or it may have moved permanently to a new web address.
ERR_FAILED
"

I wanted to setup the offline page functionality to overcome this error page. so when user tries to browse the page which is not cached yet he can at least see offline page. I found two above resources to achieve this. I implemented this but still results weren't as expected so when I dig further and I found that current offline plugin is based on workbox v4.3.1 so this cannot be implemented out of the box. so for the time being I have commented out the code and added reference to this PR to keep track on this.

I am hoping we can implement offline.html page functionality with above two references with this PR . Please confirm. also if there is any alternate ways to implement offline.html page add them in release notes too. this will be nice feature to have

Thank you in advance

[kije]

@jangam I'd have too look deeper into the issue you mentioned to comment on if it is solved or improved with this PR or not. I primarely focused on upgrading to the latest workbox version while preserving as much of the behaviour and functionality of the existing gatsby-plugin-offline as possible (with the exeption of also solving/improving the issues mentioned here:
#28289) in this PR.

However, a year ago I also tried to implement the offline page functionality you described in a project of mine, and also didn't get reliable/satisfactory results. If I remember correctly I had a diffrent approach than the one you linked, but I don't exactly remember the details. In any case, I agree that this would be a nice feature, and to be honnest I think many user would even expect that feature out of the box from this plugin.

I'll look into this, and see how one could implement this, and if we could add this feature within this PR or if, IMHO, it makes sense to add this feature via a seperate issue/PR after this PR has been accepted

[kije]

Note for users who come across this PR and want to use the new plugin with an upgraded workbox version. I published a fork of this plugin here:
https://www.npmjs.com/package/gatsby-plugin-offline-next

[westhouseit]

@LekoArts any progress on this? Is there more review needed or changes to be made?

[westhouseit]

@wardpeet Any chance of rerunning the tests since it looks like it's just e2e issue on circleci that may be fixed now?

[wardpeet]

If you can fix conflicts I'm happy to re-run them if necessary :)

[westhouseit]

Thanks, I actually missed that, how silly. @kije do you have a quick fix or want some help?

[kije]

Awesome to see interest in this PR again!

Sorry I was a bit busy the past few days, just now got to have a look at it again.

@westhouseit @wardpeet I've merged upstream changes and fixed merge conflicts + backported changes I made in the meantime to my fork gatsby-plugin-offline-next

[kije]

Looks like these two e2e test are failing:
https://dashboard.cypress.io/projects/is8aoq/runs/19569/test-results/21f8aef3-7673-4182-b37c-8aa303f89d44

But I have no idea what exactly they are supposed to test or what causes them to fail

[mohsen-deriv]

any update on this @kije ?
will they review and merge this?
I'll be more than happy to help with this to push it forward.

[ovflowd]

Subscribing to this PR! I would love to get this merged into Gatsby; right now, on the Node.js org, we're using this PR as Workbox v6 has several improvements over the v4 version.

[kije]

Unfortunately I don't have enough time at the moment to work on this.
The thing left to do is investigating the e2e test failures.

If anyone wants to help out in the meantime and take a look at the failing test cases it would be much appreciated. Otherwise I'll try to fix the failures once I have time again

[ovflowd]

@kije I could give an eyes, but, I can't guarantee much 😅 (As I'm also kinda busy with stuff, but let me see what I can do!)

[simonjoom]

Thks for that, i was looking for
The manifest generation file offline-precache-page-resource for me lack of chunk files .

I personaly commented directoryIndex as the documentation said if it s null the precache is disactivated..
https://developer.chrome.com/docs/workbox/modules/workbox-precaching/

precacheAndRoute(precachePaths)
  /*, {
    directoryIndex: __GATSBY_PLUGIN_OFFLINE_SETTINGS.directoryIndex,
  }*/

[RectoVersoDev]

Hi, any update on this ?