Gatsby: [gatsby-plugin-offline] adding features to Service Worker

[spektakl]

Hi all!

We are developing a PWA using GatsbyJS and one of the plugins we're using is [gatsby-plugin-offline]. It's all working ok, but we need a way to extend this service worker somehow and the plugin seems to be somehow limited.

We are using dynamic URLs to get info, so initially, it caches few static assets and no much more. But we want to use the service worker to catch API calls to a third service provider and to manage push notifications to user.

But we can't see how to implement this, as every time we build the project, the generated service worker has only the features that the plugin manages, and things like push notifications are not included. So, if we manually add them to the generated sw.js, we can lost them on the next project build.

Any ideas of how to manage this scenario?

Thanks! :)

[gatsbot[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!

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

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[davidbailey00]

Hi there, sorry for the slow reply. There's currently a PR open which adds support for custom SW code which can persist between builds: #11626

With this, you'll be able to append your custom code automatically - your existing code should work just fine since it's appended in more-or-less the same way as you would do it manually.

But we want to use the service worker to catch API calls to a third service provider and to manage push notifications to user.

gatsby-plugin-offline uses Workbox behind the scenes, so you can modify the configuration as described here: https://developers.google.com/web/tools/workbox/modules/workbox-build#full_generatesw_config

This link is made more prominent in the plugin's README in the same PR mentioned above. In addition, you can use the Workbox APIs in your custom appended code. For example:

workbox.routing.registerRoute(<regex>, workbox.strategies.cacheFirst(), 'POST');

This would use the cacheFirst strategy for URLs matching the regex. Note that for third party URLs, the regex has to match the entire URL, not just part of it - e.g. /https:\/\/thirdpartydomain.com\/.+\.js/ would match all *.js files on thirdpartydomain.com. You can read more about this in the Workbox documentation: https://developers.google.com/web/tools/workbox/modules/workbox-routing#how_to_register_a_regular_expression_route

[Kalagounet]

Hi @spektakl,

I have exactly the same need as you. I want gatsby-plugin-offline to keep working (for its cache management), and I need to override it for other functionalities like push notifications. I don't want to create my own service worker from scratch because I still need gatsby-plugin-offline.

Did you managed to do it ?

[elie222]

Also interested in adding push notifications to my Gatsby site.

UPDATE
This may help:
https://spectrum.chat/gatsby-js/general/web-push-notifications-with-gatsby~5e6abe4f-e015-4966-8e6b-0f5a6b53fa3c

[Rajarml]

I've used the link provided by @elie222 but it misses a way to minify the extra push notification script.
The field "importScripts" should take an object with a file path ("src/push-notification.js" for instance) and transforming it in the sw.js into importScripts("./push-notification.abcd1234.js").

[davidbailey00]

We just published a new major version of gatsby-plugin-offline (3.0.0) which adds support for this feature!

To do this, write a script you want appended to your sw.js and then use the option appendScript in your gatsby.config.js. For more details, please see the README of gatsby-plugin-offline.