diff options
-rw-r--r-- | index.html | 63 | ||||
-rw-r--r-- | main.js | 8 | ||||
-rw-r--r-- | manifest.webmanifest | 27 | ||||
-rw-r--r-- | style.css | 13 | ||||
-rw-r--r-- | sw1.js | 29 | ||||
-rw-r--r-- | sw2.js | 40 |
6 files changed, 180 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..5478aa0 --- /dev/null +++ b/index.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>AppName</title> + <meta charset="UTF-8"> + + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"> + + <link rel="icon" type="image/x-icon" href="img/favicon.ico"> + <link rel="apple-touch-icon" href="img/apple-touch-icon-57.png" sizes="57x57" > + <link rel="apple-touch-icon" href="img/apple-touch-icon-60.png" sizes="60x60" > + <link rel="apple-touch-icon" href="img/apple-touch-icon-72.png" sizes="72x72" > + <link rel="apple-touch-icon" href="img/apple-touch-icon-76.png" sizes="76x76" > + <link rel="apple-touch-icon" href="img/apple-touch-icon-114.png" sizes="114x114" > + <link rel="apple-touch-icon" href="img/apple-touch-icon-120.png" sizes="120x120" > + <link rel="apple-touch-icon" href="img/apple-touch-icon-144.png" sizes="144x144" > + <link rel="apple-touch-icon" href="img/apple-touch-icon-152.png" sizes="152x152" > + <link rel="apple-touch-icon" href="img/apple-touch-icon-168.png" sizes="168x168" > + <link rel="apple-touch-icon" href="img/apple-touch-icon-180.png" sizes="180x180" > + <link rel="apple-touch-startup-image" href="img/apple-splash-2048.png" sizes="2048x2732"> + <link rel="apple-touch-startup-image" href="img/apple-splash-1668.png" sizes="1668x2224"> + <link rel="apple-touch-startup-image" href="img/apple-splash-1536.png" sizes="1536x2048"> + <link rel="apple-touch-startup-image" href="img/apple-splash-1125.png" sizes="1125x2436"> + <link rel="apple-touch-startup-image" href="img/apple-splash-1242.png" sizes="1242x2208"> + <link rel="apple-touch-startup-image" href="img/apple-splash-750.png" sizes="750x1334" > + <link rel="apple-touch-startup-image" href="img/apple-splash-640.png" sizes="640x1136" > + <link rel="icon" type="image/png" href="img/favicon-32.png" sizes="32x32" > + <link rel="icon" type="image/png" href="img/favicon-192.png" sizes="192x192" ><!-- Maskable: --> + <link rel="icon" type="image/png" href="img/favicon-256.png" sizes="256x256" ><!-- Safe area is circle --> + <link rel="icon" type="image/png" href="img/favicon-512.png" sizes="512x512" ><!-- with 40% radius --> + <link rel="icon" type="image/png" href="img/favicon-96.png" sizes="96x96" > + <link rel="icon" type="image/png" href="img/favicon-48.png" sizes="48x48" > + <link rel="icon" type="image/png" href="img/favicon-16.png" sizes="16x16" > + <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"> + <link rel="manifest" href="manifest.webmanifest"> + + <meta name="mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="AppName"> + <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> + <meta name="application-name" content="AppName"> + <meta name="msapplication-TileColor" content="#000000"> + <meta name="msapplication-TileImage" content="img/mstile-144.png"> + <meta name="msapplication-navbutton-color" content="#000000"> + <meta name="msapplication-tooltip" content="AppName"> + <meta name="msapplication-starturl" content="./"> + <meta name="msapplication-tap-highlight" content="no"> + <meta name="theme-color" content="#000000"> + <meta name="screen-orientation" content="portrait"> + + <link rel="canonical" href="https://example.com/"> + <meta name="author" content=""> + <meta name="description" content=""> + + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400&display=swap"> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <h1>AppName</h1> + <script src="main.js"></script> + </body> +</html> @@ -0,0 +1,8 @@ +document.addEventListener("DOMContentLoaded", async () => { + const $ = s => document.querySelector(s); + + if ("serviceWorker" in navigator) { + navigator.serviceWorker.register("sw.js") + .then(() => console.log("Service worker registered")); + } +}); diff --git a/manifest.webmanifest b/manifest.webmanifest new file mode 100644 index 0000000..1c10ce5 --- /dev/null +++ b/manifest.webmanifest @@ -0,0 +1,27 @@ +{ + "name": "AppName", + "short_name": "AppName", + "description": "", + "categories": [""], + "lang": "en-US", + "start_url": "/", + "scope": "/", + "display": "standalone", + "orientation": "portrait", + "theme_color": "#000000", + "background_color": "#000000", + "icons": [ + {"type": "image/png", "sizes": "48x48", "src": "img/favicon-48.png" }, + {"type": "image/png", "sizes": "96x96", "src": "img/favicon-96.png" }, + {"type": "image/png", "sizes": "192x192", "src": "img/favicon-192.png", "purpose": "maskable any"}, + {"type": "image/png", "sizes": "256x256", "src": "img/favicon-256.png", "purpose": "maskable any"}, + {"type": "image/png", "sizes": "512x512", "src": "img/favicon-512.png", "purpose": "maskable any"}, + + {"type": "image/png", "sizes": "72x72", "src": "img/apple-touch-icon-72.png" }, + {"type": "image/png", "sizes": "144x144", "src": "img/apple-touch-icon-144.png"}, + {"type": "image/png", "sizes": "168x168", "src": "img/apple-touch-icon-168.png"} + ], + "shortcuts": [ + {"name": "New", "url": "/new"} + ] +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..f47d478 --- /dev/null +++ b/style.css @@ -0,0 +1,13 @@ +* { + margin: 0; padding: 0; + box-sizing: border-box; + font-family: Roboto, sans-serif; + transition-timing-function: ease-in-out; +} + +body { + user-select: none; + -webkit-user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: transparent; +} @@ -0,0 +1,29 @@ +// https://gist.github.com/adactio/3717b7da007a9363ddf21f584aae34af + +// HTML files: try the network first, then the cache. +// Other files: try the cache first, then the network. +// Both: cache a fresh version if possible. +// (beware: the cache will grow and grow; there's no cleanup) + +const cacheName = "appname-files"; + +addEventListener("fetch", fetchEvent => { + const request = fetchEvent.request; + if (request.method !== "GET") return; + fetchEvent.respondWith(async () => { + const fetchPromise = fetch(request); + fetchEvent.waitUntil(async () => { + const responseFromFetch = await fetchPromise; + const responseCopy = responseFromFetch.clone(); + const myCache = await caches.open(cacheName); + return myCache.put(request, responseCopy); + }()); + if (request.headers.get("Accept").includes("text/html")) { + try { return await fetchPromise; } + catch(error) { return caches.match(request); } + } else { + const responseFromCache = await caches.match(request); + return responseFromCache || fetchPromise; + } + }()); +}); @@ -0,0 +1,40 @@ +// https://googlechrome.github.io/samples/service-worker/basic/ + +const PRECACHE = "appname-precache-v1"; +const RUNTIME = "appname-runtime"; + +const PRECACHE_URLS = [ + "./", // Alias for index.html + "index.html", + "style.css", + "main.js" +]; + +self.addEventListener("install", e => e.waitUntil( + caches.open(PRECACHE) + .then(cache => cache.addAll(PRECACHE_URLS)) + .then(self.skipWaiting()))); + +self.addEventListener("activate", e => { + const currentCaches = [PRECACHE, RUNTIME]; + e.waitUntil( // Clean up old caches + caches.keys().then(cacheNames => + cacheNames.filter(cacheName => !currentCaches.includes(cacheName)) + ).then(cachesToDelete => Promise.all(cachesToDelete.map(cacheToDelete => + caches.delete(cacheToDelete))) + ).then(() => self.clients.claim()) + ); +}); + +self.addEventListener("fetch", e => { + if (e.request.url.startsWith(self.location.origin)) { + e.respondWith(caches.match(e.request).then(cachedResponse => + cachedResponse? cachedResponse + : caches.open(RUNTIME).then(cache => + fetch(e.request).then(res => + cache.put(e.request, res.clone()).then(() => res) + ) + ) + )); + } +}); |