Fix service worker (#2760)

package.json

@@ -169,6 +169,7 @@
     "eslint-plugin-local-rules": "^0.1.1",
     "eslint-plugin-prefer-arrow": "^1.1.6",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.1",
     "eslint-plugin-simple-import-sort": "^5.0.3",
     "file-loader": "^5.0.2",
     "fork-ts-checker-webpack-plugin": "^3.1.1",
@@ -196,18 +197,18 @@
     "setup-polly-jest": "^0.9.1",
     "start-server-and-test": "^1.11.0",
     "ts-jest": "^27.0.7",
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
     "typescript": "^4.8.4",
+    "vite": "^3.2.4",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-pwa": "^0.13.3",
+    "vite-plugin-sentry": "^1.1.6",
+    "vite-plugin-swc-react-refresh": "^2.2.1",
     "workbox-cacheable-response": "^6.1.2",
     "workbox-expiration": "^6.1.2",
     "workbox-precaching": "^6.1.2",
     "workbox-routing": "^6.1.2",
-    "workbox-strategies": "^6.1.2",
-    "vite": "^3.2.4",
-    "vite-plugin-html": "^3.2.0",
-    "vite-plugin-sentry": "^1.1.6",
-    "vite-plugin-swc-react-refresh": "^2.2.1",
-    "eslint-plugin-react-refresh": "^0.3.1",
-    "tsconfig-paths-webpack-plugin": "^3.2.0"
+    "workbox-strategies": "^6.1.2"
   },
   "optionalDependencies": {
     "fsevents": "^1.2.9"
@@ -297,4 +298,4 @@
     "release": "release-it"
   },
   "description": "![Saleor Dashboard](https://user-images.githubusercontent.com/249912/82305745-5c52fd00-99be-11ea-9ac6-cc04a6f28c91.png)"
-}
+}

sw.js

@@ -1,15 +1,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-restricted-globals */
-const {
-  CacheableResponsePlugin,
-} = require("workbox-cacheable-response/CacheableResponsePlugin");
-const { ExpirationPlugin } = require("workbox-expiration/ExpirationPlugin");
-const { precacheAndRoute } = require("workbox-precaching/precacheAndRoute");
-const { registerRoute } = require("workbox-routing/registerRoute");
-const { CacheFirst } = require("workbox-strategies/CacheFirst");
-const {
-  StaleWhileRevalidate,
-} = require("workbox-strategies/StaleWhileRevalidate");
+import { CacheableResponsePlugin } from "workbox-cacheable-response/CacheableResponsePlugin";
+import { ExpirationPlugin } from "workbox-expiration/ExpirationPlugin";
+import { precacheAndRoute } from "workbox-precaching/precacheAndRoute";
+import { registerRoute } from "workbox-routing/registerRoute";
+import { CacheFirst } from "workbox-strategies/CacheFirst";
+import { StaleWhileRevalidate } from "workbox-strategies/StaleWhileRevalidate";
 
 precacheAndRoute(self.__WB_MANIFEST);
 

vite.config.js

@@ -2,10 +2,12 @@
 import path from "path";
 import { defineConfig, loadEnv } from "vite";
 import { createHtmlPlugin } from "vite-plugin-html";
+import { VitePWA } from "vite-plugin-pwa";
 import viteSentry from "vite-plugin-sentry";
 import { swcReactRefresh } from "vite-plugin-swc-react-refresh";
 
 export default defineConfig(({ command, mode }) => {
+  const isDev = command !== "build";
   const env = loadEnv(mode, process.cwd(), "");
   /*
     Using explicit env variables, there is no need to expose all of them (security).
@@ -63,11 +65,28 @@ export default defineConfig(({ command, mode }) => {
     );
   }
 
+  if (!isDev) {
+    console.log("Enabling service worker...");
+
+    plugins.push(
+      VitePWA({
+        strategies: "injectManifest",
+
+        /*
+          Since "src" is exposed as a root,
+          sw.js has to be moved above, to preventing loading in a dev mode.
+        */
+        srcDir: "../",
+        filename: "sw.js",
+      }),
+    );
+  }
+
   /*
    "qs" package uses 'get-intrinsic' whish refers to the global object, we need to recreate it.
    Issue presents only on development mode.
   */
-  const globals = command !== "build" ? { global: {} } : {};
+  const globals = isDev ? { global: {} } : {};
 
   return {
     root: "src",