improve service worker asset precaching and offline page

next.config.js

@@ -137,7 +137,7 @@ module.exports = withPlausibleProxy()({
     ]
   },
   webpack: (config, { isServer }) => {
-    if (isServer && isProd) {
+    if (isServer) {
       generatePrecacheManifest()
       config.plugins.push(
         new InjectManifest({

pages/offline.js

@@ -1,12 +1,12 @@
 import Image from 'react-bootstrap/Image'
 import { StaticLayout } from '../components/layout'
-import styles from '../styles/404.module.css'
+import styles from '../styles/error.module.css'
 
 export default function offline () {
   return (
     <StaticLayout>
-      <Image width='500' height='376' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/falling.gif`} fluid />
+      <Image width='499' height='293' className='rounded-1 shadow-sm' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/waiting.gif`} fluid />
-      <h1 className={styles.fourZeroFour}><span>Offline</span></h1>
+      <h1 className={styles.status}><span>Offline</span></h1>
     </StaticLayout>
   )
 }

styles/error.module.css

@@ -0,0 +1,13 @@
+.status {
+    font-family: 'lightning';
+    font-size: 96px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    margin-top: 1rem;
+    width: 100%;
+}
+
+.describe {
+    font-size: 24px;
+}

sw/build.js

@@ -1,8 +1,10 @@
-const crypto = require('crypto')
+const { createHash } = require('crypto')
-const fs = require('fs')
+const { readdirSync, readFileSync, statSync, writeFileSync } = require('fs')
-const path = require('path')
+const { join } = require('path')
 
-const getRevision = filePath => crypto.createHash('md5').update(fs.readFileSync(filePath)).digest('hex')
+const getRevision = filePath => createHash('md5').update(readFileSync(filePath)).digest('hex')
+const walkSync = dir => readdirSync(dir, { withFileTypes: true }).flatMap(file =>
+  file.isDirectory() ? walkSync(join(dir, file.name)) : join(dir, file.name))
 
 function formatBytes (bytes, decimals = 2) {
   if (bytes === 0) {
@@ -28,36 +30,31 @@ function generatePrecacheManifest () {
     size += s
   }
 
-  const staticDir = path.join(__dirname, '../public')
+  const staticDir = join(__dirname, '../public')
-  const staticFiles = fs.readdirSync(staticDir)
+  const staticFiles = walkSync(staticDir)
-  const staticMatch = f => [/\.(gif|jpe?g|ico|png|ttf|webmanifest)$/, /^darkmode\.js$/].some(m => m.test(f))
+  console.log(staticFiles)
+  const staticMatch = f => [/\.(gif|jpe?g|ico|png|ttf|woff|woff2|webmanifest)$/].some(m => m.test(f))
   staticFiles.filter(staticMatch).forEach(file => {
-    const filePath = path.join(staticDir, file)
+    const stats = statSync(file)
-    const stats = fs.statSync(filePath)
+    addToManifest(file, file.slice(staticDir.length), stats.size)
-    if (stats.isFile()) {
-      addToManifest(filePath, '/' + file, stats.size)
-    }
   })
 
-  const pagesDir = path.join(__dirname, '../pages')
+  const pagesDir = join(__dirname, '../pages')
   const precacheURLs = ['/offline']
-  const pagesFiles = fs.readdirSync(pagesDir)
+  const pagesFiles = walkSync(pagesDir)
-  const fileToUrl = f => '/' + f.replace(/\.js$/, '')
+  const fileToUrl = f => f.slice(pagesDir.length).replace(/\.js$/, '')
   const pageMatch = f => precacheURLs.some(url => fileToUrl(f) === url)
   pagesFiles.filter(pageMatch).forEach(file => {
-    const filePath = path.join(pagesDir, file)
+    const stats = statSync(file)
-    const stats = fs.statSync(filePath)
+    // This is not ideal since dependencies of the pages may have changed
-    if (stats.isFile()) {
+    // but we would still generate the same revision ...
-      // This is not ideal since dependencies of the pages may have changed
+    // The ideal solution would be to create a revision from the file generated by webpack
-      // but we would still generate the same revision ...
+    // in .next/server/pages but the file may not exist yet when we run this script
-      // The ideal solution would be to create a revision from the file generated by webpack
+    addToManifest(file, fileToUrl(file), stats.size)
-      // in .next/server/pages but the file may not exist yet when we run this script
-      addToManifest(filePath, fileToUrl(file), stats.size)
-    }
   })
 
   const output = 'sw/precache-manifest.json'
-  fs.writeFileSync(output, JSON.stringify(manifest, null, 2))
+  writeFileSync(output, JSON.stringify(manifest, null, 2))
 
   console.log(`Created precache manifest at ${output}. Cache will include ${manifest.length} URLs with a size of ${formatBytes(size)}.`)
 }