Adds workbox option to the factory of the standard Webpack config for apps

Author: birdofpreyru

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Topcoder React Utils Changelog
 
+### v0.8.1
+- Adds `workbox` option to the Wepback configuration factory for app
+  ([**`config/webpack/app-base`**](docs/webpack-config.md#configuration-details)).
+
 ### v0.7.2
 Fix of `<Link>` and `<NavLink>` logic.
 

config/webpack/app-base.js

@@ -41,10 +41,9 @@ const WorkboxPlugin = require('workbox-webpack-plugin');
  *  passed in, it is assigned to the "main" entry point, and the "polyfills"
  *  entry point will be added to it.
  *
- * @param {Boolean|Object} ops.generateServiceWorker When the value is truly,
- *  webpack-workbox-plugin is added to the config to generate a service worker.
- *  If an object is passed into this param, it is used as options for the worker
- *  generation.
+ * @param {Boolean|Object} ops.workbox Adds InjectManifest plugin from Workbox,
+ *  with given options, if the argument is Object, or default ones, if it is any
+ *  other truly value.
  *
  * @param {Boolean} ops.keepBuildInfo Optional. If `true` and a build info file
  *  from a previous build is found, the factory will use that rather than
@@ -112,13 +111,14 @@ module.exports = function configFactory(ops) {
     }),
   ];
 
-  let swOps = o.generateServiceWorker;
-  if (swOps) {
-    if (!_.isObject(swOps)) swOps = {};
-    plugins.push(new WorkboxPlugin.GenerateSW({
-      clientsClaim: true,
-      skipWaiting: true,
-      ...swOps,
+  /* Adds InjectManifest plugin from WorkBox, if opted to. */
+  if (o.workbox) {
+    if (!_.isObject(o.workbox)) o.workbox = {};
+    plugins.push(new WorkboxPlugin.InjectManifest({
+      importWorkboxFrom: 'local',
+      swSrc: path.resolve(__dirname, '../workbox/default.js'),
+      ...o.workbox,
+      swDest: '__service-worker.js',
     }));
   }
 

config/workbox/default.js

@@ -0,0 +1,12 @@
+/**
+ * Default Workbox config.
+ */
+
+/* global self, workbox */
+
+workbox.slipWaiting();
+workbox.clientsClaim();
+
+/* eslint-disable no-restricted-globals, no-underscore-dangle */
+workbox.precaching.precacheAndRoute(self.__precachingManifest);
+/* eslint-enable no-restricted-globals, no-underscore-dangle */

docs/webpack-config.md

@@ -59,6 +59,23 @@ mutation of the config object.
     - **`mode`** – *String* – [Webpack mode](https://webpack.js.org/concepts/mode/).
     - **`publicPath`** — *String* — Base URL for the output of
       the build assets;
+    - **`workbox`** – *Boolean*|*Object* – Optional. If evaluates to
+      a truly value, [Workbox's InjectManifest plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injectmanifest_plugin)
+      is added to the array of Webpack plugins, to generate service worker for
+      browser. If the value is an object, it is merged into the options passed
+      into the plugin, otherwise default options are used:
+      ```json
+      {
+        "importWorkboxFrom": "local",
+        "swSrc": "topcoder-react-utils/config/workbox/default.js",
+        "swDest": "__service-worker.js"
+      }
+      ```
+      If service worker is generated by this option, it will be automatically
+      initiated at the client side by the standard
+      [client-side initialization script](docs/client.md)
+      provided by **topcoder-react-utils**. Note that `swDest`'s value cannot be
+      overriden by config options provided via `workbox` object.
 
   - The generated config will opt to:
     - Bundle the font assets (EOF, OTF, SVG, TTF, WOFF, WOFF2 files from

src/client/init.js

@@ -22,7 +22,7 @@ if (useServiceWorker) {
     window.addEventListener('load', async () => {
       try {
         const reg = await navigator
-          .serviceWorker.register('/service-worker.js');
+          .serviceWorker.register('/__service-worker.js');
         console.log('SW registered:', reg);
       } catch (err) {
         console.log('SW registration failed:', err);