Simple Service Worker

tsoding · Nov 21, 2023 · 2141308 · 2141308
1 parent 88f9672
commit 2141308
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>emoteJAM &mdash; Generate animated emotes from static images</title>

diff --git a/js/index.js b/js/index.js
@@ -382,6 +382,17 @@ function FilterSelector() {
     return root;
 }
 window.onload = function () {
+    fetch("gif.worker.js");
+    if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register('/serviceworker.js').then(function (registration) {
+            console.log("Registered a Service Worker ", registration);
+        }, function (error) {
+            console.error("Could not register a Service Worker ", error);
+        });
+    }
+    else {
+        console.error("Service Workers are not supported in this browser");
+    }
     feature_params = new URLSearchParams(document.location.search).has("feature-params");
     var filterSelectorEntry = document.getElementById('filter-selector-entry');
     if (filterSelectorEntry === null) {

diff --git a/js/serviceworker.js b/js/serviceworker.js
@@ -0,0 +1,75 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+self.addEventListener("install", function (event) {
+    console.log("Pog! Looks like we installed something! I have no idea what that means, but here is an object the browser sent us", event);
+});
+self.addEventListener("fetch", function (e) {
+    var event = e;
+    if (!navigator.onLine) {
+        console.log("We are offline! Serving request from the cache.");
+        event.respondWith(caches.match(event.request).then(function (response) {
+            if (response !== undefined) {
+                return response;
+            }
+            var headers = new Headers();
+            headers.append("Content-Type", "text/html");
+            return new Response("<h1>You are offline! LoooooLL!!11 4HEad</h1>", {
+                status: 200,
+                headers: headers
+            });
+        }));
+    }
+    else {
+        console.log("We are online! Forwarding the request.");
+        event.respondWith((function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response, cache;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4, fetch(event.request)];
+                    case 1:
+                        response = _a.sent();
+                        return [4, caches.open("v1")];
+                    case 2:
+                        cache = _a.sent();
+                        cache.put(event.request, response.clone());
+                        return [2, response];
+                }
+            });
+        }); })());
+    }
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/ts/index.ts b/ts/index.ts
@@ -512,6 +512,22 @@ function FilterSelector() {
 }
 
 window.onload = () => {
+    fetch("gif.worker.js").then(() => {
+        console.log("Prefetched gif.worker.js");
+    });
+    if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register('/serviceworker.js').then(
+            (registration) => {
+                console.log("Registered a Service Worker ", registration);
+            },
+            (error) => {
+                console.error("Could not register a Service Worker ", error);
+            },
+        );
+    } else {
+        console.error("Service Workers are not supported in this browser");
+    }
+
     feature_params = new URLSearchParams(document.location.search).has("feature-params");
 
     const filterSelectorEntry = document.getElementById('filter-selector-entry');

diff --git a/ts/serviceworker.ts b/ts/serviceworker.ts
@@ -0,0 +1,31 @@
+
+self.addEventListener("install", (event) => {
+    console.log("Pog! Looks like we installed something! I have no idea what that means, but here is an object the browser sent us", event);
+});
+
+self.addEventListener("fetch", (e) => {
+    const event = e as FetchEvent;
+    if (!navigator.onLine) {
+        console.log("We are offline! Serving request from the cache.");
+        event.respondWith(caches.match(event.request).then((response) => {
+            if (response !== undefined) {
+                return response;
+            }
+            const headers = new Headers();
+            headers.append("Content-Type", "text/html");
+            return new Response("<h1>You are offline! LoooooLL!!11 4HEad</h1>", {
+                status: 200,
+                headers: headers
+            });
+        }));
+    } else {
+        console.log("We are online! Forwarding the request.");
+        event.respondWith((async () => {
+            const response = await fetch(event.request);
+            const cache = await caches.open("v1");
+            cache.put(event.request, response.clone());
+            return response;
+        })());
+    }
+});
+
diff --git a/tsconfig.json b/tsconfig.json
@@ -6,7 +6,7 @@
     // "incremental": true,                         /* Enable incremental compilation */
     "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
     "module": "none",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    "lib": ["es2019", "dom"],                                   /* Specify library files to be included in the compilation. */
+    "lib": ["es2019", "dom", "webworker"],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
     // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */