Skip to content

Commit

Permalink
chore: attempt to become pwa ready
Browse files Browse the repository at this point in the history
  • Loading branch information
thismarvin committed Mar 7, 2023
1 parent c763b96 commit 1e35a12
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 39 deletions.
2 changes: 1 addition & 1 deletion Web.mk
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ private cflags.vendor.raylib.defines := -D_DEFAULT_SOURCE -DPLATFORM_WEB -DGRAPH

cflags.vendor.raylib := -std=gnu99 $(cflags.vendor.raylib.defines) -MMD $(CFLAGS)

ldflags ?= -sUSE_GLFW=3 -sEXPORTED_RUNTIME_METHODS=['ccall'] --shell-file src/minshell.html --preload-file content $(LDFLAGS)
ldflags ?= -sUSE_GLFW=3 -sEXPORTED_RUNTIME_METHODS=['ccall'] --shell-file shell.html --preload-file content $(LDFLAGS)

include Build.mk

Expand Down
50 changes: 12 additions & 38 deletions src/minshell.html → shell.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,10 @@
<meta name="title" content="Larry the Light-bulb Redux" />
<meta
name="description"
content="New raylib web videogame, developed using raylib videogames library"
/>
<meta
name="keywords"
content="raylib, games, html5, programming, C, C++, library, learn, videogames"
content="Revisiting Larry the Light-bulb: a 2D action platformer playable on the web"
/>
<meta name="viewport" content="width=device-width" />
<meta name="theme-color" content="#000000" />

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
Expand Down Expand Up @@ -57,11 +54,6 @@
width: 100%;
}

p {
margin: 0;
padding: 0;
}

#hash {
position: absolute;
bottom: 0;
Expand All @@ -73,29 +65,25 @@
<script type="text/javascript" src="/FileSaver.min.js"></script>
<script type="text/javascript">
function saveFileFromMEMFSToDisk(memoryFSname, localFSname) {
// This can be called by C/C++ code
var isSafari = false; // Not supported, navigator.userAgent access is being restricted
//var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
var data = FS.readFile(memoryFSname);
var blob;
const data = FS.readFile(memoryFSname);

if (isSafari)
blob = new Blob([data.buffer], { type: "application/octet-stream" });
else
blob = new Blob([data.buffer], { type: "application/octet-binary" });
const blob = new Blob([data.buffer], {
type: "application/octet-binary",
});

// NOTE: SaveAsDialog is a browser setting. For example, in Google Chrome,
// in Settings/Advanced/Downloads section you have a setting:
// 'Ask where to save each file before downloading' - which you can set true/false.
// If you enable this setting it would always ask you and bring the SaveAsDialog
saveAs(blob, localFSname);
}
</script>
<script type="text/javascript">
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("sw.js");
}
</script>
</head>
<body>
<main>
<section>
<span id="hash">2023</span>
<span id="hash">2023-03-06</span>
<canvas
class="emscripten"
id="canvas"
Expand All @@ -104,22 +92,8 @@
></canvas>
</section>
</main>
<p id="output" />
<script>
var Module = {
print: (function () {
var element = document.getElementById("output");
if (element) element.value = ""; // clear browser cache
return function (text) {
if (arguments.length > 1)
text = Array.prototype.slice.call(arguments).join(" ");
console.log(text);
if (element) {
element.value += text + "\n";
element.scrollTop = element.scrollHeight; // focus on bottom
}
};
})(),
canvas: (function () {
var canvas = document.getElementById("canvas");
return canvas;
Expand Down
75 changes: 75 additions & 0 deletions sw.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
// The following is yoinked from:
// https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers

const cacheName = "ltlr-2023-03-06";
const contentToCache = [
"FileSaver.min.js",
"android-chrome-192x192.png",
"android-chrome-512x512.png",
"apple-touch-icon-precomposed.png",
"apple-touch-icon.png",
"favicon-16x16.png",
"favicon-32x32.png",
"favicon-48x48.png",
"favicon.ico",
"index.data",
"index.html",
"index.js",
"index.wasm",
"maskable-196x196.png",
"site.webmanifest",
"sw.js",
];

self.addEventListener("install", (e) => {
console.log("[Service Worker] Install");

e.waitUntil(
(async () => {
const cache = await caches.open(cacheName);

console.log("[Service Worker] Caching content");

await cache.addAll(contentToCache);
})()
);
});

self.addEventListener("fetch", (e) => {
e.respondWith(
(async () => {
const r = await caches.match(e.request);

console.log(`[Service Worker] Fetching resource: ${e.request.url}`);

if (r !== undefined) {
return r;
}

const response = await fetch(e.request);
const cache = await caches.open(cacheName);

console.log(`[Service Worker] Caching new resource: ${e.request.url}`);

cache.put(e.request, response.clone());

return response;
})()
);
});

self.addEventListener("activate", (e) => {
e.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(
keyList.map((key) => {
if (key === cacheName) {
return;
}

return caches.delete(key);
})
);
})
);
});

0 comments on commit 1e35a12

Please sign in to comment.