Enhanced offline (#249)

* Notification of updates & reloading

* Using version in service worker & allowing version to appear elsewhere

* Stupid file

* Ditching changelog for now. Using package json.

* Ugh.

src/components/App/index.tsx

@@ -12,6 +12,15 @@ import '../custom-els/LoadingSpinner';
 // This is imported for TypeScript only. It isn't used.
 import Compress from '../compress';
 
+const compressPromise = import(
+  /* webpackChunkName: "main-app" */
+  '../compress',
+);
+const offlinerPromise = import(
+  /* webpackChunkName: "offliner" */
+  '../../lib/offliner',
+);
+
 export interface SourceImage {
   file: File | Fileish;
   data: ImageData;
@@ -36,16 +45,13 @@ export default class App extends Component<Props, State> {
   constructor() {
     super();
 
-    import(
-      /* webpackChunkName: "main-app" */
-      '../compress',
-    ).then((module) => {
+    compressPromise.then((module) => {
       this.setState({ Compress: module.default });
     }).catch(() => {
       this.showSnack('Failed to load app');
     });
 
-    navigator.serviceWorker.register('../../sw');
+    offlinerPromise.then(({ offliner }) => offliner(this.showSnack));
 
     // In development, persist application state across hot reloads:
     if (process.env.NODE_ENV === 'development') {

src/components/compress/index.tsx

@@ -1,5 +1,4 @@
 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';
@@ -156,12 +155,6 @@ async function processSvg(blob: Blob): Promise<HTMLImageElement> {
   return blobToImg(new Blob([newSource], { type: 'image/svg+xml' }));
 }
 
-async function getMostActiveServiceWorker() {
-  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
@@ -203,16 +196,7 @@ export default class Compress extends Component<Props, State> {
     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 getMostActiveServiceWorker();
-        if (!serviceWorker) return; // Service worker not installing yet.
-        serviceWorker.postMessage('cache-all');
-      });
+    import('../../lib/offliner').then(({ mainAppLoaded }) => mainAppLoaded());
   }
 
   @bind