Preact-cli: Enhance service worker

[prateekbh]

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

What is the current behavior?
I believe that we're under-utilizing our service worker.
Current usage of service worker is just to pre-cache assets and respond to them via cache.

The service worker can actually be used to do some other perf enhancements out of the box though

1. Support brotli
   We can just pre-build brotli files and intercept request to .js files to our domain and redirect them to brotli files
2. WebP support
   At build time we can also optimize images by converting them to webP and intercept calls to /assets/*.(png|jpg) and request for webP instead.

Note: The current service worker infra with SW-precache/toolbox with its regexp/caching strategies handler is not best suited for above tasks in my opinion. Also it does not allow a very good way of extending the generated service worker by user code, rather expects everything to be given in the plugin config.

I strongly feel that we should add sw.js as an entry file in our webpack entry and let the precache entries be injected into it with a workbox plugin instead. I am leaning towards this because it is inherently built to be a library on which user can code upon.
Also it has the concept of router and handlers meant exactly for that code and it will make it super easy for users to edit and extend the service worker code themselves

[psabharwal123]

Agreed, i feel that sw-precache-webpack-plugin should be removed in favor of workbox

[prateekbh]

Well sw-precache-webpack-plugin is doing a good job in what we are shopping right now. But we can do more than that, and the other stuff better aligns with workbox

[ForsakenHarmony]

I feel like the webp redirects should maybe be in the build as well?

[prateekbh]

like our webpack build?

[ForsakenHarmony]

yes

[prateekbh]

Right yes I agree. Convert them at build time itself, and a capability based routing in SW 👍

[prateekbh]

Waiting from views from others

[prateekbh]

cc @lukeed @developit @reznord @zouhir @hassanbazzi

[bestwestern]

I hope you will make it possible to notify the user if the SW finds updated content (right now the user always gets the cached version - so new versions requires 2 visits)

It doesn't take much: https://github.com/developit/preact-cli/issues/665#issuecomment-440430363

Edit: if possible it could be cool to be able to display progress bar:
X% app cached for offline

[prateekbh]

Code for webP support by @Axel on slack

const webpSupport = () => {
  const canvas =
    typeof document === "object" ? document.createElement("canvas") : {};
  canvas.width = canvas.height = 1;
  return canvas.toDataURL
    ? canvas.toDataURL("image/webp").indexOf("image/webp") === 5
    : false;
};

[prateekbh]

@bestwestern Workbox has a new window library by @philipwalton which will make your ask super easy to implement

[reznord]

@prateekbh is there anyone working on adding the webP support or can I take it up?

[prateekbh]

Sure you can take it, u need to base your PR on #674 though