added PWA files

.guides/content/Progressive-Web-App-Template-1ec2.md

@@ -5,7 +5,7 @@ It only runs on Codio boxes.
 To install, run the following command from inside the Codio box:
 
 ```
-$ curl -sL https://bit.ly/XXXXXXX | sudo -E bash -
+$ curl -sL https://bit.ly/3kZ56Kd | sudo -E bash -
 ```
 
 > Note this will delete ALL the existing content from your Codio Box.

README.md

@@ -8,7 +8,7 @@ It only runs on Codio boxes.
 To install, run the following command from inside the Codio box:
 
 ```
-$ curl -sL https://bit.ly/XXXXXXX | sudo -E bash -
+$ curl -sL https://bit.ly/3kZ56Kd | sudo -E bash -
 ```
 
 > Note this will delete ALL the existing content from your Codio Box.

index.html

@@ -8,6 +8,18 @@
 	<meta name="description" content="Simple SPA">
 	<meta name="author" content="Mark J Tyers">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="manifest" href="manifest.json">
+	<meta name="theme-color" content="white"/>
+	<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
+	<link rel="apple-touch-icon" href="images/icon-1024.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="images/icon-152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="images/icon-180.png">
+	<link rel="apple-touch-icon" sizes="167x167" href="images/icon-167.png">
+	<meta name="description" content="Nursing collaborative simulation game for Coventry University.">
+	<meta name="apple-mobile-web-app-capable" content="yes">  
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Hello World"> 
+  <meta name="msapplication-TileImage" content="images/hello-icon-144.png">
 	<link rel="stylesheet" href="css/style.css">
 	<script type="module" src="js/script.js"></script>
 </head>

manifest.json

@@ -0,0 +1,18 @@
+
+{
+	"name": "PWA",
+	"short_name": "Simple PWA",
+	"lang": "en-GB",
+	"start_url": "index.html",
+	"display": "standalone",
+	"background_color": "#005EB8",
+	"theme_color": "#005EB8",
+	"icons": [
+		{
+			"src": "icons/maskable_icon.png",
+			"type": "image/png",
+			"purpose": "any maskable",
+			"sizes": "72x72 96x96 120x120 128x128 144x144 152x152 180x180 192x192 256x256 384x384 512x512 1024x1024"
+		}
+	]
+}

sw.js

@@ -0,0 +1,35 @@
+
+const cacheName = 'hello-pwa'
+const filesToCache = ['index.html']
+
+/* Start the service worker and cache all of the app's content */
+self.addEventListener('install', event => {
+	console.log('service worker installing')
+	event.waitUntil(
+		caches.open(cacheName).then( cache => cache.addAll(filesToCache))
+	)
+})
+
+/* Serve cached content when offline */
+self.addEventListener('fetch', event => {
+	event.respondWith(
+		caches.match(event.request).then( response => response || fetch(event.request))
+	)
+})
+
+self.addEventListener('activate', function(event) {
+
+  var cacheAllowlist = ['pages-cache-v1', 'blog-posts-cache-v1'];
+
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (cacheAllowlist.indexOf(cacheName) === -1) {
+            return caches.delete(cacheName)
+          }
+        })
+      )
+    })
+  )
+})