Add a serviceworker (#234)

* Add a serviceworker

* rename + fix random extra character

* Fixing worker typings

* Fixing types properly this time.

* Once of those rare cases where this matters.

* Naming the things.

* Move registration to the app (so we can use snackbar later)

* Moving SW plugin later so it picks up things like HTML

* MVP service worker

* Two stage-service worker

* Fix prerendering by conditionally awaiting Custom Elements polyfill.

* Fix icon 404's

* add doc comment to autoswplugin

* Fix type

src/components/App/index.tsx

@@ -36,12 +36,17 @@ export default class App extends Component<Props, State> {
   constructor() {
     super();
 
-    import('../compress').then((module) => {
+    import(
+      /* webpackChunkName: "main-app" */
+      '../compress',
+    ).then((module) => {
       this.setState({ Compress: module.default });
     }).catch(() => {
       this.showSnack('Failed to load app');
     });
 
+    navigator.serviceWorker.register('../../sw');
+
     // In development, persist application state across hot reloads:
     if (process.env.NODE_ENV === 'development') {
       this.setState(window.STATE);

src/components/compress/index.tsx

@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import { get, set } from 'idb-keyval';
 
 import { bind, Fileish } from '../../lib/initial-util';
 import { blobToImg, drawableToImageData, blobToText } from '../../lib/util';
@@ -155,6 +156,12 @@ async function processSvg(blob: Blob): Promise<HTMLImageElement> {
   return blobToImg(new Blob([newSource], { type: 'image/svg+xml' }));
 }
 
+async function getOldestServiceWorker() {
+  const reg = await navigator.serviceWorker.getRegistration();
+  if (!reg) return null;
+  return reg.active || reg.waiting || reg.installing;
+}
+
 // These are only used in the mobile view
 const resultTitles = ['Top', 'Bottom'];
 // These are only used in the desktop view
@@ -195,6 +202,17 @@ export default class Compress extends Component<Props, State> {
     super(props);
     this.widthQuery.addListener(this.onMobileWidthChange);
     this.updateFile(props.file);
+
+    // If this is the first time the user has interacted with the app, tell the service worker to
+    // cache all the codecs.
+    get<boolean | undefined>('user-interacted')
+      .then(async (userInteracted: boolean | undefined) => {
+        if (userInteracted) return;
+        set('user-interacted', true);
+        const serviceWorker = await getOldestServiceWorker();
+        if (!serviceWorker) return; // Service worker not installing yet.
+        serviceWorker.postMessage('cache-all');
+      });
   }
 
   @bind

src/components/intro/index.tsx

@@ -4,13 +4,13 @@ import { bind, linkRef, Fileish } from '../../lib/initial-util';
 import '../custom-els/LoadingSpinner';
 
 import logo from './imgs/logo.svg';
-import largePhoto from './imgs/demos/large-photo.jpg';
-import artwork from './imgs/demos/artwork.jpg';
-import deviceScreen from './imgs/demos/device-screen.png';
-import largePhotoIcon from './imgs/demos/large-photo-icon.jpg';
-import artworkIcon from './imgs/demos/artwork-icon.jpg';
-import deviceScreenIcon from './imgs/demos/device-screen-icon.jpg';
-import logoIcon from './imgs/demos/logo-icon.png';
+import largePhoto from './imgs/demos/demo-large-photo.jpg';
+import artwork from './imgs/demos/demo-artwork.jpg';
+import deviceScreen from './imgs/demos/demo-device-screen.png';
+import largePhotoIcon from './imgs/demos/icon-demo-large-photo.jpg';
+import artworkIcon from './imgs/demos/icon-demo-artwork.jpg';
+import deviceScreenIcon from './imgs/demos/icon-demo-device-screen.jpg';
+import logoIcon from './imgs/demos/icon-demo-logo.png';
 import * as style from './style.scss';
 import SnackBarElement from '../../lib/SnackBar';