version 1.3

README.md

@@ -1,5 +1,7 @@
 # whenisthenextspacexlaunch.com
 
+Development Repo and Documentation for <a href="https://whenisthenextspacexlaunch.com" target="_blank" alt="spacex launch">When is the next SpaceX launch</a>
+
 ## Development
 
 #### Code
@@ -27,6 +29,12 @@ https://htmlhead.dev/
 Sitemaps - https://ahrefs.com/blog/how-to-create-a-sitemap/
 robots.txt - https://moz.com/learn/seo/robotstxt
 noscript - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
+Favicon Generator - https://realfavicongenerator.net/
+Browser Configuration Schema - https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)
+Apple Web Applications - https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
+Google Browser Configuration - https://developers.google.com/web/fundamentals/design-and-ux/browser-customization
+PWA Setup - https://codelabs.developers.google.com/codelabs/your-first-pwapp/#5
+https://medium.com/dev-channel/learn-how-to-build-a-pwa-in-under-5-minutes-c860ad406ed
 
 Optimisation Tools
 TinyPNG.com - 
@@ -37,19 +45,23 @@ TinyPNG.com -
 * Domain Register: Namecheap
 * Analytics: Google Analytics - https://analytics.google.com/analytics
 
-Optimisation Testing
-* Search: Google Search Console, URL Inspection, Index Report - https://search.google.com/search-console
-* Google URL Inspection Tool - https://support.google.com/webmasters
-* Google Page Speed Insights - https://developers.google.com/speed
-* Google Lighthouse (Web page quality tester)- https://developers.google.com/web/tools/lighthouse/
-* Mobile Friendly Test - https://search.google.com/test/mobile-friendly
-* Web Page Test - https://www.webpagetest.org/
-* Pingdom Website Speed Test - https://tools.pingdom.com/
+* Optimisation Testing
+  * Search: Google Search Console, URL Inspection, Index Report - https://search.google.com/search-console
+  * Google URL Inspection Tool - https://support.google.com/webmasters
+  * Google Page Speed Insights - https://developers.google.com/speed
+  * Google Lighthouse (Web page quality tester)- https://developers.google.com/web/tools/lighthouse/
+  * Mobile Friendly Test - https://search.google.com/test/mobile-friendly
+  * Web Page Test - https://www.webpagetest.org/
+  * Pingdom Website Speed Test - https://tools.pingdom.com/
+  * SS Labs
+  * Site checker
 
-Promotion
-* SpaceX Data App List - 
-* Reddit /r/spacex - 
-*
+* Promotion
+  * SpaceX Data App List - 
+  * Reddit /r/spacexlounge - 
+  * Reddit /r/webdev - 
+  * Youtube, Instagram and Facebook Comments
+  * Whirlpool Thread - https://forums.whirlpool.net.au/thread/97m0xpm9
 
 ## Deploy
 
@@ -71,20 +83,9 @@ npm run deploy
 ## Releases
 
 * Planned Featues
-  * Graph API for spacexapi
-  * Local store use 
+  * Local storage
   * Only poll api if updates or per period
-  * Items pulled from data.json
-  * Style from style.css
-  * Single Page from index.html
-  * JavaScript to fetch and push items into DOM in app.js 
-  * PWA Compatibility
-  * Social header tag
-  * Additional Header tags
-  * Icons
-  * apple touch icons
-  * favicon
-  * no js
+  * PWA Compatibility and Configuration
 
 * Testing
   * Lighthouse
@@ -95,6 +96,17 @@ npm run deploy
   * Switch to using GraphQL API 
   * Switch to a framework Vue or React
 
+#### Version 1.3
+
+* Features
+  * Favicons
+    * Chrome
+    * Apple
+    * Windows Pinned Site (Browser Configuration)
+    * Favicon
+  * Facebook Metadata
+  * Start of PWA Configuration
+
 #### Version 1.2
 
 * Features

dist/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/mstile-70x70.png?v=eEvNOAdjm7"/>
+            <square150x150logo src="/mstile-150x150.png?v=eEvNOAdjm7"/>
+            <square310x310logo src="/mstile-310x310.png?v=eEvNOAdjm7"/>
+            <wide310x150logo src="/mstile-310x150.png?v=eEvNOAdjm7"/>
+            <TileColor>#000000</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

dist/index.html

@@ -16,28 +16,44 @@
 
         gtag('config', 'UA-123153435-3');
     </script>
-    <title>when is the next spacex launch</title>
-    <meta name="description" content="Latest details on the upcoming SpaceX rocket launch to space!">
+    <title>When is the next SpaceX launch</title>
+    <meta name="description"
+        content="View the latest details and launch time for the upcoming SpaceX rocket launch to space!">
     <meta name="keywords"
-        content="SpaceX, Launch, Rocket, Falcon 9, Starship, BFR, Falcom Heavy, SuperHeavy, Dragon, Dragon Crew, IIS, Nasa, LEO, Moon, Mars,">
+        content="SpaceX, Launch, spacex launch, Rocket, Falcon 9, Starship, BFR, Falcom Heavy, SuperHeavy, Dragon, Dragon Crew, IIS, Nasa, LEO, Moon, Mars,">
     <meta name="author" content="Award Digital - Warwick Ward">
-    <meta property="og:image" content="https://whenisthenextspacexlaunch.com/img/awarddigital-logo_black.png">
+    <meta property="og:image" content="https://whenisthenextspacexlaunch.com/facebook-share.png">
+    <meta property="og:url" content="https://whenisthenextspacexlaunch.com">
     <meta property="og:description" content="If you want to know when is the next SpaceX launch of a rocket into space this is the site.
     Next launch detailed along with the target dates for all upcoming launches">
     <meta property="og:title" content="When is the next SpaceX Launch">
+    <meta property="og:type" content="website">
     <meta name="twitter:title" content="When is the next SpaceX Launch">
     <meta name="robots" content="index,follow">
     <meta name="googlebot" content="index,follow">
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png?v=eEvNOAdjm7">
+    <link rel="apple-touch-startup-image" href="icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png?v=eEvNOAdjm7">
+    <link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png?v=eEvNOAdjm7">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png?v=eEvNOAdjm7">
+    <link rel="manifest" href="manifest.json?v=eEvNOAdjm7">
+    <link rel="mask-icon" href="safari-pinned-tab.svg?v=eEvNOAdjm7" color="#5bbad5">
+    <link rel="shortcut icon" href="favicon.ico?v=eEvNOAdjm7">
+    <meta name="apple-mobile-web-app-title" content="X Launch">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="when is the next spacex launch">
+    <meta name="msapplication-TileColor" content="#000000">
+    <meta name="msapplication-TileImage" content="mstile-144x144.png?v=eEvNOAdjm7">
+    <meta name="msapplication-config" content="browserconfig.xml" />
+    <meta name="theme-color" content="#000000">
     <link rel="stylesheet" href="style.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
-    <noscript>
-        <!-- No JS alternative -->
-    </noscript>
 </head>
 
 <body>
+
     <header>
-        <h1>when is the next spacex launch</h1>
+        <h1>When is the next SpaceX launch</h1>
     </header>
     <section class="showcase">
         <div class="image-container">
@@ -69,7 +85,6 @@ <h1>when is the next spacex launch</h1>
             <div class="launch-details"></div>
         </div>
         <div class="down-arrow"><i class="fas fa-chevron-down white"></i></div>
-
     </section>
 
     <section class="upcoming">
@@ -92,18 +107,38 @@ <h1>when is the next spacex launch</h1>
 
     <section class="about">
         <div class="links-left">
-
         </div>
         <div class="links-right">
             <a href="https://github.com/warwickofthegh/whenisthenextspacexlaunch.com" target="_blank"><img
                     id="logo-awarddigital" src="img/awarddigital-logo_black.png" alt="Award Digital"></a>
         </div>
-
     </section>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
     <script src="storage.js"></script>
     <script src="ui.js"></script>
     <script src="http.js"></script>
     <script src="app.js"></script>
+
+    <!-- PWA Setup with service worker -->
+    <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', function () {
+                navigator.serviceWorker.register('service-worker.js').then(function (registration) {
+                    // Registration was successful
+                    console.log('ServiceWorker registration successful with scope: ', registration
+                        .scope);
+                }, function (err) {
+                    // registration failed :(
+                    console.log('ServiceWorker registration failed: ', err);
+                }).catch(function (err) {
+                    console.log(err)
+                });
+            });
+        } else {
+            console.log('service worker is not supported');
+        }
+    </script>
 </body>
 
 </html>

dist/manifest.json

@@ -0,0 +1,19 @@
+  {
+      "name": "When is the next SpaceX launch",
+      "short_name": "X Launch",
+      "icons": [{
+              "src": "android-chrome-192x192.png?v=eEvNOAdjm7",
+              "sizes": "192x192",
+              "type": "image/png"
+          },
+          {
+              "src": "android-chrome-512x512.png?v=eEvNOAdjm7",
+              "sizes": "512x512",
+              "type": "image/png"
+          }
+      ],
+      "theme_color": "#000000",
+      "background_color": "#000000",
+      "start_url": "index.html",
+      "display": "standalone"
+  }

dist/service-worker.js

@@ -0,0 +1,65 @@
+// Set this to true for production
+var doCache = false;
+
+// Name our cache
+var CACHE_NAME = 'whenisthenextspacexlaunch';
+
+// Delete old caches that are not our current one!
+self.addEventListener("activate", event => {
+    const cacheWhitelist = [CACHE_NAME];
+    event.waitUntil(
+        caches.keys()
+        .then(keyList =>
+            Promise.all(keyList.map(key => {
+                if (!cacheWhitelist.includes(key)) {
+                    console.log('Deleting cache: ' + key)
+                    return caches.delete(key);
+                }
+            }))
+        )
+    );
+});
+
+// The first time the user starts up the PWA, 'install' is triggered.
+self.addEventListener('install', function (event) {
+    if (doCache) {
+        event.waitUntil(
+            caches.open(CACHE_NAME)
+            .then(function (cache) {
+                // Get the assets manifest so we can see what our js file is named
+                // This is because webpack hashes it
+                fetch("asset-manifest.json")
+                    .then(response => {
+                        response.json()
+                    })
+                    .then(assets => {
+                        // Open a cache and cache our files
+                        // We want to cache the page and the main.js generated by webpack
+                        // We could also cache any static assets like CSS or images
+                        const urlsToCache = [
+                            "/index.html",
+                            assets["app.js"],
+                            assets["ui.js"],
+                            assets["http.js"],
+                            assets["storage.js"],
+                            assets["style.css"]
+                        ]
+                        cache.addAll(urlsToCache)
+                        console.log('cached');
+                    })
+            })
+        );
+    }
+});
+
+// When the webpage goes to fetch files, we intercept that request and serve up the matching files
+// if we have them
+self.addEventListener('fetch', function (event) {
+    if (doCache) {
+        event.respondWith(
+            caches.match(event.request).then(function (response) {
+                return response || fetch(event.request);
+            })
+        );
+    }
+});