pwatest

bit-turtle · Nov 1, 2024 · 9078ba3 · 9078ba3
1 parent 86b6b9d
commit 9078ba3
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -51,6 +51,7 @@ <h2>Try these games and other things</h2>
         <b>Other Things</b>
         <br>
         <ul>
+          <li>[New!] <a href="pwatest.html">PWA Test</a></li>
           <li>[New!] <a href="maze.html">Maze Generator</a></li>
           <li><a href="windowbounce.html">Bouncing Window</a></li>
           <li><a href="bounce.html">Ball Bouncing Simulator</a></li>

diff --git a/pwatest.html b/pwatest.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<!-- Responsive -->
+<meta charset="utf-8">
+<meta name="viewport"
+		content="width=device-width,
+				initial-scale=1">
+<meta http-equiv="X-UA-Compatible"
+		content="ie=edge">
+
+<!-- Title -->
+<title>PWA Tutorial</title>
+
+<!-- Meta Tags required for
+	Progressive Web App -->
+<meta name=
+"apple-mobile-web-app-status-bar"
+		content="#aa7700">
+<meta name="theme-color"
+		content="black">
+
+<!-- Manifest File link -->
+<link rel="manifest"
+		href="pwatest.manifest.json">
+</head>
+
+<body>
+<h1>PWA Test</h1>
+
+
+<p>
+	Progressive Web Apps can be installed as an app. This page is one.
+</p>
+
+
+<script>
+	window.addEventListener('load', () => {
+      registerSW();
+    });
+
+    // Register the Service Worker
+    async function registerSW() {
+      if ('serviceWorker' in navigator) {
+        try {
+          await navigator
+                .serviceWorker
+                .register('pwatest.service.js');
+        }
+        catch (e) {
+          window.alert('Failed To Register Service Worker: ' + e);
+        }
+      }
+      else {
+        window.alert("Service Workers Not Supported In Browser");
+      }
+    }
+</script>
+</body>
+</html>
diff --git a/pwatest.manifest.json b/pwatest.manifest.json
@@ -0,0 +1,17 @@
+{
+	"name":"PWA Test",
+	"short_name":"PWA",
+	"start_url":"pwatest.html",
+	"display":"standalone",
+	"background_color":"#5900b3",
+	"theme_color":"black",
+	"scope": ".",
+	"description":"Tests out PWAs.",
+	"icons":[
+	{
+	"src":"turtle.png",					 
+	"sizes":"250x250",
+	"type":"image/png"
+	}
+]
+}
diff --git a/pwatest.service.js b/pwatest.service.js
@@ -0,0 +1,19 @@
+var staticCacheName = "pwa";
+
+self.addEventListener("install", function (e) {
+e.waitUntil(
+	caches.open(staticCacheName).then(function (cache) {
+	return cache.addAll(["/", "/pwatest.html"]);
+	})
+);
+});
+
+self.addEventListener("fetch", function (event) {
+console.log(event.request.url);
+
+event.respondWith(
+	caches.match(event.request).then(function (response) {
+	return response || fetch(event.request);
+	})
+);
+});
diff --git a/turtle.png b/turtle.png