feat(DEV-13): create precache by creating a service-worker file and w…

…orkbox
hhimanshu · Jul 7, 2021 · 0040b2b · 0040b2b
1 parent 257128e
commit 0040b2b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/mockup.png b/mockup.png
diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
     "@fontsource/poppins": "^4.4.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.2.0",
+    "workbox-precaching": "^6.1.5"
   }
 }
diff --git a/src/service-worker.js b/src/service-worker.js
@@ -1 +1,4 @@
+import {precacheAndRoute} from 'workbox-precaching';
+
+precacheAndRoute(self.__WB_MANIFEST)
 console.log('Hello from service-worker.js');
diff --git a/webpack.common.js b/webpack.common.js
@@ -2,7 +2,7 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
-const WorkboxPlugin = require('workbox-webpack-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
 
 module.exports = {
   entry: {
@@ -20,6 +20,9 @@ module.exports = {
         { from: 'src/icons/manifest', to: './' },
       ],
     }),
+    new InjectManifest({
+      swSrc: './src/service-worker.js'
+    })
   ],
   output: {
     filename: '[name].[contenthash].bundle.js',