feat: make the core site work offline

.gitignore

@@ -7,4 +7,5 @@ images/crushed
 .env
 css/**/*.css
 yarn.lock
-cypress/videos/*
+cypress/videos/*
+scripts/precache.js

package.json

@@ -8,12 +8,12 @@
   "author": "GitHub",
   "license": "MIT",
   "scripts": {
-    "start": "cross-env NODE_PATH=. NODE_ENV=production node server.js",
+    "start": "node script/gen-precache && cross-env NODE_PATH=. NODE_ENV=production node server.js",
     "bootstrap": "node script/bootstrap",
     "test": "cross-env NODE_PATH=. NODE_ENV=test mocha --timeout 5000 && standard --fix",
     "integration": "script/integration.sh",
     "release": "node script/release",
-    "dev": "cross-env NODE_PATH=. NODE_ENV=development nodemon server.js",
+    "dev": "node script/gen-precache && cross-env NODE_PATH=. NODE_ENV=development nodemon server.js",
     "prepack": "check-for-leaks",
     "prepush": "check-for-leaks",
     "linkschecker": "NODE_PATH=. NODE_ENV=test node scripts/links-checker.js",

script/gen-precache.js

@@ -0,0 +1,42 @@
+const crypto = require('crypto')
+const fs = require('fs')
+const path = require('path')
+
+const postsPath = path.resolve(__dirname, '..', 'data', 'blog')
+const targetPath = path.resolve(__dirname, '..', 'scripts', 'precache.js')
+
+const files = []
+
+const i18nVersion = require('electron-i18n/package.json').version
+const { docs, website } = require('electron-i18n')
+
+for (const docPath of Object.keys(docs['en-US'])) {
+  files.push({
+    url: docPath,
+    revision: i18nVersion,
+  })
+}
+
+for (const sitePath of Object.keys(website['en-US'].pages)) {
+  files.push({
+    url: sitePath,
+    revision: i18nVersion,
+  })
+}
+
+for (const post of fs.readdirSync(postsPath)) {
+  const hash = crypto.createHash('SHA256')
+    .update(fs.readFileSync(path.resolve(postsPath, post)))
+    .digest('base64')
+
+  files.push({
+    url: `/blog/${path.basename(post, '.md')}`,
+    revision: hash
+  })
+}
+
+fs.writeFileSync(
+  targetPath,
+  `self.precache = ${JSON.stringify(files)}`
+)
+

scripts/sw.js

@@ -0,0 +1,44 @@
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js');
+importScripts('/scripts/precache.js');
+
+if (workbox) {
+  workbox.precaching.precacheAndRoute(precache);
+  // Fetch JS from network, fallback to cache
+  workbox.routing.registerRoute(
+    new RegExp('.*\.js'),
+    workbox.strategies.networkFirst()
+  );
+  // Fetch HTML from network, fallback to cache
+  workbox.routing.registerRoute(
+    new RegExp('/[^\.]*'),
+    workbox.strategies.networkFirst()
+  );
+  // Fetch CSS from cache, fetch from network in background
+  workbox.routing.registerRoute(
+    // Cache CSS files
+    /.*\.css/,
+    // Use cache but update in the background ASAP
+    workbox.strategies.staleWhileRevalidate({
+      // Use a custom cache name
+      cacheName: 'css-cache',
+    })
+  );
+  // Fetch images from cache first, up to 200 images in the cache
+  workbox.routing.registerRoute(
+    // Cache image files
+    /.*\.(?:png|jpg|jpeg|svg|gif)/,
+    // Use the cache if it's available
+    workbox.strategies.cacheFirst({
+      // Use a custom cache name
+      cacheName: 'image-cache',
+      plugins: [
+        new workbox.expiration.Plugin({
+          // Cache only 200 images
+          maxEntries: 200,
+          // Cache for a maximum of a day
+          maxAgeSeconds: 7 * 24 * 60 * 60,
+        })
+      ],
+    })
+  );
+}

server.js

@@ -44,6 +44,7 @@ app.use(compression())
 app.use(helmet())
 app.use(sass())
 app.use('/scripts/index.js', browserify('scripts/index.js'))
+app.get('/sw.js', (req, res) => res.sendFile(path.resolve(__dirname, 'scripts', 'sw.js')))
 app.use(slashes(false))
 app.use(cookieParser())
 app.use(requestLanguage({

templates/app.html

@@ -1,6 +1,6 @@
 <div class="app-result">
   <a class="app-result-icon-link" href="/apps/{{slug}}">
-    <img class="app-result-icon" src="https://electronjs.org/node_modules/electron-apps/apps/{{slug}}/{{icon32}}" alt="{{slug}} icon">
+    <img class="app-result-icon" src="/node_modules/electron-apps/apps/{{slug}}/{{icon32}}" alt="{{slug}} icon">
   </a>
   <span class="search-small-text"><a href="/apps/{{slug}}">{{{name}}}</a> - {{{_highlightResult.description.value}}}</span>
 </div>

views/layouts/main.html

@@ -13,6 +13,11 @@
     <div id="refinement-list"></div>
     {{> footer}}
     {{> anchor_links}}
+    <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js');
+    }
+    </script>
     <script src="/scripts/index.js"></script>
   </body>
 </html>