Preact-cli: Promote runtime caching in `sw`

[prateekbh]

Do you want to request a feature or report a bug?

Feature

What is the current behaviour?

We build a normal service worker which does the precaching for users and that what a lots of them end up shipping.
This results in PWAs like these(in offline mode) vs their apps which work fine in offline mode.

This is a place we can be help for, we should encourage offline capability of not only shell but also data.
As a tool there's very little intelligent stuff that we can do in this, but we can tell people when they need it.

What is the expected behaviour?
As a scaffolding tool we should encourage runtime caching.

I propose a service worker importScript which checks if a request to a URL with origin, same as app URL, contains a request header content-type: application/json and failed to fetch(may be cuz of offline) then It should console log something like

"May be you should look into runtimeCaching"

Also we should do the same for POST request with a different msg like

"May be you should look into backgroundSync"

If this is a feature request, what is motivation or use case for changing the behaviour?
Its a citizenship thing that we should definitely do for a healthier web

[ForsakenHarmony]

maybe it would be possible to provide some helper for caching / background sync so we provide a little bit of help from the framework side

[developit]

Agreed we should do something to promote runtime caching. The issue I see with that error handler is the idea that developers would have to encounter an offline scenario during development in order to see it.

I like the idea of a helper lib, and we could make life easy for people by defaulting to a prefer-online strategy.

Perhaps we could use one of the workbox libs?

[prateekbh]

Actually workbox is planning to do a lot more...
But their libs also depend on workbox lifecycle.

Lemme know if anyone wants to explore workbox itself again.

[ForsakenHarmony]

pros & cons of workbox?

[prateekbh]

Cons of sw-precache: In maintenance only mode

cons of workbox: as discussed earlier size for minimal pre-caching is ~13k(but since cache time of sw bytecode is relatively higher, so it lighthouse score is still 100)

pros of workbox: bunch of functionality like

• offline-analytics
• background-sync
• auto cache-cleanup
• navigation-preload etc etc..

Apart from this, after adding workbox we'll still need to figure out where to add this support?

[harshitkumar31]

@prateekbh , @developit
Perhaps instead of us deciding the config for SWPrecacheWebpackPlugin, we can provide a default config which users can override(and perhaps move to workbox for the new functionalities). We can point the users to workbox when they want to customize the service worker.

[prateekbh]

@harshitkumar31 you are looking for:

https://www.npmjs.com/package/preact-cli-sw-precache

https://www.npmjs.com/package/preact-cli-workbox-plugin

Just to re-iterate: as much as I'd love us to move to workbox, the motive of this issue to promote runtime-caching and I would like to move forward on this with 3.0 if we can.

P.S.: Workbox would be an ace thing to ship with 3.0 thought

[harshitkumar31]

@prateekbh ,
If no else is working on this, I'd like to help.

[harshitkumar31]

@prateekbh,
How about we create a service worker(without caching, just one listener for fetch event) for dev env and host it using webpack-dev-server.

[prateekbh]

That's something that I'd like 😊