Allow installing as an offline Progressive Web App (#3)

* Update readme.md Updated link to ngn's implementation of k9 in readme that was pointed to a deleted sr.ht page * accessibility updates for web interface: * updated version of the language bar * always use local lb.js * * * * * Added PWA Manifest * Added favicon * Show APL logo in title * Service Worker to cache urls for offline use * Now working offline! * log error if any url failed to add to cache * log error url * manifest: specify full start url Previously, in installed PWA, it was using sohang3112.github.io as base url (i.e., without /ngn-apl) * Disable cache * add preview screenshot image * replace sohang3112 with abrudz * undo formatting refactors to preserve original code style of abrudz repo * discard formatting changes - keep original repo's code style * ignore testing scripts in testing/ folder --------- Co-authored-by: Eli Mellen <3342274+eli-oat@users.noreply.github.com> Co-authored-by: eli-oat <hi@eli.li>
abrudz · Jun 5, 2024 · 3a4cd1b · 3a4cd1b
1 parent 6c3487f
commit 3a4cd1b
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,40 @@
+testing/
+util.sh
+
+# Created by https://www.toptal.com/developers/gitignore/api/macos
+# Edit at https://www.toptal.com/developers/gitignore?templates=macos
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+# End of https://www.toptal.com/developers/gitignore/api/macos
diff --git a/icons/apl-logo.png b/icons/apl-logo.png
diff --git a/index.html b/index.html
@@ -4,7 +4,15 @@
 <title>ngn/apl</title>
 <meta charset=UTF-8 />
 <meta http-equiv=refresh content='1;url=web/index.html'/>
+<meta property="og:image" content="ngn-apl-screenshot.png" />
+<link rel="manifest" href="manifest.json">
+<link rel="icon" type="image/png" href="icons/apl-logo.png">
 <script>setTimeout(function(){location='web/index.html'},1)</script>
+
+<!-- Disable cache - source: https://stackoverflow.com/a/65475919/12947681 -->
+<meta http-equiv='cache-control' content='no-cache'> 
+<meta http-equiv='expires' content='0'> 
+<meta http-equiv='pragma' content='no-cache'>
 </head>
 <body><p><a href='web/index.html'>Demo</a></p></body>
 </html>
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,12 @@
+{
+    "name": "ngn/apl",
+    "icons": [
+      {
+        "src": "icons/apl-logo.png",
+        "type": "image/png",
+        "sizes": "512x512"
+      }
+    ],
+    "start_url": "https://abrudz.github.io/ngn-apl/web/index.html",
+    "display": "standalone"
+}
diff --git a/ngn-apl-screenshot.png b/ngn-apl-screenshot.png
diff --git a/readme.md b/readme.md
@@ -4,7 +4,9 @@ Its author thinks it has served its purpose and has become a distraction. He wen
 
 ----
 
-**[Demo](https://abrudz.github.io/ngn-apl)**<br>
+[Online Demo](https://abrudz.github.io/ngn-apl) - can also be installed offline as a [PWA (Progressive Web App)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/What_is_a_progressive_web_app)
+
+![Screenshot](ngn-apl-screenshot.png)
 
 An [APL](https://aplwiki.com) interpreter written in JavaScript.
 Runs in a browser or [NodeJS](https://nodejs.org/).
@@ -18,7 +20,7 @@ prototypes, modified assignment (`x+←1`), control structures (`:If`), object-o
 Used in [Paul L Jackson's web site](https://plj541.github.io/APL.js/), [repl.it](https://repl.it/languages/APL),
 and [tio.run](https://tio.run/#apl-ngn).
 
-# Offline usage
+# Offline usage with NodeJS
 
 Run `apl.js` with [Node](https://nodejs.org/) to start a REPL:
 

diff --git a/serviceWorker.js b/serviceWorker.js
@@ -0,0 +1,70 @@
+console.log('Service Worker running')
+const CACHE_NAME = 'ngn/apl-v1';
+const urlsToCache = [
+    '../icons/apl-logo.png',
+    '../web/index.html',
+    '../web/Apl385.woff',         // font
+    '../web/index.js',
+    '../web/lb.js',
+    '../apl.js',
+    '../t.js',
+    '../t.apl'
+];
+
+async function addToCache() {
+    try {
+        let cache = await caches.open(CACHE_NAME);
+        console.log('Opened cache');
+        await cache.addAll(urlsToCache);
+        console.log('All urls cached')
+    } catch(error) {
+        console.error('One or more URLs failed to cache:', error.url || error);
+    }
+}
+
+self.addEventListener('install', function(event) {
+    console.log('Install - Add required urls to cache')
+    event.waitUntil(addToCache());
+});
+
+// Function acts as proxy - any network request goes through this function
+async function fetchEvent(event) {
+    let cacheResponse = await caches.match(event.request);
+    console.log('Cache hit', event.request.url)
+    if (cacheResponse) {
+        return cacheResponse;
+    }
+
+    // Ideally there should be no cache miss 
+    // as all urls should already be added to cache when service worker was installed
+    console.log('Cache missed', event.request.url)
+
+    // IMPORTANT: Clone the request. A request is a stream and
+    // can only be consumed once. Since we are consuming this
+    // once by cache and once by the browser for fetch, we need
+    // to clone the response.
+    let fetchRequest = event.request.clone();
+
+    let response = await fetch(fetchRequest);
+    // Check if we received a valid response
+    if(!response || response.status !== 200 || response.type !== 'basic') {
+        console.log('Invalid response', event.request.url, response);
+        return response;
+    }
+
+    // IMPORTANT: Clone the response. A response is a stream
+    // and because we want the browser to consume the response
+    // as well as the cache consuming the response, we need
+    // to clone it so we have two streams.
+    let responseToCache = response.clone();
+
+    let cache = await caches.open(CACHE_NAME);
+    await cache.put(event.request, responseToCache);
+    console.log('Put in cache', event.request.url);
+
+    return response;     
+}
+
+self.addEventListener('fetch', function(event) {
+    event.respondWith(fetchEvent(event));
+});
diff --git a/web/index.html b/web/index.html
@@ -1,5 +1,19 @@
 <!DOCTYPE html>
-<html><head><meta charset=utf-8><title>ngn/apl</title><style>
+<html>
+<head>
+<meta charset=utf-8>
+<title>ngn/apl</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta property="og:image" content="../ngn-apl-screenshot.png" />
+<link rel="manifest" href="../manifest.json">
+<link rel="icon" type="image/png" href="../icons/apl-logo.png">
+
+<!-- Disable cache - source: https://stackoverflow.com/a/65475919/12947681 -->
+<meta http-equiv='cache-control' content='no-cache'> 
+<meta http-equiv='expires' content='0'> 
+<meta http-equiv='pragma' content='no-cache'>
+
+<style>
 @font-face{font-family:a;src:url(Apl385.woff)format('woff');}
 /* http://www.apl385.com/fonts/index.htm as of 2017-08-10 says:
 "All fonts listed on this page are original artwork by Adrian Smith, and are freely placed into the public domain." */
@@ -25,4 +39,4 @@
 <script src=index.js ></script>
 <script src=lb.js    ></script>
 </body>
-</html>
+</html>
diff --git a/web/lb.js b/web/lb.js
@@ -67,4 +67,4 @@ let ff=x=>{
 let upd=_=>{d.body.style.marginTop=lb.clientHeight+'px'}
 upd();ev(window,'resize',upd)
 ev(d,'focus',ff,!0);let ae=d.activeElement;ae&&ff({type:'focus',target:ae})
-})();
+})();