Add icons. Begin PWA work.

Author: rianoc

_includes/head.html

@@ -8,9 +8,18 @@
     <link href="/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} posts" />
 
     <!-- Custom CSS -->
-    <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
-
-    <!-- Google Analytics -->
+    <link rel="stylesheet" href="{{ "{{ site.baseurl }}/css/main.css" | prepend: site.baseurl }}">
+   
+    <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/icons/favicon.ico" >
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/assets/icons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/assets/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/icons/favicon-16x16.png">
+    <link rel="manifest" href="{{ site.baseurl }}/assets/icons/site.webmanifest">
+    <link rel="mask-icon" href="{{ site.baseurl }}/assets/icons/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#2b5797">
+    <meta name="theme-color" content="#ffffff">
+    
+<!-- Google Analytics -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -20,4 +29,17 @@
       ga('send', 'pageview');
     </script>
 
+    <script>
+    function registerServiceWorker() {
+      // register sw script in supporting browsers
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('{{ site.baseurl }}/sw.js', { scope: '{{ site.baseurl }}/' }).then(() => {
+          console.log('Service Worker registered successfully.');
+        }).catch(error => {
+          console.log('Service Worker registration failed:', error);
+         });
+      }
+    }
+    </script>
+
 </head>

_includes/header.html

@@ -4,7 +4,7 @@
 
     <div style="float:left; margin-top:10px; margin-right:10px;">
     <a href="{{ "/feed.xml" | prepend: site.baseurl }}">
-      <img src="/assets/rssicon.svg" width="40">
+      <img src="{{ site.baseurl }}/assets/rssicon.svg" width="40">
     </a>
     </div>
 

assets/icons/android-chrome-192x192.png

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

assets/icons/android-chrome-384x384.png

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

assets/icons/apple-touch-icon.png

@@ -0,0 +1,23 @@
+{
+  "lang": "en",
+  "dir": "ltr",
+  "name": "Rian Ó Cuinneagáin",
+  "short_name": "rianoc",
+  "icons": [
+    {
+      "src": "\/assets\/icons\/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image\/png"
+    },
+    {
+      "src": "\/assets\/icons\/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image\/png"
+    }
+  ],
+  "theme_color": "#1a1a1a",
+  "background_color": "#1a1a1a",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "orientation": "natural"
+}

assets/icons/browserconfig.xml

@@ -0,0 +1,15 @@
+// sw.js
+self.addEventListener('install', e => {
+ e.waitUntil(
+   // after the service worker is installed,
+   // open a new cache
+   caches.open('my-pwa-cache').then(cache => {
+     // add all URLs of resources we want to cache
+     return cache.addAll([
+       '/',
+       '/index.html',
+       '/about.html'
+     ]);
+   })
+ );
+});