[offline-plugin] Add support for SW caching of prefetched resources #6566
Conversation
|
Deploy preview for using-postcss-sass failed. Built with commit 9324b6b https://app.netlify.com/sites/using-postcss-sass/deploys/5b579703e39e7c41df755bd7 |
| if (`serviceWorker` in navigator) { | ||
| navigator.serviceWorker.controller.postMessage({ | ||
| type: `prefetch`, | ||
| ...pathData, |
There was a problem hiding this comment.
what needs to be done to this data before we can pass on to SW?
There was a problem hiding this comment.
docs look unclear on what is actually passed, an issue could be opened to fix as well, let me know if we want that!
https://next.gatsbyjs.org/docs/browser-apis/#onPrefetchPathname
There was a problem hiding this comment.
What needs cached is the code/data files for each path that's prefetched. I can't remember off-hand what is passed to onPrefetchPathname. If the actual URLs are passed, there's an internal API on loader.js I believe for getting those resource paths.
Importantly though we only need to record prefetching until the SW is loaded as then it'll start caching itself. SW's have lifecycle events which we track here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/register-service-worker.js
What I think we should do is send those events out via api-runner-browser so that then plugins like this one could listen to them. Then you just have a boolean like swNotLoaded which defaults to false and while it's false, it queues up page resources and then once the sw loads, it stops listening to prefetching (as the SW is now) and sends all the page resources to the SW to cache them there.
There was a problem hiding this comment.
docs look unclear on what is actually passed, an issue could be opened to fix as well, let me know if we want that!
That'd be great too!
| @@ -0,0 +1,6 @@ | |||
| self.addEventListener(`message`, async ({ data }) => { | |||
| if (data.type === `prefetch`) { | |||
| const cache = await caches.open(`runtimecache`) | |||
There was a problem hiding this comment.
need to figure out the proper name of cache
There was a problem hiding this comment.
You can look in the Chrome "application" tab for the name of the cache. Also probably worth looking through the sw-precache docs to see if they talk about this use case of explicitly caching resources from the client.
There was a problem hiding this comment.
i checked and couldn't find anything, workbox docs have it and wonder if it's the same, at worst case i can dig through source code or look at application tab
|
Deploy preview for using-drupal ready! Built with commit 95fccb8 |
|
Deploy preview for gatsbygram ready! Built with commit 95fccb8 |
|
Deploy preview for using-drupal ready! Built with commit 9324b6b |
|
Deploy preview for gatsbygram ready! Built with commit 9324b6b |
kkemple
force-pushed
the
topics/offline-plugin-improvements
branch
from
b94163c
to
4fe78a0
Compare
kkemple
changed the title
kkemple
changed the title
kkemple
changed the title
|
Deploy preview for gatsbyjs failed. Built with commit 9324b6b https://app.netlify.com/sites/gatsbyjs/deploys/5b579702e39e7c41df755bcf |
| let swNotInstalled = true | ||
| const pathnameResources = [] | ||
|
|
||
| exports.onPrefetchPathname = ({ pathname, getResourcesForPathname }) => { |
There was a problem hiding this comment.
This could use a comment to explain that here we record resources that are prefetched before the sw has been installed and can cache things directly.
| ) | ||
|
|
||
| // get all script URLs | ||
| const scripts = [].slice |
There was a problem hiding this comment.
ol' skool dom hacking
|
|
||
| if (`serviceWorker` in navigator) { | ||
| navigator.serviceWorker | ||
| .register(`${__PATH_PREFIX__}/sw.js`) | ||
| .then(function(reg) { | ||
| reg.addEventListener(`updatefound`, () => { | ||
| apiRunner(`onServiceWorkerUpdateFound`) |
There was a problem hiding this comment.
let's pass in reg as an option (though maybe call it just serviceWorker to all the API calls in case plugins want access to it.
kkemple
force-pushed
the
topics/offline-plugin-improvements
branch
from
74d4298
to
c50ff4c
Compare
This PR includes:
migration toworkboxset custom cache names so plugins can tie in easilyCloses #6378
Closes #6081
Closes #6652