improve sw

Author: chenxsan

src/PrecacheSsgManifestPlugin.js

@@ -0,0 +1,36 @@
+// we need to precache some assets from ssg too
+// they're previously handled by require('./src/utilities/find-files-in-dist')(['.css', '.ico', '.svg'])
+
+const { Compilation, sources } = require('webpack');
+const getManifestEntriesFromCompilation = require('workbox-webpack-plugin/build/lib/get-manifest-entries-from-compilation');
+
+module.exports = class PrecacheSsgManifestPlugin {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(
+      'PrecacheSsgManifestPlugin',
+      (compilation) => {
+        compilation.hooks.processAssets.tapPromise(
+          {
+            name: 'PrecacheSsgManifestPlugin',
+            stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
+          },
+          async () => {
+            const { sortedEntries } = await getManifestEntriesFromCompilation(
+              compilation,
+              {
+                // we don't want to include all html pages
+                // as that would take too many storages
+                // svg excluded as it's already included with InjectManifest
+                include: [/\.(ico|css)/i, /app-shell/i],
+              }
+            );
+            compilation.emitAsset(
+              'ssg-manifest.json',
+              new sources.RawSource(JSON.stringify(sortedEntries))
+            );
+          }
+        );
+      }
+    );
+  }
+};

src/sw.js

@@ -1,11 +1,17 @@
 import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
 import { registerRoute } from 'workbox-routing/registerRoute';
-import { CacheFirst } from 'workbox-strategies';
+import { CacheFirst, NetworkOnly } from 'workbox-strategies';
 import { ExpirationPlugin } from 'workbox-expiration/ExpirationPlugin';
+import { NavigationRoute } from 'workbox-routing/NavigationRoute';
+import { createHandlerBoundToURL } from 'workbox-precaching/createHandlerBoundToURL';
+import { setDefaultHandler, setCatchHandler } from 'workbox-routing';
+import ssgManifest from '../dist/ssg-manifest.json';
 
 // Precache assets built with webpack
 precacheAndRoute(self.__WB_MANIFEST);
 
+precacheAndRoute(ssgManifest);
+
 // Cache Google Fonts
 registerRoute(
   /https:\/\/fonts\.gstatic\.com/,
@@ -21,6 +27,12 @@ registerRoute(
   })
 );
 
-// TODO Cache /app-shell/index.html
-
-// TODO Cache /index.html, /concepts/index.html, etc.
+setDefaultHandler(new NetworkOnly());
+setCatchHandler(({ event }) => {
+  switch (event.request.destination) {
+    case 'document':
+      return caches.match('/app-shell/index.html');
+    default:
+      return Response.error();
+  }
+});

webpack.prod.js

@@ -7,9 +7,6 @@ const path = require('path');
 // Load Common Configuration
 const common = require('./webpack.common.js');
 
-// find [css, ico, svg] versioned (hashed) files emitted by SSG run
-const hashedAssetsBySSGRun = require('./src/utilities/find-files-in-dist')(['.css', '.ico', '.svg']);
-
 module.exports = env => merge(common(env), {
   mode: 'production',
   target: 'web',

webpack.ssg.js

@@ -11,6 +11,7 @@ const contentTree = require('./src/_content.json');
 
 // Load Common Configuration
 const common = require('./webpack.common.js');
+const PrecacheSsgManifestPlugin = require('./src/PrecacheSsgManifestPlugin');
 
 // content tree to path array
 const paths = [
@@ -131,5 +132,6 @@ module.exports = env => merge(common(env), {
           },
         ],
       }),
+      new PrecacheSsgManifestPlugin()
     ]
   });