feat: polished service workers and offline page

rayhanadev · Jun 12, 2021 · 1147db9 · 1147db9
1 parent 75909da
commit 1147db9
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 165 deletions.
diff --git a/index.html b/index.html
diff --git a/offline/index.html b/offline/index.html
diff --git a/service-worker.js b/service-worker.js
@@ -1,6 +1,6 @@
 const cacheName = 'tether_cache-v2';
 const precacheResources = [
-	'/',
+	'/offline/',
 	'/fonts/Quantico400.woff2',
 	'/fonts/Quantico700.woff2',
 	'/fonts/Tulpen-One400.woff2',

diff --git a/source/game.js b/source/game.js
@@ -34,9 +34,9 @@ var DEBUG = window.location.hash === '#DEBUG',
 if(window.location.pathname === '/source/') subtitleText = 'Source Development Mode. #OpenSource';
 else subtitleText = 'Swing around a ball and cause pure destruction.';
 
-setInterval(function() {
-	if(!navigator.onLine) subtitleText = 'Offline Mode.';
-}, 60000);
+window.addEventListener('offline', () => {
+	window.location.href = '/offline/';
+});
 
 cookieExpiryDate.setFullYear(cookieExpiryDate.getFullYear() + 50);
 var cookieSuffix = '; expires=' + cookieExpiryDate.toUTCString();

diff --git a/source/index.html b/source/index.html
@@ -1,161 +1,187 @@
 <!DOCTYPE html>
 <html lang="en-US">
-    <meta charset="utf-8" />
-    <meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" name="viewport" />
-    <meta content="zFyWibfayZE1X43vy881NOKyizS07fj7S-cM2M1SmlY" name="google-site-verification" />
-		<meta content="noimageindex" name="robots" />
-
-		<link href="../sitemap.xml" rel="sitemap" type="application/xml" title="Sitemap" />
-
-    <title>tether!</title>
-
-    <meta content="tether!" name="title" />
-    <meta content="A game about swinging a ball around and sheer destruction." name="description" />
-    <meta content="game, fun, mobile, ball, videogame, online-game" name="keywords" />
-    <meta content="index, follow" name="robots" />
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
-    <meta content="English" name="language" />
-    <meta content="Tyler, Sophie, Ray" name="author" />
-
-    <meta content="website" property="og:type" />
-    <meta content="tether!" property="og:title" />
-    <meta content="tether!" property="og:site_name" />
-    <meta content="https://tether.rayhanadev.repl.co/" property="og:url" />
-    <meta content="https://tether.rayhanadev.repl.co/public/opengraphimage.png" property="og:image" />
-    <meta content="A game about swinging a ball around and sheer destruction." property="og:description" />
-
-    <style>
-        @font-face {
-            font-family: Quantico;
-            font-style: normal;
-            font-weight: 400;
-            font-display: swap;
-            src: url(/fonts/Quantico400.woff2) format("woff2");
-            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-        @font-face {
-            font-family: Quantico;
-            font-style: normal;
-            font-weight: 700;
-            font-display: swap;
-            src: url(/fonts/Quantico700.woff2) format("woff2");
-            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-        @font-face {
-            font-family: "Tulpen One";
-            font-style: normal;
-            font-weight: 400;
-            font-display: swap;
-            src: url(/fonts/Tulpen-One400.woff2) format("woff2");
-            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            border: 0;
-        }
-        body {
-            background-color: #fff;
-            font-family: Quantico, sans-serif;
-            color: #000;
-            -webkit-user-select: none;
-            -khtml-user-select: none;
-            -moz-user-select: -moz-none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-        body.game {
-            overflow: hidden;
-            position: fixed;
-        }
-        h1 {
-            text-transform: lowercase;
-            padding-top: 20vh;
-            padding-bottom: 0.7em;
-            font-size: 6em;
-            text-align: center;
-            font-weight: 400;
-            font-family: "Tulpen One", sans-serif;
-        }
-        p {
-            font-size: 1.3em;
-            max-width: 20em;
-            margin: 0 auto;
-            padding: 0 1em 0.5em;
-        }
-        p:last-child {
-            padding-bottom: 10vh;
-        }
-        a {
-            color: #d66;
-            text-decoration: none;
-        }
-        a:hover {
-            color: #444;
-        }
-        canvas {
-            cursor: crosshair;
-            background-color: #fff;
-            -webkit-user-select: none;
-            -khtml-user-select: none;
-            -moz-user-select: -moz-none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-        canvas.buttonhover {
-            cursor: pointer;
-        }
-        canvas.hidecursor {
-            cursor: none;
-        }
-    </style>
-    <link href="../libs/font-awesome.min.css" rel="stylesheet" type="text/css">
-
-    <meta content="yes" name="mobile-web-app-capable" />
-    <meta content="yes" name="apple-mobile-web-app-capable" />
-    <meta content="white" name="apple-mobile-web-app-status-bar-style" />
-    <meta content="tether!" name="apple-mobile-web-app-title" />
-
-		<link href="../splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
-		<link href="../splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
-		<link href="../splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
-		<link href="../splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
-		<link href="../splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
-		<link href="../splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
-		<link href="../splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
-		<link href="../splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
-		<link href="../splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
-		<link href="../splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
-
-		<link href="../icons/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" />
-		<link href="../icons/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" />
-    <link href="../icons/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
-    <link href="../icons/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
-    <link href="../icons/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
-    <link href="../icons/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
-    <link href="../icons/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
-    <link href="../icons/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
-    <link href="../icons/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
-    <link href="../icons/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" />
-    <link href="../icons/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
-    <link href="../icons/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" />
-    <link href="../icons/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
-
-    <meta content="#ffffff" name="msapplication-TileColor" />
-    <meta content="../icons/ms-icon-144x144.png" name="msapplication-TileImage" />
-    <meta content="#ffffff" name="theme-color" />
-
-    <link href="../manifest.json" rel="manifest" />
-
-    <script src="https://www.googletagmanager.com/gtag/js?id=G-1XP62Z5B18" async></script>
-    <script>
-        function gtag() {
+
+<head>
+	<meta charset="utf-8" />
+	<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" name="viewport" />
+	<meta content="zFyWibfayZE1X43vy881NOKyizS07fj7S-cM2M1SmlY" name="google-site-verification" />
+	<meta content="noimageindex" name="robots" />
+
+	<link href="../sitemap.xml" rel="sitemap" type="application/xml" title="Sitemap" />
+
+	<title>tether!</title>
+
+	<meta content="tether!" name="title" />
+	<meta content="A game about swinging a ball around and sheer destruction." name="description" />
+	<meta content="game, fun, mobile, ball, videogame, online-game" name="keywords" />
+	<meta content="index, follow" name="robots" />
+	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+	<meta content="English" name="language" />
+	<meta content="Tyler, Sophie, Ray" name="author" />
+
+	<meta content="website" property="og:type" />
+	<meta content="tether!" property="og:title" />
+	<meta content="tether!" property="og:site_name" />
+	<meta content="https://tether.rayhanadev.repl.co/" property="og:url" />
+	<meta content="https://tether.rayhanadev.repl.co/public/opengraphimage.png" property="og:image" />
+	<meta content="A game about swinging a ball around and sheer destruction." property="og:description" />
+
+	<style>
+		@font-face {
+			font-family: Quantico;
+			font-style: normal;
+			font-weight: 400;
+			font-display: swap;
+			src: url(/fonts/Quantico400.woff2) format("woff2");
+			unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+		}
+
+		@font-face {
+			font-family: Quantico;
+			font-style: normal;
+			font-weight: 700;
+			font-display: swap;
+			src: url(/fonts/Quantico700.woff2) format("woff2");
+			unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+		}
+
+		@font-face {
+			font-family: "Tulpen One";
+			font-style: normal;
+			font-weight: 400;
+			font-display: swap;
+			src: url(/fonts/Tulpen-One400.woff2) format("woff2");
+			unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+		}
+
+		* {
+			margin: 0;
+			padding: 0;
+			border: 0;
+		}
+
+		body {
+			background-color: #fff;
+			font-family: Quantico, sans-serif;
+			color: #000;
+			-webkit-user-select: none;
+			-khtml-user-select: none;
+			-moz-user-select: -moz-none;
+			-ms-user-select: none;
+			user-select: none;
+		}
+
+		body.game {
+			overflow: hidden;
+			position: fixed;
+		}
+
+		h1 {
+			text-transform: lowercase;
+			padding-top: 20vh;
+			padding-bottom: 0.7em;
+			font-size: 6em;
+			text-align: center;
+			font-weight: 400;
+			font-family: "Tulpen One", sans-serif;
+		}
+
+		p {
+			font-size: 1.3em;
+			max-width: 20em;
+			margin: 0 auto;
+			padding: 0 1em 0.5em;
+		}
+
+		p:last-child {
+			padding-bottom: 10vh;
+		}
+
+		a {
+			color: #d66;
+			text-decoration: none;
+		}
+
+		a:hover {
+			color: #444;
+		}
+
+		canvas {
+			cursor: crosshair;
+			background-color: #fff;
+			-webkit-user-select: none;
+			-khtml-user-select: none;
+			-moz-user-select: -moz-none;
+			-ms-user-select: none;
+			user-select: none;
+		}
+
+		canvas.buttonhover {
+			cursor: pointer;
+		}
+
+		canvas.hidecursor {
+			cursor: none;
+		}
+	</style>
+	<link href="../libs/font-awesome.min.css" rel="stylesheet" type="text/css">
+
+	<meta content="yes" name="mobile-web-app-capable" />
+	<meta content="yes" name="apple-mobile-web-app-capable" />
+	<meta content="white" name="apple-mobile-web-app-status-bar-style" />
+	<meta content="tether!" name="apple-mobile-web-app-title" />
+
+	<link href="../splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
+	 rel="apple-touch-startup-image" />
+	<link href="../splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
+	 rel="apple-touch-startup-image" />
+	<link href="../splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
+	 rel="apple-touch-startup-image" />
+	<link href="../splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
+	 rel="apple-touch-startup-image" />
+	<link href="../splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
+	 rel="apple-touch-startup-image" />
+	<link href="../splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
+	 rel="apple-touch-startup-image" />
+	<link href="../splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
+	 rel="apple-touch-startup-image" />
+	<link href="../splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
+	 rel="apple-touch-startup-image" />
+	<link href="../splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
+	 rel="apple-touch-startup-image" />
+	<link href="../splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
+	 rel="apple-touch-startup-image" />
+
+	<link href="../icons/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" />
+	<link href="../icons/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" />
+	<link href="../icons/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
+	<link href="../icons/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
+	<link href="../icons/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
+	<link href="../icons/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
+	<link href="../icons/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
+	<link href="../icons/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
+	<link href="../icons/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
+	<link href="../icons/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" />
+	<link href="../icons/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
+	<link href="../icons/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" />
+	<link href="../icons/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
+
+	<meta content="#ffffff" name="msapplication-TileColor" />
+	<meta content="../icons/ms-icon-144x144.png" name="msapplication-TileImage" />
+	<meta content="#ffffff" name="theme-color" />
+
+	<link href="../manifest.json" rel="manifest" />
+
+	<script src="https://www.googletagmanager.com/gtag/js?id=G-1XP62Z5B18" async>
+	</script>
+	<script>
+		function gtag() {
             dataLayer.push(arguments);
         }
         (window.dataLayer = window.dataLayer || []), gtag("js", new Date()), gtag("config", "G-1XP62Z5B18");
-    </script>
-    <script>
-        !(function () {
+	</script>
+	<script>
+		!(function () {
             var n = console;
             Object.defineProperty(window, "console", {
                 get: function () {
@@ -167,9 +193,14 @@
                 },
             });
         })();
-    </script>
-    <body>
-        <noscript>Hey there, this game needs Javascript. Turn it on to experience the excitement!</noscript><canvas id="game"></canvas>
-        <script src="game.js"></script>
-    </body>
-</html>
+	</script>
+
+	<head>
+
+		<body>
+			<noscript>Hey there, this game needs Javascript. Turn it on to experience the excitement!</noscript><canvas id="game"></canvas>
+			<script src="game.js">
+			</script>
+		</body>
+
+</html>