Stencil: Ionicons and precacheAndRoute

[joewoodhouse]

Stencil version:

 @stencil/[email protected] 

I'm submitting a:
[X] bug report

Current behavior:
All SVG files in the ionicons project are being pre-cached by the sw.js

Expected behavior:
Ideally only the icons being used (somehow) would be cached.

Steps to reproduce:
The easiest way to reproduce this is with the ionic-pwa-toolkit project. If you run a build inside that and inspect the generated sw.js file you will see every SVG has been added to the precacheAndRoute list.

I am not directly including ionicons in my app (as neither is the ionic-pwa-toolkit) it is being included as a dependency of @ionic/core.

Other information:
Currently the ionic-pwa-toolkit pre-caches 725 files on first install, which seems excessive to me. In my app (which is based/seeded from ionic-pwa-toolkit) I'm looking to reduce this number. 697 of these files I believe are from ionicons.

[joewoodhouse]

Found that adding globIgnores: ['**/svg/*.svg'] to be stencil.config.{tj}s will prevent them from being cached. Now probably just need to manually add each one I'm using back in using a custom sw.js.

[cjorasch]

The approach used for SVG files also has some other issues:

• Extra files to deploy if they are in www
• Hard to manually update sw.js or build scripts for icons used since no easy way to determine all icons.
• Hash based file versioning is not done on svg files so hard to cache or hard to update.

I think a better approach for icons would be to have the svg in importable js files.

import { checkmarkIcon } from '@ionic/icons';
import { myIcon } from './my-icon';

<ion-icon icon={checkmarkIcon} />
<ion-icon icon={myIcon} />

Some benefits of this approach:

• Leverages standard module loading. Inlined into component if used in one place, placed in chunk if shared. Can be bundled via index file if desired.
• Fully synchronous rendering.
• Fewer resource requests. Most ionic icons are very small and would benefit from being bundled with other code.
• Ability to cache forever and still update icons (via normal chunk hashes).
• Can easily use both ionic icons and other icons with svg available.
• Avoids pre-caching icons that you do not need.
• Can be rendered as pure function vs. component for better performance and memory.

More details: https://github.com/ionic-team/ionicons/issues/536

[simonhaenisch]

Hey, I was also already looking into this and think I found a solution that works kind of ok in my case...

First I ignore all the SVGs for pre-caching:

globIgnores: ['build/app/*.es5.*.js', 'build/app/svg/*.svg']

Then in my service worker I enable the cacheFirst workbox strategy for the /build/app/svg route:

self.workbox.routing.registerRoute(
  /build\/app\/svg\/.+\.svg/i,
  self.workbox.strategies.cacheFirst(),
);

Not sure which strategy is the best to use, maybe staleWhileRevalidate would be better. Anyway, this caches the icons after they were requested so they are available offline from then on. Assuming that the user would have an internet connection when first loading the PWA and signing in, that would work fine until the user goes offline and then hits a route they haven't visited before. I think I could live with that in my use case (I mostly have labels next to icons anyway).