Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow installing as an offline Progressive Web App #3

Merged
merged 24 commits into from
Jun 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -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
Binary file added icons/apl-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions index.html
sohang3112 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -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>
12 changes: 12 additions & 0 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -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"
}
Binary file added ngn-apl-screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
Expand All @@ -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:

Expand Down
70 changes: 70 additions & 0 deletions serviceWorker.js
Original file line number Diff line number Diff line change
@@ -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));
});
18 changes: 16 additions & 2 deletions web/index.html
sohang3112 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -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." */
Expand All @@ -25,4 +39,4 @@
<script src=index.js ></script>
<script src=lb.js ></script>
</body>
</html>
</html>
2 changes: 1 addition & 1 deletion web/lb.js
sohang3112 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -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})
})();
})();