feat(datatrakWeb): RN-1479: Datatrak pwa setup

packages/datatrak-web/index.html

@@ -65,6 +65,13 @@
     <!-- End of bes-support Zendesk Widget script -->
     <% } %>
 
+    <!-- Temporarily disable PWA on production environments -->
+    <% if (process.env.REACT_APP_DEPLOYMENT_NAME !== 'master' &&
+    process.env.REACT_APP_DEPLOYMENT_NAME !== 'main' && process.env.REACT_APP_DEPLOYMENT_NAME !==
+    'production') { %>
+      <link rel="manifest" id="manifest" href="/manifest.json"/>
+    <% } %>
+
     <link rel="icon" type="image/png" href="/favicon.ico" />
     <!-- Add media='print' and onload="this.media='all'" to stop the resource being render-blocking on load: see https://pagespeedchecklist.com/asynchronous-google-fonts -->
     <link

packages/datatrak-web/package.json

@@ -41,6 +41,8 @@
     "react-router-dom": "6.3.0",
     "react-table": "^7.8.0",
     "styled-components": "^5.1.0",
+    "workbox-precaching": "^7.1.0",
+    "workbox-sw": "^7.1.0",
     "yup": "^1.3.2"
   },
   "devDependencies": {
@@ -53,12 +55,15 @@
     "@types/react": "16.8.6",
     "@types/react-table": "^7.7.14",
     "@vitejs/plugin-react": "^4.0.0",
+    "esbuild": "^0.24.0",
     "msw": "^1.3.1",
     "npm-run-all": "^4.1.5",
-    "vite": "^4.5.3"
+    "vite": "^4.5.3",
+    "workbox-cli": "^7.1.0"
   },
   "scripts": {
-    "build": "yarn package:build:types && yarn package:build:vite",
+    "build:worker": "esbuild --outfile=dist/sw.js --bundle service-worker.ts && workbox injectManifest workbox-config.js",
+    "build": "yarn package:build:types && yarn package:build:vite && yarn build:worker",
     "lint": "yarn package:lint",
     "lint:fix": "yarn lint --fix",
     "preview": "vite preview",

packages/datatrak-web/public/manifest.json

@@ -0,0 +1,93 @@
+{
+  "id": "datatrak",
+  "name": "Tupaia DataTrak",
+  "short_name": "Tupaia DataTrak",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "description": "Data collection and visualisation for the most remote settings in the world",
+  "screenshots": [
+    {
+      "src": "screenshots/login.png",
+      "sizes": "2000x1000",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "Login screen"
+    },
+    {
+      "src": "screenshots/dashboard.png",
+      "sizes": "2000x1000",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "Dashboard"
+    },
+    {
+      "src": "screenshots/login-mobile.png",
+      "sizes": "381x667",
+      "type": "image/png",
+      "form_factor": "narrow",
+      "label": "Mobile login screen"
+    }
+  ],
+  "icons": [
+    {
+      "src": "icons/manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/manifest-icon-192.maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "icons/manifest-icon-512.maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/manifest-icon-512.maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Datatrak Tasks",
+      "description": "Tupaia Datatrak tasks",
+      "url": "/tasks",
+      "icons":[
+        {
+          "src": "icons/manifest-icon-192.maskable.png",
+          "sizes": "192x192",
+          "type": "image/png",
+          "purpose": "any"
+        },
+        {
+          "src": "icons/manifest-icon-192.maskable.png",
+          "sizes": "192x192",
+          "type": "image/png",
+          "purpose": "maskable"
+        },
+        {
+          "src": "icons/manifest-icon-512.maskable.png",
+          "sizes": "512x512",
+          "type": "image/png",
+          "purpose": "any"
+        },
+        {
+          "src": "icons/manifest-icon-512.maskable.png",
+          "sizes": "512x512",
+          "type": "image/png",
+          "purpose": "maskable"
+        }
+      ]
+    }
+  ]
+}