feat(v2): Plugin for Offline/PWA support

package.json

@@ -17,6 +17,10 @@
     "build:v2": "yarn workspace docusaurus-2-website build",
     "serve:v1": "serve website-1.x/build/docusaurus",
     "serve:v2": "serve website/build",
+    "serve:v2:ssl": "yarn serve:v2:ssl:gencert && yarn serve:v2:ssl:message && yarn serve:v2:ssl:serve",
+    "serve:v2:ssl:gencert": "openssl req -x509 -nodes -days 365 -newkey rsa:4096 -subj \"/C=US/ST=Docusaurus/L=Anywhere/O=Dis/CN=localhost\" -keyout ./website/.docusaurus/selfsigned.key -out ./website/.docusaurus/selfsigned.crt",
+    "serve:v2:ssl:message": "echo '\n\n\nServing Docusaurus with HTTPS on localhost requires to disable the Chrome security: chrome://flags/#allow-insecure-localhost\n\n\n'",
+    "serve:v2:ssl:serve": "serve website/build --ssl-cert ./website/.docusaurus/selfsigned.crt --ssl-key ./website/.docusaurus/selfsigned.key",
     "changelog": "lerna-changelog",
     "postinstall": "yarn build:packages",
     "prettier": "prettier --config .prettierrc --write \"**/*.{js,ts}\"",

packages/docusaurus-plugin-pwa/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@docusaurus/plugin-pwa",
+  "version": "2.0.0-alpha.58",
+  "description": "Docusaurus Plugin to add PWA support",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/preset-env": "^7.9.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.3",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
+    "@hapi/joi": "^17.1.1",
+    "babel-loader": "^8.1.0",
+    "core-js": "^2.6.5",
+    "terser-webpack-plugin": "^2.3.5",
+    "webpack-merge": "^4.2.2",
+    "webpack": "^4.41.2",
+    "workbox-build": "^5.1.2",
+    "workbox-precaching": "^5.1.2",
+    "workbox-window": "^5.1.2"
+  },
+  "peerDependencies": {
+    "@docusaurus/core": "^2.0.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  }
+}

packages/docusaurus-plugin-pwa/src/index.js

@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const LogPlugin = require('@docusaurus/core/lib/webpack/plugins/LogPlugin');
+const {compile} = require('@docusaurus/core/lib/webpack/utils');
+const path = require('path');
+const webpack = require('webpack');
+const {injectManifest} = require('workbox-build');
+const {PluginOptionSchema} = require('./pluginOptionSchema');
+const Terser = require('terser-webpack-plugin');
+
+const isProd = process.env.NODE_ENV === 'production';
+
+function getSWBabelLoader() {
+  return {
+    loader: 'babel-loader',
+    options: {
+      babelrc: false,
+      configFile: false,
+      presets: [
+        [
+          require.resolve('@babel/preset-env'),
+          {
+            useBuiltIns: 'usage',
+            corejs: '2',
+            // See https://twitter.com/jeffposnick/status/1280223070876315649
+            targets: 'chrome >= 56',
+          },
+        ],
+      ],
+      plugins: [
+        require.resolve('@babel/plugin-proposal-object-rest-spread'),
+        require.resolve('@babel/plugin-proposal-optional-chaining'),
+        require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
+      ],
+    },
+  };
+}
+
+function plugin(context, options) {
+  const {outDir, baseUrl} = context;
+  const {
+    debug,
+    offlineModeActivationStrategies,
+    injectManifestConfig,
+    reloadPopup,
+    pwaHead,
+    swCustom,
+    swRegister,
+  } = options;
+
+  return {
+    name: 'docusaurus-plugin-pwa',
+
+    getThemePath() {
+      return path.resolve(__dirname, './theme');
+    },
+
+    getClientModules() {
+      return isProd ? [swRegister] : [];
+    },
+
+    configureWebpack(config) {
+      if (!isProd) {
+        return {};
+      }
+
+      return {
+        plugins: [
+          new webpack.EnvironmentPlugin({
+            PWA_DEBUG: debug,
+            PWA_SERVICE_WORKER_URL: path.resolve(
+              `${config.output.publicPath || '/'}`,
+              'sw.js',
+            ),
+            PWA_OFFLINE_MODE_ACTIVATION_STRATEGIES: offlineModeActivationStrategies,
+            PWA_RELOAD_POPUP: reloadPopup,
+          }),
+        ],
+      };
+    },
+
+    injectHtmlTags() {
+      const headTags = [];
+      if (isProd && pwaHead) {
+        pwaHead.forEach(({tagName, ...attributes}) =>
+          headTags.push({
+            tagName,
+            attributes,
+          }),
+        );
+      }
+      return {headTags};
+    },
+
+    async postBuild(props) {
+      if (!isProd) {
+        return;
+      }
+
+      const swSourceFileTest = /\.m?js$/;
+
+      const swWebpackConfig = {
+        entry: path.resolve(__dirname, 'sw.js'),
+        output: {
+          path: outDir,
+          filename: 'sw.js',
+          publicPath: baseUrl,
+        },
+        target: 'webworker',
+        mode: debug ? 'development' : 'production',
+        devtool: debug ? 'source-map' : false,
+        optimization: {
+          splitChunks: false,
+          minimize: !debug,
+          // see https://developers.google.com/web/tools/workbox/guides/using-bundlers#webpack
+          minimizer: [
+            !debug &&
+              new Terser({
+                test: swSourceFileTest,
+              }),
+          ].filter(Boolean),
+        },
+        plugins: [
+          new webpack.EnvironmentPlugin({
+            PWA_SW_CUSTOM: swCustom,
+          }),
+          new LogPlugin({
+            name: 'Service Worker',
+            color: 'red',
+          }),
+        ],
+        module: {
+          rules: [
+            {
+              test: swSourceFileTest,
+              exclude: /(node_modules)/,
+              use: getSWBabelLoader(),
+            },
+          ],
+        },
+      };
+
+      await compile([swWebpackConfig]);
+
+      const swDest = path.resolve(props.outDir, 'sw.js');
+
+      await injectManifest({
+        ...injectManifestConfig,
+        globPatterns: [
+          '**/*.{js,json,css,html}',
+          '**/*.{png,jpg,jpeg,gif,svg,ico}',
+          '**/*.{woff,woff2,eot,ttf,otf}',
+          ...(injectManifest.globPatterns || []),
+        ],
+        // those attributes are not overrideable
+        swDest,
+        swSrc: swDest,
+        globDirectory: props.outDir,
+      });
+    },
+  };
+}
+
+module.exports = plugin;
+
+plugin.validateOptions = function validateOptions({validate, options}) {
+  return validate(PluginOptionSchema, options);
+};

packages/docusaurus-plugin-pwa/src/pluginOptionSchema.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const Joi = require('@hapi/joi');
+const path = require('path');
+
+const DEFAULT_OPTIONS = {
+  debug: false,
+  offlineModeActivationStrategies: ['appInstalled', 'queryString'],
+  injectManifestConfig: {},
+  pwaHead: [],
+  swCustom: undefined,
+  swRegister: path.join(__dirname, 'registerSw.js'),
+  reloadPopup: '@theme/PwaReloadPopup',
+};
+
+exports.PluginOptionSchema = Joi.object({
+  debug: Joi.bool().default(DEFAULT_OPTIONS.debug),
+  offlineModeActivationStrategies: Joi.array()
+    .items(
+      Joi.string()
+        .valid('appInstalled', 'queryString', 'mobile', 'saveData', 'always')
+        .required(),
+    )
+    .default(DEFAULT_OPTIONS.offlineModeActivationStrategies),
+  injectManifestConfig: Joi.object().default(
+    DEFAULT_OPTIONS.injectManifestConfig,
+  ),
+  pwaHead: Joi.array()
+    .items(Joi.object({tagName: Joi.string().required()}).unknown().required())
+    .default(DEFAULT_OPTIONS.pwaHead),
+  swCustom: Joi.string(),
+  swRegister: Joi.alternatives()
+    .try(Joi.string(), Joi.bool().valid(false))
+    .default(DEFAULT_OPTIONS.swRegister),
+  reloadPopup: Joi.alternatives()
+    .try(Joi.string(), Joi.bool().valid(false))
+    .default(DEFAULT_OPTIONS.reloadPopup),
+});