Support offline access + caching using Service Workers

[KyleAMathews]

https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73#.d8r14ktfw

It'd would be really cool if Gatsby could support this architecture by default. Service workers are supported by ~50% of browsers now and this would make the initial paint instant for Gatsby sites on subsequent loads.

Not 100% sure how this would work though. It'd be a great research project if someone wants to investigate.

Some more readings:

• http://www.html5rocks.com/en/tutorials/service-worker/introduction/
• https://github.com/markdalgleish/serviceworker-loader
• Example application shell app written with React.js + React-Router
• http://addyosmani.com/blog/getting-started-with-progressive-web-apps/
• Screencast intro to service working caching
• https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
• https://github.com/GoogleChrome/sw-toolbox
• PR adding SW support insin/react-hn@f33eee3
• https://medium.com/@boopathi/service-workers-gotchas-44bec65eab3f#.67rbcd1mo
• https://jakearchibald.com/2016/streams-ftw
• https://gist.github.com/Rich-Harris/fd6c3c73e6e707e312d7c5d7d0f3b2f9
• https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle

[knpwrs]

As mentioned in #10, it's probably worth looking into offline-plugin.

[phlogisticfugu]

Isn't the time-to-first-paint even better, however, if the main above the fold content of the page is in plain HTML?

That "static site" part of gatsby seems to be even simpler and faster than reading data from cache via service workers, and then injecting that into the page via JS execution. Plus plain static site content can also be saved offline naturally

[KyleAMathews]

@knpwrs woah, offline-plugin looks perfect. I keep underestimating Webpack :) I hadn't thought to go looking for a plugin like this but now that I see it, it makes perfect sense.

@phlogisticfugu quite possibly! This is something we need to research a lot more I think to understand options/tradeoffs. 💯 to everyone who wants to play around with this and build a sample site and report back.

[gesposito]

Have a look at
https://github.com/mxstbr/react-boilerplate/tree/v3.0.0

[KyleAMathews]

Been reading + thinking more about services workers. Current thought is best plan is a) finish #27 and then b) just add a simple pass-through cache for html and cache forever static assets. This is safe since all js, css, other static assets will have unique names.

To get true offline support working, will probably need a fallback html file which will load and render the site using the latest JS bundle.

[addyosmani]

Glad to see the application shell architecture being considered here. If y'all run into any challenges implementing and have questions feel free to reach out.

[KyleAMathews]

@addyosmani thanks Addy! We really appreciate the offer. I've learned a ton from y'all's work there at Google and looking forward to incorporating ideas from App Shell/AMP/PWAs into Gatsby.

[KyleAMathews]

So interesting idea I just had heard. One way to use Service Workers + code splitting is that every page has a separate bundle. But then when creating the service-worker file, we first analyze the link structure of the site so that whatever page you land on, you initially load just that pages JS bundle but then the service worker async loads and caches the bundle for every page that page links to. So clicking around the site should be very fast with resources prefetched but the initial fetching remains as small/fast as possible. This could be configurable so say if the user is on a mobile network, you don't prefetch.

Relevant https://twitter.com/slightlylate/status/731203821335023616

[KyleAMathews]

This would be sick (though probably create really big build times) https://github.com/gmetais/sw-delta

[KyleAMathews]

Offline + caching is coming to 1.0! Plan is to turn them on by default. Wrote up plans at #431

Closing this issue in favor of that one.