Add service worker for docs offline mode.

Author: Hyperkid123

packages/react-renderer-demo/package.json

@@ -35,6 +35,7 @@
         "firebase-functions": "^3.6.1",
         "markdown-to-jsx": "^6.10.3",
         "next": "9.3.3",
+        "next-offline": "^5.0.2",
         "prism-react-renderer": "^1.1.0",
         "prop-types": "^15.6.2",
         "raw-loader": "^3.1.0",

packages/react-renderer-demo/src/app/next.config.js

@@ -3,41 +3,44 @@ const withMDX = require('@next/mdx')({
   extension: /\.mdx?$/
 });
 const path = require('path');
+const withOffline = require('next-offline');
 
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true'
 });
 
 module.exports = withBundleAnalyzer(
-  withMDX({
-    crossOrigin: 'anonymous',
-    pageExtensions: ['js', 'jsx', 'md', 'mdx'],
-    distDir: '../../dist/functions/next',
-    webpack: (config, options) => {
-      config.resolve.alias = {
-        ...config.resolve.alias,
-        react: path.resolve(__dirname, '../../../../node_modules/react'),
-        'react-dom': path.resolve(__dirname, '../../../../node_modules/react-dom'),
-        '@docs/doc-components': path.resolve(__dirname, './src/doc-components'),
-        '@docs/components': path.resolve(__dirname, './src/components'),
-        '@docs/pages': path.resolve(__dirname, './pages'),
-        '@docs/examples': path.resolve(__dirname, './examples'),
-        '@docs/list-of-contents': path.resolve(__dirname, './src/helpers/list-of-contents'),
-        '@docs/code-example': path.resolve(__dirname, './src/components/code-example'),
-        '@docs/hooks': path.resolve(__dirname, './src/hooks')
-      };
+  withOffline(
+    withMDX({
+      crossOrigin: 'anonymous',
+      pageExtensions: ['js', 'jsx', 'md', 'mdx'],
+      distDir: '../../dist/functions/next',
+      webpack: (config, options) => {
+        config.resolve.alias = {
+          ...config.resolve.alias,
+          react: path.resolve(__dirname, '../../../../node_modules/react'),
+          'react-dom': path.resolve(__dirname, '../../../../node_modules/react-dom'),
+          '@docs/doc-components': path.resolve(__dirname, './src/doc-components'),
+          '@docs/components': path.resolve(__dirname, './src/components'),
+          '@docs/pages': path.resolve(__dirname, './pages'),
+          '@docs/examples': path.resolve(__dirname, './examples'),
+          '@docs/list-of-contents': path.resolve(__dirname, './src/helpers/list-of-contents'),
+          '@docs/code-example': path.resolve(__dirname, './src/components/code-example'),
+          '@docs/hooks': path.resolve(__dirname, './src/hooks')
+        };
 
-      config.optimization.minimizer = [
-        new TerserPlugin({
-          cache: true,
-          parallel: false,
-          terserOptions: {
-            keep_classnames: true, // eslint-disable-line camelcase
-            keep_fnames: true // eslint-disable-line camelcase
-          }
-        })
-      ];
-      return config;
-    }
-  })
+        config.optimization.minimizer = [
+          new TerserPlugin({
+            cache: true,
+            parallel: false,
+            terserOptions: {
+              keep_classnames: true, // eslint-disable-line camelcase
+              keep_fnames: true // eslint-disable-line camelcase
+            }
+          })
+        ];
+        return config;
+      }
+    })
+  )
 );

packages/react-renderer-demo/src/app/pages/_document.js

@@ -15,8 +15,8 @@ class MyDocument extends Document {
           <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
           <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Montserrat:700&display=swap" />
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
-          <link rel="stylesheet" type="text/css" href="//wpcc.io/lib/1.0.2/cookieconsent.min.css" />
-          <script src="//wpcc.io/lib/1.0.2/cookieconsent.min.js"></script>
+          <link rel="stylesheet" type="text/css" href="https://wpcc.io/lib/1.0.2/cookieconsent.min.css" />
+          <script src="https://wpcc.io/lib/1.0.2/cookieconsent.min.js"></script>
           <style
             dangerouslySetInnerHTML={{
               __html: `

packages/react-renderer-demo/src/functions/index.js

@@ -1,6 +1,8 @@
 const path = require('path');
 const functions = require('firebase-functions');
 const next = require('next');
+const { join } = require('path');
+const { parse } = require('url');
 
 let dev = process.env.NODE_ENV !== 'production';
 let app = next({
@@ -11,5 +13,17 @@ let handle = app.getRequestHandler();
 
 exports.next = functions.https.onRequest((req, res) => {
   console.log('File: ' + req.originalUrl); // eslint-disable-line no-console
-  return app.prepare().then(() => handle(req, res));
+  return app.prepare().then(() => {
+    const parsedUrl = parse(req.url, true);
+    const { pathname } = parsedUrl;
+
+    // handle GET request to /service-worker.js
+    if (pathname === '/service-worker.js') {
+      const filePath = join(__dirname, '.next', pathname);
+
+      app.serveStatic(req, res, filePath);
+    } else {
+      handle(req, res, parsedUrl);
+    }
+  });
 });

packages/react-renderer-demo/src/public/service-worker.js

@@ -0,0 +1,14 @@
+/* eslint no-restricted-globals: 0 */
+
+const CACHE_NAME = 'simple-cache-v1';
+const urlsToCache = ['/'];
+
+self.addEventListener('install', (event) => {
+  const preLoaded = caches.open(CACHE_NAME).then((cache) => cache.addAll(urlsToCache));
+  event.waitUntil(preLoaded);
+});
+
+self.addEventListener('fetch', (event) => {
+  const response = caches.match(event.request).then((match) => match || fetch(event.request));
+  event.respondWith(response);
+});