Service worker using rescript and Cache fixed

CHANGELOG.md

@@ -1,5 +1,10 @@
 # sensum
 
+## v1.1.2
+* ServiceWorker written in rescript
+* Refresh cache using the service worker (see if it works)
+* Use Standalone as default mode for PWA
+
 ## v1.0.0
 * Display app version
 * Calculate gas cost for a sensation + UI changes

sensum-pwa/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sensum-pwa",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

sensum-pwa/src/ServiceWorker.res

@@ -0,0 +1,19 @@
+// NOTE: To debug this module in the navigator use: yarn build && yarn preview
+
+type entry = {
+    url: string,
+    revision: string
+}
+
+@module("workbox-precaching") external precacheAndRoute: array<entry> => unit = "precacheAndRoute"
+
+@module("workbox-precaching") external cleanupOutdatedCaches: unit => unit = "cleanupOutdatedCaches"
+
+@scope("self") external entries: array<entry> = "__WB_MANIFEST"
+
+// Ref. https://developer.chrome.com/docs/workbox/modules/workbox-precaching
+// self.__WB_MANIFEST contains the cacheable entries listed by VitePWA pluggin 
+precacheAndRoute(entries)
+
+// clean old assets
+cleanupOutdatedCaches()

sensum-pwa/src/core/ui/navbar/Core_Ui_Navbar.res

@@ -9,26 +9,28 @@ module DefaultRightComponent = {
 }
 
 @scope("import.meta.env") @val external appVersion: string = "APP_VERSION"
+@scope("window.location") @val external reloadPage: bool => unit = "reload"
 
 @react.component
 let make = (~rightComponent: React.element=<DefaultRightComponent />) => {
+
   let onClick = event => {
     ReactEvent.Mouse.preventDefault(event)
-    RescriptReactRouter.replace("/dsensum")
+    reloadPage(true)
   }
-  
+
   // FIXME: Make it responsive!
   <header
     className="border-purple-900 border-b-2 flex justify-between">
-    <div className="flex flex-row items-baseline">
+    <div className="flex flex-row items-baseline group relative">
+      <h1 className="pl-2 text-xl lg:text-4xl text-purple-50">
+        {"δensum"->React.string}
+      </h1>
       <button onClick>
-        <h1 className="pl-2 text-xl lg:text-4xl text-purple-50">
-          {"δensum"->React.string}
-        </h1>
+        <a className="pl-2 text-sm lg:text-md text-purple-50" >
+          {`(v${appVersion})`->React.string}
+        </a>   
       </button>
-      <a className="pl-2 text-sm lg:text-md text-purple-50" >
-        {`(v${appVersion})`->React.string}
-      </a>
     </div>
     {rightComponent}
   </header>

sensum-pwa/src/pages/notFound/Pages_NotFound.res

@@ -2,7 +2,7 @@
 let make = () => {
   let onClick = event => {
     ReactEvent.Mouse.preventDefault(event)
-    RescriptReactRouter.replace("/dsensum")
+    RescriptReactRouter.replace("/dsensum/")
   }
   <div className="bg-black flex flex-col h-screen overflow-hidden">
     <Core.Ui.Navbar />

sensum-pwa/vite.config.js

@@ -22,13 +22,14 @@ export default defineConfig({
       registerType: 'autoUpdate', // Vs Prompt for new content
       srcDir: 'src',
       base: '/dsensum/',
-      filename: 'ServiceWorker.js',
+      filename: 'ServiceWorker.bs.js',
       manifest: {
+        id: "d-sensum",
         name: 'd-sensum',
         short_name: 'δensum',
         // https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override#values
-        display_override: ["minimal-ui", "browser"],
-        display: "minimal-ui",
+        display_override: ["standalone", "minimal-ui", "browser"],
+        display: "standalone",
         start_url: '/dsensum/',
         description: 'mysterious app',
         theme_color: '#4B3968',