Add service worker (#1073)

* Add service worker

* Update messages

* Update changelog

* Remove debug code

* Refactor code and add interval config

* Clear interval

* Reload all pages simultaneously

* Update copy

CHANGELOG.md

@@ -41,6 +41,7 @@ All notable, unreleased changes to this project will be documented in this file.
   - multiselect empty chip upon creation of a product/variant,
   - useFormset.setItemValue wrong updates,
 - Drop deprecated fields - #1071 by @jwm0
+- Add service worker - #1073 by @dominik-zeglen
 
 # 2.11.1
 

locale/defaultMessages.json

@@ -2392,6 +2392,18 @@
     "context": "dialog header, title",
     "string": "Invoice Generation"
   },
+  "src_dot_containers_dot_ServiceWorker_dot_newVersionContent": {
+    "context": "new version notification content",
+    "string": "You need to update Saleor to the newest version. Before doing so - save all changes to prevent loss of data. To update use the button below."
+  },
+  "src_dot_containers_dot_ServiceWorker_dot_newVersionTitle": {
+    "context": "notification title",
+    "string": "System update required"
+  },
+  "src_dot_containers_dot_ServiceWorker_dot_refresh": {
+    "context": "button",
+    "string": "Refresh"
+  },
   "src_dot_create": {
     "context": "button",
     "string": "Create"

package-lock.json

@@ -2114,12 +2114,60 @@
       "integrity": "sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==",
       "dev": true
     },
+    "@hapi/address": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
+      "integrity": "sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==",
+      "dev": true
+    },
+    "@hapi/formula": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-1.2.0.tgz",
+      "integrity": "sha512-UFbtbGPjstz0eWHb+ga/GM3Z9EzqKXFWIbSOFURU0A/Gku0Bky4bCk9/h//K2Xr3IrCfjFNhMm4jyZ5dbCewGA==",
+      "dev": true
+    },
     "@hapi/hoek": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.1.1.tgz",
       "integrity": "sha512-CAEbWH7OIur6jEOzaai83jq3FmKmv4PmX1JYfs9IrYcGEVI/lyL1EXJGCj7eFVJ0bg5QR8LMxBlEtA+xKiLpFw==",
       "dev": true
     },
+    "@hapi/joi": {
+      "version": "16.1.8",
+      "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-16.1.8.tgz",
+      "integrity": "sha512-wAsVvTPe+FwSrsAurNt5vkg3zo+TblvC5Bb1zMVK6SJzZqw9UrJnexxR+76cpePmtUZKHAPxcQ2Bf7oVHyahhg==",
+      "dev": true,
+      "requires": {
+        "@hapi/address": "^2.1.2",
+        "@hapi/formula": "^1.2.0",
+        "@hapi/hoek": "^8.2.4",
+        "@hapi/pinpoint": "^1.0.2",
+        "@hapi/topo": "^3.1.3"
+      },
+      "dependencies": {
+        "@hapi/hoek": {
+          "version": "8.5.1",
+          "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
+          "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==",
+          "dev": true
+        },
+        "@hapi/topo": {
+          "version": "3.1.6",
+          "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-3.1.6.tgz",
+          "integrity": "sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==",
+          "dev": true,
+          "requires": {
+            "@hapi/hoek": "^8.3.0"
+          }
+        }
+      }
+    },
+    "@hapi/pinpoint": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-1.0.2.tgz",
+      "integrity": "sha512-dtXC/WkZBfC5vxscazuiJ6iq4j9oNx1SHknmIr8hofarpKUZKmlUVYVIhNVzIEgK5Wrc4GMHL5lZtt1uS2flmQ==",
+      "dev": true
+    },
     "@hapi/topo": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.0.0.tgz",
@@ -4076,6 +4124,51 @@
         "mock-fs": "^4.13.0"
       }
     },
+    "@rollup/plugin-babel": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
+      "integrity": "sha512-9uIC8HZOnVLrLHxayq/PTzw+uS25E14KPUBh5ktF+18Mjo5yK0ToMMx6epY0uEgkjwJw0aBW4x2horYXh8juWw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.10.4",
+        "@rollup/pluginutils": "^3.1.0"
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
+      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.19.0"
+      }
+    },
+    "@rollup/plugin-replace": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz",
+      "integrity": "sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      }
+    },
     "@saleor/macaw-ui": {
       "version": "0.1.1-9",
       "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.1.1-9.tgz",
@@ -4881,6 +4974,16 @@
         }
       }
     },
+    "@surma/rollup-plugin-off-main-thread": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz",
+      "integrity": "sha512-yBMPqmd1yEJo/280PAMkychuaALyQ9Lkb5q1ck3mjJrFuEobIfhnQ4J3mbvBoISmR3SWMWV+cGB/I0lCQee79A==",
+      "dev": true,
+      "requires": {
+        "ejs": "^2.6.1",
+        "magic-string": "^0.25.0"
+      }
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -5120,6 +5223,12 @@
         "@types/react": "*"
       }
     },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
     "@types/faker": {
       "version": "5.5.1",
       "resolved": "https://registry.npmjs.org/@types/faker/-/faker-5.5.1.tgz",
@@ -5609,6 +5718,15 @@
         "@types/react": "*"
       }
     },
+    "@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/responselike": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@@ -8855,6 +8973,12 @@
       "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
       "dev": true
     },
+    "builtin-modules": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
+      "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
+      "dev": true
+    },
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -11175,6 +11299,12 @@
       "integrity": "sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -12847,6 +12977,12 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true
     },
+    "estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -16271,6 +16407,12 @@
       "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
       "dev": true
     },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
     "is-negative-zero": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
@@ -19091,6 +19233,15 @@
       "integrity": "sha512-H/QHeBIN1fIGJX517pvK8IEK53yQOW7YcEI55oYtgjDdoCQQz7eJS94qt5kNrscReEyuD/JcdFCm2XBEcGOITg==",
       "dev": true
     },
+    "magic-string": {
+      "version": "0.25.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -23257,6 +23408,12 @@
         "unicode-match-property-value-ecmascript": "^1.2.0"
       }
     },
+    "register-service-worker": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/register-service-worker/-/register-service-worker-1.7.2.tgz",
+      "integrity": "sha512-CiD3ZSanZqcMPRhtfct5K9f7i3OLCcBBWsJjLh1gW9RO/nS94sVzY59iS+fgYBOBqaBpf4EzfqUF3j9IG+xo8A==",
+      "dev": true
+    },
     "registry-auth-token": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
@@ -24118,6 +24275,105 @@
         }
       }
     },
+    "rollup": {
+      "version": "2.45.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.45.2.tgz",
+      "integrity": "sha512-kRRU7wXzFHUzBIv0GfoFFIN3m9oteY4uAsKllIpQDId5cfnkWF2J130l+27dzDju0E6MScKiV0ZM5Bw8m4blYQ==",
+      "dev": true,
+      "requires": {
+        "fsevents": "~2.3.1"
+      },
+      "dependencies": {
+        "fsevents": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+          "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "rollup-plugin-terser": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.10.4",
+        "jest-worker": "^26.2.1",
+        "serialize-javascript": "^4.0.0",
+        "terser": "^5.0.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jest-worker": {
+          "version": "26.6.2",
+          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+          "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+          "dev": true,
+          "requires": {
+            "@types/node": "*",
+            "merge-stream": "^2.0.0",
+            "supports-color": "^7.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        },
+        "source-map-support": {
+          "version": "0.5.19",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+          "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+          "dev": true,
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "terser": {
+          "version": "5.6.1",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-5.6.1.tgz",
+          "integrity": "sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==",
+          "dev": true,
+          "requires": {
+            "commander": "^2.20.0",
+            "source-map": "~0.7.2",
+            "source-map-support": "~0.5.19"
+          }
+        }
+      }
+    },
     "route-recognizer": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz",
@@ -25103,6 +25359,12 @@
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
       "dev": true
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
     "space-separated-tokens": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
@@ -25734,23 +25996,6 @@
         }
       }
     },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.1.0"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        }
-      }
-    },
     "stringify-object": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
@@ -25782,6 +26027,12 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
       "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
     },
+    "strip-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
+      "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==",
+      "dev": true
+    },
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -26101,6 +26352,32 @@
         }
       }
     },
+    "temp-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
+      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+      "dev": true
+    },
+    "tempy": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz",
+      "integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
+      "dev": true,
+      "requires": {
+        "is-stream": "^2.0.0",
+        "temp-dir": "^2.0.0",
+        "type-fest": "^0.16.0",
+        "unique-string": "^2.0.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.16.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
+          "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
+          "dev": true
+        }
+      }
+    },
     "term-size": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
@@ -28159,6 +28436,31 @@
         "uuid": "^3.3.2"
       }
     },
+    "webpack-manifest-plugin": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-2.2.0.tgz",
+      "integrity": "sha512-9S6YyKKKh/Oz/eryM1RyLVDVmy3NSPV0JXMRhZ18fJsq+AwGxUY34X54VNwkzYcEmEkDwNxuEOboCZEebJXBAQ==",
+      "dev": true,
+      "requires": {
+        "fs-extra": "^7.0.0",
+        "lodash": ">=3.5 <5",
+        "object.entries": "^1.1.0",
+        "tapable": "^1.0.0"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+          "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        }
+      }
+    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
@@ -28430,6 +28732,269 @@
       "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
       "dev": true
     },
+    "workbox-background-sync": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.1.5.tgz",
+      "integrity": "sha512-VbUmPLsdz+sLzuNxHvMylzyRTiM4q+q7rwLBk3p2mtRL5NZozI8j/KgoGbno96vs84jx4b9zCZMEOIKEUTPf6w==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5"
+      }
+    },
+    "workbox-broadcast-update": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.1.5.tgz",
+      "integrity": "sha512-zGrTTs+n4wHpYtqYMqBg6kl/x5j1UrczGCQnODSHTxIDV8GXLb/GtA1BCZdysNxpMmdVSeLmTcgIYAAqWFamrA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5"
+      }
+    },
+    "workbox-build": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.1.5.tgz",
+      "integrity": "sha512-P+fakR5QFVqJN9l9xHVXtmafga72gh9I+jM3A9HiB/6UNRmOAejXnDgD+RMegOHgQHPwnB44TalMToFaXKWIyA==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.11.1",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/runtime": "^7.11.2",
+        "@hapi/joi": "^16.1.8",
+        "@rollup/plugin-babel": "^5.2.0",
+        "@rollup/plugin-node-resolve": "^11.2.1",
+        "@rollup/plugin-replace": "^2.4.1",
+        "@surma/rollup-plugin-off-main-thread": "^1.4.1",
+        "common-tags": "^1.8.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "fs-extra": "^9.0.1",
+        "glob": "^7.1.6",
+        "lodash": "^4.17.20",
+        "pretty-bytes": "^5.3.0",
+        "rollup": "^2.43.1",
+        "rollup-plugin-terser": "^7.0.0",
+        "source-map": "^0.8.0-beta.0",
+        "source-map-url": "^0.4.0",
+        "stringify-object": "^3.3.0",
+        "strip-comments": "^2.0.1",
+        "tempy": "^0.6.0",
+        "upath": "^1.2.0",
+        "workbox-background-sync": "^6.1.5",
+        "workbox-broadcast-update": "^6.1.5",
+        "workbox-cacheable-response": "^6.1.5",
+        "workbox-core": "^6.1.5",
+        "workbox-expiration": "^6.1.5",
+        "workbox-google-analytics": "^6.1.5",
+        "workbox-navigation-preload": "^6.1.5",
+        "workbox-precaching": "^6.1.5",
+        "workbox-range-requests": "^6.1.5",
+        "workbox-recipes": "^6.1.5",
+        "workbox-routing": "^6.1.5",
+        "workbox-strategies": "^6.1.5",
+        "workbox-streams": "^6.1.5",
+        "workbox-sw": "^6.1.5",
+        "workbox-window": "^6.1.5"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "dev": true,
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.8.0-beta.0",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
+          "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+          "dev": true,
+          "requires": {
+            "whatwg-url": "^7.0.0"
+          }
+        },
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        },
+        "whatwg-url": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
+          "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+          "dev": true,
+          "requires": {
+            "lodash.sortby": "^4.7.0",
+            "tr46": "^1.0.1",
+            "webidl-conversions": "^4.0.2"
+          }
+        }
+      }
+    },
+    "workbox-cacheable-response": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.1.5.tgz",
+      "integrity": "sha512-x8DC71lO/JCgiaJ194l9le8wc8lFPLgUpDkLhp2si7mXV6S/wZO+8Osvw1LLgYa8YYTWGbhbFhFTXIkEMknIIA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5"
+      }
+    },
+    "workbox-core": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.1.5.tgz",
+      "integrity": "sha512-9SOEle7YcJzg3njC0xMSmrPIiFjfsFm9WjwGd5enXmI8Lwk8wLdy63B0nzu5LXoibEmS9k+aWF8EzaKtOWjNSA==",
+      "dev": true
+    },
+    "workbox-expiration": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.1.5.tgz",
+      "integrity": "sha512-6cN+FVbh8fNq56LFKPMchGNKCJeyboHsDuGBqmhDUPvD4uDjsegQpDQzn52VaE0cpywbSIsDF/BSq9E9Yjh5oQ==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5"
+      }
+    },
+    "workbox-google-analytics": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.1.5.tgz",
+      "integrity": "sha512-LYsJ/VxTkYVLxM1uJKXZLz4cJdemidY7kPyAYtKVZ6EiDG89noASqis75/5lhqM1m3HwQfp2DtoPrelKSpSDBA==",
+      "dev": true,
+      "requires": {
+        "workbox-background-sync": "^6.1.5",
+        "workbox-core": "^6.1.5",
+        "workbox-routing": "^6.1.5",
+        "workbox-strategies": "^6.1.5"
+      }
+    },
+    "workbox-navigation-preload": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.1.5.tgz",
+      "integrity": "sha512-hDbNcWlffv0uvS21jCAC/mYk7NzaGRSWOQXv1p7bj2aONAX5l699D2ZK4D27G8TO0BaLHUmW/1A5CZcsvweQdg==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5"
+      }
+    },
+    "workbox-precaching": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.1.5.tgz",
+      "integrity": "sha512-yhm1kb6wgi141JeM5X7z42XJxCry53tbMLB3NgrxktrZbwbrJF8JILzYy+RFKC9tHC6u2bPmL789GPLT2NCDzw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5",
+        "workbox-routing": "^6.1.5",
+        "workbox-strategies": "^6.1.5"
+      }
+    },
+    "workbox-range-requests": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.1.5.tgz",
+      "integrity": "sha512-iACChSapzB0yuIum3ascP/+cfBNuZi5DRrE+u4u5mCHigPlwfSWtlaY+y8p+a8EwcDTVTZVtnrGrRnF31SiLqQ==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5"
+      }
+    },
+    "workbox-recipes": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.1.5.tgz",
+      "integrity": "sha512-MD1yabHca6O/oj1hrRdfj9cRwhKA5zqIE53rWOAg/dKMMzWQsf9nyRbXRgzK3a13iQvYKuQzURU4Cx58tdnR+Q==",
+      "dev": true,
+      "requires": {
+        "workbox-cacheable-response": "^6.1.5",
+        "workbox-core": "^6.1.5",
+        "workbox-expiration": "^6.1.5",
+        "workbox-precaching": "^6.1.5",
+        "workbox-routing": "^6.1.5",
+        "workbox-strategies": "^6.1.5"
+      }
+    },
+    "workbox-routing": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.1.5.tgz",
+      "integrity": "sha512-uC/Ctz+4GXGL42h1WxUNKxqKRik/38uS0NZ6VY/EHqL2F1ObLFqMHUZ4ZYvyQsKdyI82cxusvhJZHOrY0a2fIQ==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5"
+      }
+    },
+    "workbox-strategies": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.1.5.tgz",
+      "integrity": "sha512-QhiOn9KT9YGBdbfWOmJT6pXZOIAxaVrs6J6AMYzRpkUegBTEcv36+ZhE/cfHoT0u2fxVtthHnskOQ/snEzaXQw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5"
+      }
+    },
+    "workbox-streams": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.1.5.tgz",
+      "integrity": "sha512-OI1kLvRHGFXV+soDvs6aEwfBwdAkvPB0mRryqdh3/K17qUj/1gRXc8QtpgU+83xqx/I/ar2bTCIj0KPzI/ChCQ==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5",
+        "workbox-routing": "^6.1.5"
+      }
+    },
+    "workbox-sw": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.1.5.tgz",
+      "integrity": "sha512-IMDiqxYbKzPorZLGMUMacLB6r76iVQbdTzYthIZoPfy+uFURJFUtqiWQJKg1L+RMyuYXwKXTahCIGkgFs4jBeg==",
+      "dev": true
+    },
+    "workbox-webpack-plugin": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.1.5.tgz",
+      "integrity": "sha512-tsgeNAYiFP4STNPDxBVT58eiU8nGUmcv7Lq9FFJkQf5MMu6tPw1OLp+KpszhbCWP+R/nEdu85Gjexs6fY647Kg==",
+      "dev": true,
+      "requires": {
+        "fast-json-stable-stringify": "^2.1.0",
+        "pretty-bytes": "^5.4.1",
+        "source-map-url": "^0.4.0",
+        "upath": "^1.2.0",
+        "webpack-sources": "^1.4.3",
+        "workbox-build": "^6.1.5"
+      }
+    },
+    "workbox-window": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-6.1.5.tgz",
+      "integrity": "sha512-akL0X6mAegai2yypnq78RgfazeqvKbsllRtEI4dnbhPcRINEY1NmecFmsQk8SD+zWLK1gw5OdwAOX+zHSRVmeA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "^6.1.5"
+      }
+    },
     "worker-farm": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",

package.json

@@ -169,7 +169,15 @@
     "tsconfig-paths-webpack-plugin": "^3.2.0",
     "webpack": "^4.35.3",
     "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "webpack-manifest-plugin": "2.2.0",
+    "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",
+    "workbox-webpack-plugin": "^6.1.2",
+    "register-service-worker": "^1.7.2"
   },
   "optionalDependencies": {
     "fsevents": "^1.2.9"

src/config.ts

@@ -5,6 +5,7 @@ import { ListSettings, ListViews, Pagination } from "./types";
 export const APP_MOUNT_URI = process.env.APP_MOUNT_URI;
 export const APP_DEFAULT_URI = "/";
 export const API_URI = process.env.API_URI;
+export const SW_INTERVAL = parseInt(process.env.SW_INTERVAL, 0);
 
 export const DEFAULT_INITIAL_SEARCH_DATA: SearchVariables = {
   after: null,

src/containers/ServiceWorker/ServiceWorker.tsx

@@ -0,0 +1,32 @@
+import { SW_INTERVAL } from "@saleor/config";
+import useNotifier from "@saleor/hooks/useNotifier";
+import React from "react";
+import { useIntl } from "react-intl";
+import { useServiceWorker } from "src/hooks/useServiceWorker";
+
+import messages from "./messages";
+
+const ServiceWorker: React.FC = () => {
+  const { update, updateAvailable } = useServiceWorker(SW_INTERVAL * 1000);
+  const notify = useNotifier();
+  const { formatMessage } = useIntl();
+
+  React.useEffect(() => {
+    if (updateAvailable) {
+      notify({
+        title: formatMessage(messages.newVersionTitle),
+        text: formatMessage(messages.newVersionContent),
+        actionBtn: {
+          label: formatMessage(messages.refresh),
+          action: update
+        },
+        autohide: null,
+        status: "warning"
+      });
+    }
+  }, [updateAvailable]);
+
+  return null;
+};
+
+export default ServiceWorker;

src/containers/ServiceWorker/index.ts

@@ -0,0 +1,2 @@
+export * from "./ServiceWorker";
+export { default } from "./ServiceWorker";

src/containers/ServiceWorker/messages.ts

@@ -0,0 +1,19 @@
+import { defineMessages } from "react-intl";
+
+const messages = defineMessages({
+  newVersionTitle: {
+    defaultMessage: "System update required",
+    description: "notification title"
+  },
+  newVersionContent: {
+    defaultMessage:
+      "You need to update Saleor to the newest version. Before doing so - save all changes to prevent loss of data. To update use the button below.",
+    description: "new version notification content"
+  },
+  refresh: {
+    defaultMessage: "Refresh",
+    description: "button"
+  }
+});
+
+export default messages;

src/hooks/useServiceWorker.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { register } from "register-service-worker";
+
+export const useServiceWorker = (timeout: number) => {
+  const [updateAvailable, setUpdateAvailable] = useState<boolean>(false);
+  const registrationRef = useRef<ServiceWorkerRegistration>();
+
+  useEffect(() => {
+    const interval = (setInterval(() => {
+      if (registrationRef.current) {
+        registrationRef.current.update();
+      }
+    }, timeout) as unknown) as number;
+    return () => clearInterval(interval);
+  }, [timeout]);
+
+  const onRegistered = (registration: ServiceWorkerRegistration) => {
+    registrationRef.current = registration;
+  };
+
+  const onUpdateFound = () => setUpdateAvailable(true);
+
+  const update = useCallback(() => {
+    if (updateAvailable) {
+      registrationRef.current.waiting.postMessage("update");
+    }
+  }, [updateAvailable]);
+
+  useEffect(() => {
+    register("/sw.js", {
+      registered: onRegistered,
+      updatefound: onUpdateFound
+    });
+  }, []);
+
+  return { update, updateAvailable };
+};

src/index.tsx

@@ -40,6 +40,7 @@ import { API_URI, APP_MOUNT_URI, GTM_ID } from "./config";
 import ConfigurationSection, { createConfigurationMenu } from "./configuration";
 import AppStateProvider from "./containers/AppState";
 import BackgroundTasksProvider from "./containers/BackgroundTasks";
+import ServiceWorker from "./containers/ServiceWorker/ServiceWorker";
 import { CustomerSection } from "./customers";
 import DiscountSection from "./discounts";
 import HomePage from "./home";
@@ -113,6 +114,7 @@ const App: React.FC = () => {
           <DateProvider>
             <LocaleProvider>
               <MessageManagerProvider>
+                <ServiceWorker />
                 <BackgroundTasksProvider>
                   <AppStateProvider>
                     <ShopProvider>

src/sw.js

@@ -0,0 +1,76 @@
+/* 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");
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+registerRoute(
+  /\.(?:png|gif|jpg|jpeg|webp|svg)$/,
+  new CacheFirst({
+    cacheName: "images",
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 60,
+        maxAgeSeconds: 30 * 24 * 60 * 60 // 30 Days
+      })
+    ]
+  })
+);
+
+const registerFontStyles = (match, name) => {
+  registerRoute(
+    match,
+    new StaleWhileRevalidate({
+      cacheName: name
+    })
+  );
+};
+
+const registerFont = (match, name) => {
+  registerRoute(
+    match,
+    new CacheFirst({
+      cacheName: name,
+      plugins: [
+        new CacheableResponsePlugin({
+          statuses: [0, 200]
+        }),
+        new ExpirationPlugin({
+          maxAgeSeconds: 60 * 60 * 24 * 365,
+          maxEntries: 30
+        })
+      ]
+    })
+  );
+};
+
+registerFontStyles(
+  /^https:\/\/fonts\.googleapis\.com/,
+  "google-fonts-stylesheets"
+);
+registerFontStyles(/^https:\/\/rsms\.me\/.+\/.+\.css/, "rsms-stylesheet");
+
+registerFont(/^https:\/\/fonts\.gstatic\.com/, "google-fonts-webfonts");
+registerFont(/^https:\/\/rsms\.me\/.+\/font-files.+/, "rsms-webfonts");
+
+self.addEventListener("message", event => {
+  if (event.data === "update") {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener("activate", async () => {
+  const tabs = await self.clients.matchAll({ type: "window" });
+  tabs.forEach(tab => {
+    tab.navigate(tab.url);
+  });
+});

webpack.config.js

@@ -4,6 +4,7 @@ const CheckerPlugin = require("fork-ts-checker-webpack-plugin");
 const webpack = require("webpack");
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { InjectManifest } = require("workbox-webpack-plugin");
 const SentryWebpackPlugin = require("@sentry/webpack-plugin");
 
 require("dotenv").config();
@@ -29,7 +30,8 @@ const environmentPlugin = new webpack.EnvironmentPlugin({
   DEMO_MODE: false,
   ENVIRONMENT: "",
   GTM_ID: "",
-  SENTRY_DSN: ""
+  SENTRY_DSN: "",
+  SW_INTERVAL: "300" // Fetch SW every 300 seconds
 });
 
 const dashboardBuildPath = "build/dashboard/";
@@ -78,6 +80,16 @@ module.exports = (env, argv) => {
     });
   }
 
+  let manifestPlugin;
+  if (!devMode) {
+    manifestPlugin = new InjectManifest({
+      swSrc: "./src/sw.js",
+      swDest: "sw.js",
+      maximumFileSizeToCacheInBytes: 5000000,
+      webpackCompilationPlugins: [checkerPlugin]
+    });
+  }
+
   return {
     devServer: {
       compress: true,
@@ -122,7 +134,8 @@ module.exports = (env, argv) => {
       checkerPlugin,
       environmentPlugin,
       htmlWebpackPlugin,
-      sentryPlugin
+      sentryPlugin,
+      manifestPlugin
     ].filter(Boolean),
     resolve: {
       extensions: [".js", ".jsx", ".ts", ".tsx"],