AppCache / ServiceWorker support

[NekR]

Do you need AppCache / ServiceWorker support in this project? I wrote a offline-plugin for webpack and it's currently used in react-boilerplate. If you think it would be good to have "offline" support in this project, I will send a PR for it.

Thanks.

[gaearon]

What would adding such support entail from user’s point of view? Would we have to generate some files by default that are not used in most apps? Or can those files be optional?

[NekR]

If by user you mean a user of this project (developer), then for them it means that their app this work offline by default. Of course, if the app is complicated than a static website, then it doesn't mean full offline capability, but rather caching of the app and its assets (all output of webpack).

I don't want to came here and just promote usage of offline-plugin or something like that, so I'm going to list possible disadvantages of its usage too:

• It might be complicated. For project where you cannot change the config we have to carefully configure everything in offline-plugin.
• It's hard to get working with CDNs. It's possible, but not trivial and may require dancing with CDN headers.
• App won't be updated right away. ServiceWorker has very unnatural update flow, at least for devs who see it first, maybe because they expect it to work as AppCache. In general, usage of AppCache/SW means that your app will be update on next visit, which might not be suitable for some apps. There is a way to force update though.
• There probably are others, I just cannot remember all of them right now.

Would we have to generate some files by default that are not used in most apps? Or can those files be optional?

Not sure I get the question, but yes, offline-plugin generates some files. Those files are ServiceWorker's JS file and AppCache's manifest & html page. Those files of course cannot be optional if you use those technologies, but if your don't use AppCache for example, its files aren't generated.

Also usage of offline-plugin requires this like of code to be added in some JS / HTML file:

require('offline-plugin/runtime').install();

If it will be the issue, I think it's possible to make plugin auto-attach runtime to the main entry of webpack.

[NekR]

Oh, one more thing, it cannot work fine with Hot Reloading :-)

[sejoker]

IMO, adding ServiceWorker support in the app is too specific to make it enabled by default.create-react-app should allow integrating nicely with different libraries be it offline-plugin or google-precache but not forcing a user into how it should be implemented.

[jeffposnick]

I work on the team at Google that develops the sw-precache and sw-toolbox libraries, which are similar in scope (though implemented differently) than the offline-plugin project that @NekR maintains. Hopefully this does not come across as upstaging @NekR's request, but creating a separate issue and having a parallel discussion there doesn't make much sense.

We had a similar question about how open the maintainers of this project would be to integration. To give an example of what that might look like, a member of the community, @localnerve, developed https://github.com/localnerve/react-pwa-reference as a boilerplate React project with those libraries baked in.

If your preference is to keep what ships by default minimal, or if you'd prefer default integration with another library like offline-plugin, we could focus on providing guidance in our own documentation, explaining how developers who start with create-react-app can explicitly add and configure sw-precache after the fact.

CC: @addyosmani

[NekR]

I'm actually completely fine with using sw-* tools. My intention here is to popularize SW and enable it in popular boilerplate / generator. So if one tool makes sense than another, then it should be used.

[sotojuan]

I love offline-plugin and it's actually my favorite Webpack plugin (it just works with no config) but it's a bit out of scope for this project.

Also here's a funny story: the first time I used offline-plugin I didn't know I was using it (either because it wasn't documented or I just skipped it). I eventually stopped the app I was working on, but for a few days I was wondering why every time I started something on port 3000 the app I was working on days before came up 😅 It was because it was cached in Chrome!

Anyway, that's something that may happen to others.

[gaearon]

Thank you for the suggestion!
We’ll evaluate this after more basic features are in place.
Let’s keep this open for now.

[jeffposnick]

As an exercise, I put together a repo that illustrates the modifications needed "Progressive Web App-ify" the create-react-app output, assuming sw-precache is used to generate the service worker.

There are details in https://github.com/jeffposnick/create-react-pwa/blob/master/README.md and a rundown of the (minor!) changes that were needed can be found in the diff: jeffposnick/create-react-pwa@starting-point...pwa

I'll probably spread the word a bit via my personal blog in case there are other folks who want to manually make those changes to their local create-react-app output.

[gaearon]

A new discussion here: #1086 (comment)