Merge pull request #48 from elsirion/2023-11-service-worker

feat: add service worker so PWA can be installed
elsirion · Nov 20, 2023 · b0dd885 · b0dd885
2 parents 32bed30 + 72304b8
commit b0dd885
Show file tree

Hide file tree

Showing 11 changed files with 192 additions and 16 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -38,7 +38,7 @@ tokio = { version = "1.28.2", features = [ "rt", "sync", "time" ] }
 tokio-stream = "0.1.14"
 wasm-bindgen = "0.2.87"
 wasm-bindgen-futures = "0.4.37"
-
+web-sys = { version = "0.3.65", features = [ "Navigator", "Window", "ServiceWorkerContainer" ] }
 gloo-storage = "0.3.0"
 
 [patch.crates-io]

diff --git a/Trunk.toml b/Trunk.toml
@@ -0,0 +1,3 @@
+[[hooks]]
+stage = "post_build"
+command = "./post_build.sh"
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -1,9 +1,13 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta name="version" content="{{buildVersion}}">
     <link data-trunk rel="tailwind-css" href="./index.css"/>
     <link data-trunk rel="rust" data-wasm-opt="z"/>
     <link data-trunk rel="copy-dir" href="./assets/"/>
+    <link data-trunk rel="copy-file" href="./service-worker.js"/>
+    <link data-trunk rel="copy-file" href="./manifest.json"/>
+    <link data-trunk rel="copy-file" href="./favicon.ico"/>
 </head>
 <body></body>
 </html>
diff --git a/assets/manifest.json → manifest.json b/assets/manifest.json → manifest.json
diff --git a/post_build.sh b/post_build.sh
@@ -0,0 +1,56 @@
+#!/usr/bin/env bash
+set -e
+
+appName="fedimint-leptos-test"
+stylePrefix="index"
+styleFormat="css"
+
+# Extract build version
+indexJsFile=$(find ./dist/.stage -iname "${appName}-*.js")
+echo "Extracting build version from file: ${indexJsFile}"
+regex="(.*)${appName}-(.*).js"
+_src="${indexJsFile}"
+while [[ "${_src}" =~ ${regex} ]]; do
+    buildVersion="${BASH_REMATCH[2]}"
+    _i=${#BASH_REMATCH}
+    _src=${_src:_i}
+done
+if [ -z "${buildVersion}" ]; then
+    echo "Could not determine build version!"
+    exit 1
+fi
+echo "Build-Version is: ${buildVersion}"
+
+# Replace placeholder in service-worker.js
+serviceWorkerJsFile=$(find ./dist/.stage -iname "service-worker.js")
+echo "Replacing {{buildVersion}} placeholder in: ${serviceWorkerJsFile}"
+sed "s/{{buildVersion}}/${buildVersion}/g" "${serviceWorkerJsFile}" > "${serviceWorkerJsFile}.modified"
+mv -f "${serviceWorkerJsFile}.modified" "${serviceWorkerJsFile}"
+
+# Replace placeholder in index.html
+indexHtmlFile=$(find ./dist/.stage -iname "index.html")
+echo "Replacing {{buildVersion}} placeholder in: ${indexHtmlFile}"
+sed "s/{{buildVersion}}/${buildVersion}/g" "${indexHtmlFile}" > "${indexHtmlFile}.modified"
+mv -f "${indexHtmlFile}.modified" "${indexHtmlFile}"
+
+# Extract CSS build version
+indexJsFile=$(find ./dist/.stage -iname "${stylePrefix}-*.${styleFormat}")
+echo "Extracting style build version from file: ${indexJsFile}"
+regex="(.*)${stylePrefix}-(.*).${styleFormat}"
+_src="${indexJsFile}"
+while [[ "${_src}" =~ ${regex} ]]; do
+    cssBuildVersion="${BASH_REMATCH[2]}"
+    _i=${#BASH_REMATCH}
+    _src=${_src:_i}
+done
+if [ -z "${cssBuildVersion}" ]; then
+    echo "Could not determine style build version!"
+    exit 1
+fi
+echo "CSS Build-Version is: ${cssBuildVersion}"
+
+# Replace placeholder in service-worker.js
+serviceWorkerJsFile=$(find ./dist/.stage -iname "service-worker.js")
+echo "Replacing {{cssBuildVersion}} placeholder in: ${serviceWorkerJsFile}"
+sed "s/{{cssBuildVersion}}/${cssBuildVersion}/g" "${serviceWorkerJsFile}" > "${serviceWorkerJsFile}.modified"
+mv -f "${serviceWorkerJsFile}.modified" "${serviceWorkerJsFile}"
diff --git a/service-worker.js b/service-worker.js
@@ -0,0 +1,81 @@
+var buildVersion = "{{buildVersion}}"
+var cssBuildVersion = "{{cssBuildVersion}}"
+var cacheName = "webimint";
+
+var filesToCache = [
+    './',
+    './index.html',
+    './manifest.json',
+    './fedimint-leptos-test-' + buildVersion + '_bg.wasm',
+    './fedimint-leptos-test-' + buildVersion + '.js',
+    './index-' + cssBuildVersion + '.css',
+    './assets/icons/android-icon-192x192.png',
+    './assets/icons/favicon-32x32.png',
+    './assets/icons/favicon-96x96.png',
+    './assets/icons/favicon-16x16.png',
+    './favicon.ico',
+
+    // TODO: Add files you want the SW to cache. Rename entries to match your build output!
+];
+
+/* Start the service worker and cache all of the app's content */
+self.addEventListener('install', function (event) {
+    console.log("Installing service-worker for build", buildVersion);
+    const preCache = async () => {
+        get_cache().then(function (cache) {
+            // We clear the whole cache, as we do not know which resources were updated!
+            cache.keys().then(function (requests) {
+                for (let request of requests) {
+                    cache.delete(request);
+                }
+            });
+            cache.addAll(filesToCache.map(url => new Request(url, { credentials: 'same-origin' })));
+        })
+    };
+    event.waitUntil(preCache);
+});
+
+self.addEventListener('message', function (messageEvent) {
+    if (messageEvent.data === "skipWaiting") {
+        console.log("Service-worker received skipWaiting event", buildVersion);
+        self.skipWaiting();
+    }
+});
+
+self.addEventListener('fetch', function (e) {
+    e.respondWith(cache_then_network(e.request));
+});
+
+async function get_cache() {
+    return caches.open(cacheName);
+}
+
+async function cache_then_network(request) {
+    const cache = await get_cache();
+    return cache.match(request).then(
+        (cache_response) => {
+            if (!cache_response) {
+                return fetch_from_network(request, cache);
+            } else {
+                return cache_response;
+            }
+        },
+        (reason) => {
+            return fetch_from_network(request, cache);
+        }
+    );
+}
+
+function fetch_from_network(request, cache) {
+    return fetch(request).then(
+        (net_response) => {
+            return net_response;
+        },
+        (reason) => {
+            console.error("Network fetch rejected. Falling back to ./index.html. Reason: ", reason);
+            return cache.match("./index.html").then(function (cache_root_response) {
+                return cache_root_response;
+            });
+        }
+    )
+}
diff --git a/src/components/app.rs b/src/components/app.rs
@@ -6,12 +6,17 @@ use crate::utils::empty_view;
 use anyhow::anyhow;
 use leptos::*;
 use leptos_meta::{Title, Meta, Link};
+use leptos::SignalGet;
+use tracing::info;
+use crate::components::service_worker::ServiceWorker;
 
 //
 // App component
 //
 #[component]
 pub fn App(cx: Scope) -> impl IntoView {
+    info!("Starting app...");
+
     let client = ClientRpc::new();
     provide_client_context(cx, client.clone());
 
@@ -54,13 +59,15 @@ pub fn App(cx: Scope) -> impl IntoView {
     };
 
     view! { cx,
+      <ServiceWorker path="./service-worker.js" />
+
       <Title text="Webimint" />
       <Meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=0, interactive-widget=overlays-content" />
       <Link rel="icon" type_="image/png" sizes="192x192" href="/assets/icons/android-icon-192x192.png" />
       <Link rel="icon" type_="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png" />
       <Link rel="icon" type_="image/png" sizes="96x96" href="/assets/icons/favicon-96x96.png" />
       <Link rel="icon" type_="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png" />
-      <Link rel="manifest" href="/assets/manifest.json" />
+      <Link rel="manifest" href="/manifest.json" />
       <Meta name="theme-color" content="#ffffff" />
 
       <div class="h-[100dvh]">

diff --git a/src/components/mod.rs b/src/components/mod.rs
@@ -14,6 +14,7 @@ pub mod submit_button;
 pub mod submit_form;
 pub mod tx_list;
 pub mod wallet_selector;
+pub mod service_worker;
 
 pub use app::*;
 pub use balance::*;

diff --git a/src/components/service_worker.rs b/src/components/service_worker.rs
@@ -0,0 +1,23 @@
+use leptos::{component, create_action, IntoView, Scope, window};
+use tracing::{info, warn};
+use crate::utils::empty_view;
+
+#[component]
+pub fn ServiceWorker(cx: Scope, #[prop(into)] path: String) -> impl IntoView {
+    let register_action = create_action(cx, move |script_url: &String| {
+        let script_url = script_url.to_owned();
+        async move {
+            info!("Registering service worker: {}", script_url);
+            let promise = window().navigator().service_worker().register(script_url.as_str());
+            if let Err(e) = wasm_bindgen_futures::JsFuture::from(promise)
+                .await {
+                warn!("Service worker registration failed: {:?}", e);
+            }
+            info!("Service worker registered");
+        }
+    });
+
+    register_action.dispatch(path);
+
+    empty_view()
+}