add offline demo

jcubic · Jul 2, 2023 · 6eae398 · 6eae398
1 parent 5d2dbb2
commit 6eae398
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 1 deletion.
diff --git a/docs/index.html b/docs/index.html
@@ -15,9 +15,10 @@
 <h1>Wayne library demo</h1>
 <ul>
   <li><a href="/wayne/demo/">Main demo</a></li>
-  <li><a href="/wayne/jsx/public/">JSX Demo</a></li>
+  <li><a href="/wayne/jsx/public/">JSX demo</a></li>
   <li><a href="/wayne/fs/">Filesystem demo</a></li>
   <li><a href="/wayne/sse/">Server-Sent Event Proxy</a></li>
+  <li><a href="/wayne/offline/">Offline demo</a></li>
 </ul>
 </body>
 </html>
diff --git a/docs/offline/index.html b/docs/offline/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <meta name="Description" content=""/>
+    <link rel="shortcut icon" href=""/>
+    <!--[if IE]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <script>
+     if ('serviceWorker' in navigator) {
+         var scope = location.pathname.replace(/\/[^\/]+$/, '/');
+         navigator.serviceWorker.register('sw.js', { scope })
+                  .then(function(reg) {
+                      reg.addEventListener('updatefound', function() {
+                          var installingWorker = reg.installing;
+                          console.log('A new service worker is being installed:',
+                                      installingWorker);
+                      });
+                      // registration worked
+                      console.log('Registration succeeded. Scope is ' + reg.scope);
+                  }).catch(function(error) {
+                      // registration failed
+                      console.log('Registration failed with ' + error);
+                  });
+     }
+    </script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+<body>
+  <h1>Offline Wayne Demo</h1>
+  <p>Disconnect the internet connection and refresh the page</p>
+</body>
+</html>
diff --git a/docs/offline/sw.js b/docs/offline/sw.js
@@ -0,0 +1,37 @@
+importScripts('https://cdn.jsdelivr.net/npm/@jcubic/wayne/index.umd.min.js');
+
+const app = new wayne.Wayne();
+
+// don't intercept requests to other domains using middleware
+app.use(async (req, res, next) => {
+    const url = new URL(req.url);
+    if (url.origin === location.origin) {
+        // use normal route
+        next();
+    } else if (!navigator.onLine) {
+        // any file to different domain when user is offline is blank
+        res.send('', 'text/plain');
+    } else {
+        // normal HTTP request to the server
+        const _res = await fetch(req.url);
+        const type = _res.headers.get('Content-Type') ?? 'application/octet-stream';
+        res.send(await _res.arrayBuffer(), { type });
+    }
+});
+
+app.get('*', async (req, res) => {
+    if (navigator.onLine) {
+        const path = '.' + req.params[0];
+        const _res = await fetch(path);
+        const type = _res.headers.get('Content-Type') ?? 'application/octet-stream';
+        res.send(await _res.arrayBuffer(), { type });
+    } else {
+        res.html(`<!DOCTYPE HTML><html><body><h1>You're offline</h1></body></html>`);
+    }
+});
+
+// take control of uncontrolled clients on first load
+// ref: https://web.dev/service-worker-lifecycle/#clientsclaim
+self.addEventListener('activate', (event) => {
+  event.waitUntil(clients.claim());
+});