MT-3964 customize CRA SW caching policy (#55)

* customize cra sw caching policy

* update sw template and build function

* update workbox-build version

Author: yulia-dnistrian

build-sw.js

@@ -0,0 +1,36 @@
+const fs = require('fs-extra')
+const pathmodule = require('path')
+const workbox = require('workbox-build')
+const outputPath = 'build'
+
+async function build() {
+  const cwd = process.cwd();
+  const pkgPath = `${cwd}/node_modules/workbox-sw/package.json`;
+  const pkg = require(pkgPath);
+  const readPath = `${cwd}/node_modules/workbox-sw/${pkg.main}`;
+  let data = fs.readFileSync(readPath, 'utf8');
+  let path = `${cwd}/${outputPath}/workbox-sw.js`;
+  console.log(`Writing ${path}.`);
+  fs.writeFileSync(path, data, 'utf8');
+  data = fs.readFileSync(`${readPath}.map`, 'utf8');
+  path = `${cwd}/${outputPath}/${pathmodule.basename(pkg.main)}.map`;
+  console.log(`Writing ${path}.`);
+  fs.writeFileSync(path, data, 'utf8');
+
+  const configString = fs.readFileSync('./src/config.ts', 'utf8');
+  const configJSON = configString.replace('export', '');
+  fs.writeFileSync('./build/config.js', configJSON);
+
+  await workbox.injectManifest({
+    globDirectory: `./${outputPath}/`,
+    globPatterns: ['**\/*.{html,js,css,png,jpg,json}'],
+    globIgnores: ['sw-default.js', 'service-worker.js', 'workbox-sw.js', 'index.html'],
+    swSrc: './src/sw-template.js',
+    swDest: `./${outputPath}/sw-default.js`,
+  }).then(_ => {
+    console.log('Service worker generated.')
+  })
+}
+
+build();
+

package.json

@@ -28,15 +28,17 @@
     "react-scripts": "3.4.1",
     "serve": "^11.3.1",
     "sharethis-reactjs": "^1.5.0",
-    "typescript": "^3.7.3"
+    "typescript": "^3.7.3",
+    "workbox-build": "^5.1.3"
   },
   "scripts": {
     "start": "EXTEND_ESLINT=true BROWSER=none react-scripts start",
-    "build": "EXTEND_ESLINT=true GENERATE_SOURCEMAP=false INLINE_RUNTIME_CHUNK=true react-scripts build",
+    "build": "EXTEND_ESLINT=true GENERATE_SOURCEMAP=false INLINE_RUNTIME_CHUNK=true react-scripts build && yarn sw",
     "test": "EXTEND_ESLINT=true react-scripts test",
     "eject": "react-scripts eject",
     "serve": "serve -c serve.json",
-    "pseudo-translate": "node utils/pseudo-translate.js"
+    "pseudo-translate": "node utils/pseudo-translate.js",
+    "sw": "node build-sw.js"
   },
   "eslintConfig": {
     "extends": "react-app"

src/serviceWorker.ts

@@ -28,7 +28,8 @@ export function register(config?: Config) {
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${process.env.PUBLIC_URL}/sw-default.js`;
+      // const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.

src/sw-template.js

@@ -0,0 +1,39 @@
+importScripts('/workbox-sw.js');
+importScripts('/config.js');
+
+workbox.core.skipWaiting();
+workbox.core.clientsClaim();
+self.__WB_MANIFEST;
+
+// app-shell
+workbox.routing.registerRoute('/', new workbox.strategies.NetworkFirst());
+workbox.routing.registerRoute(/\.(?:js|css|html)$/, new workbox.strategies.NetworkFirst());
+
+// webfont-cache
+const webFontHandler = new workbox.strategies.CacheFirst({
+  cacheName: 'webfont-cache',
+  plugins: [
+    new workbox.expiration.ExpirationPlugin({maxEntries: 20}),
+    new workbox.cacheableResponse.CacheableResponsePlugin({statuses: [0, 200]}),
+  ],
+});
+workbox.routing.registerRoute(/https:\/\/fonts.googleapis.com\/.*/, webFontHandler);
+workbox.routing.registerRoute(/https:\/\/fonts.gstatic.com\/.*/, webFontHandler);
+
+// get-urls-cache
+const API = new RegExp('https:\/\/' + config.endpointURL + '\/.*');
+const apiHandler = new workbox.strategies.NetworkFirst({
+  cacheName: 'get-urls-cache'
+});
+workbox.routing.registerRoute(API, apiHandler);
+
+// work-images-cache
+workbox.routing.registerRoute(/\.(?:jpg|png|json|ico|jpeg|svg)$/,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'work-images-cache',
+    plugins: [
+      new workbox.expiration.ExpirationPlugin({maxEntries: 60}),
+      new workbox.cacheableResponse.CacheableResponsePlugin({statuses: [0, 200]}),
+    ],
+  })
+);