Added support to install as a PWM

As a side-effect, added offline mode support (after one page reload)
Progressive Web App: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

Author: Sp3EdeR

res/banner.jpg app/banner.jpg

@@ -0,0 +1,44 @@
+{
+    "name": "huroutes",
+    "short_name": "huroutes",
+    "lang": "hu",
+    "description": "Magyar utak vezetésre",
+    "display": "standalone",
+    "icons": [
+        {
+            "src": "../res/favicon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "../res/favicon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "../app/maskableicon-180.png",
+            "sizes": "180x180",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "../app/maskableicon-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "../app/maskableicon-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ],
+    "start_url": "../",
+    "scope": "../",
+    "theme_color": "#0000bb",
+    "background_color": "#13192e",
+    "categories": [
+        "navigation", "travel"
+    ]
+  }

app/manifest.json

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

app/maskableicon-180.png

@@ -10,24 +10,33 @@
   <!-- Disable resizing the viewport for mobile -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+  <title>huroutes | Magyar utak vezetésre</title>
+
+  <!-- Web app icons and themes -->
+  <link rel="icon" type="image/png" sizes="32x32" href="res/favicon-32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="res/favicon-16.png">
+  <link rel="shortcut icon" href="res/favicon.ico">
+  <link rel="manifest" href="app/manifest.json">
+  <link rel="mask-icon" href="app/safari-pinned-tab.svg" color="#bae1c7">
+  <link rel="apple-touch-icon" sizes="180x180" href="app/maskableicon-180.png">
+  <meta name="application-name" content="huroutes">
+  <meta name="apple-mobile-web-app-title" content="huroutes">
+  <meta name="msapplication-TileColor" content="#2b5797">
+  <meta name="msapplication-config" content="app/mstile.xml">
+  <meta name="theme-color" content="#0000bb">
+
   <!-- Shared link preview card resources -->
   <meta property="og:title" content="huroutes" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://sp3eder.github.io/huroutes/" />
   <meta property="og:description" content="Magyar utak vezetésre" />
-  <meta property="og:image" content="https://sp3eder.github.io/huroutes/res/banner.jpg" />
-  <meta property="og:image:secure_url" content="https://sp3eder.github.io/huroutes/res/banner.jpg" />
+  <meta property="og:image" content="https://sp3eder.github.io/huroutes/app/banner.jpg" />
+  <meta property="og:image:secure_url" content="https://sp3eder.github.io/huroutes/app/banner.jpg" />
   <meta property="og:image:alt" content="huroutes" />
   <meta property="og:image:type" content="image/jpeg" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
 
-  <title>huroutes | Magyar utak vezetésre</title>
-  
-  <link rel="icon" href="res/favicon.ico" />
-  <link rel="icon" href="res/favicon.png" sizes="32x32" type="image/png" />
-  <link rel="icon" href="res/favicon-sm.png" sizes="16x16" type="image/png" />
-
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-7RW997RX2F"></script>
   <script>
@@ -37,6 +46,11 @@
     gtag('config', 'G-7RW997RX2F');
   </script>
 
+  <script>
+    if ('serviceWorker' in navigator)
+        navigator.serviceWorker.register('sw.js');
+  </script>
+
   <!-- 3rd party library CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha256-+IZRbz1B6ee9mUx/ejmonK+ulIP5A5bLDd6v6NHqXnI=" crossorigin="anonymous" referrerpolicy="no-referrer">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@forevolve/bootstrap-dark@4.0.0/dist/css/toggle-bootstrap.min.css" integrity="sha256-FrYhUW1FIy6GrbYaAdOOeWzysJaYHvXRTvC5JkpI2Io=" crossorigin="anonymous" referrerpolicy="no-referrer">
@@ -201,6 +215,35 @@ <h3>Beállítások</h3>
         <a href="https://github.com/Sp3EdeR/huroutes-android/releases" target="_blank">innen töltheted le</a>.
       </div>
     </div>
+    <!-- Progressive Web App ad toast -->
+    <div id="toast-pwa-app" role="alert" aria-live="assertive" aria-atomic="true" class="toast hide" data-autohide="false">
+      <div class="toast-header">
+        <strong class="mr-auto">Alkalmazásként Telepítés</strong>
+        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="toast-body">
+        <p>Telepíteni tudod ezt az alkalmazást rögtön a böngésződből az eszközödre.
+        Ha ki szeretnéd próbálni, <a href="#">kattints ide</a>.</p>
+        <p>Ha később szeretnéd kipróbálni, a böngésződ címsorában vagy menüjében találhatod
+        meg a telepítés vagy letöltés menüpontot legközelebb.</p>
+      </div>
+    </div>
+    <!-- Safari PWA ad toast -->
+    <div id="toast-safari-app" role="alert" aria-live="assertive" aria-atomic="true" class="toast hide" data-autohide="false">
+      <div class="toast-header">
+        <strong class="mr-auto">Alkalmazásként Telepítés</strong>
+        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="toast-body">
+        Telepíteni tudod ezt az alkalmazást rögtön a böngésződből az eszközödre.
+        Ha ki szeretnéd próbálni, kattints a megosztás <i class="fas fa-external-link-alt"></i>
+        ikonra, majd válaszd ki a "Hozzáadás a kezdőképernyőhöz" lehetőséget.
+      </div>
+    </div>
     <!-- App update toast -->
     <div id="toast-app-update" role="alert" aria-live="assertive" aria-atomic="true" class="toast hide" data-autohide="false">
       <div class="toast-header">

app/maskableicon-192.png

@@ -5,9 +5,10 @@
 
   <title>huroutes | Helyjelölő link készítése</title>
 
-  <link rel="icon" href="res/favicon.ico" />
-  <link rel="icon" href="res/favicon.png" sizes="32x32" type="image/png" />
-  <link rel="icon" href="res/favicon-sm.png" sizes="16x16" type="image/png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="res/favicon-32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="res/favicon-16.png">
+  <link rel="shortcut icon" href="res/favicon.ico">
+  <link rel="mask-icon" href="app/safari-pinned-tab.svg" color="#bae1c7">
 
   <script>
     webRoot = 'https://sp3eder.github.io/huroutes/';

app/maskableicon-512.png

@@ -1138,8 +1138,17 @@ function initAdToast()
     /** Shows a toast to Android users that don't use the app that it is available. */
     function androidAppToast()
     {
-        if (localStorage.shownAndroidAd || !navigator.userAgent.includes('Android') ||
-            navigator.userAgent.includes('huroutes'))
+        // Don't show if:
+        if (
+            // Already shown the ad
+            localStorage.shownAndroidAd ||
+            // Not running on Android
+            !navigator.userAgent.includes('Android') ||
+            // Running within the Android application
+            navigator.userAgent.includes('huroutes') ||
+            // Running within PWA application
+            navigator.standalone === true ||
+            window.matchMedia('(display-mode: standalone)').matches)
             return;
 
         var androidToast = $('#toast-android-app');
@@ -1252,4 +1261,54 @@ function getJSON(url, ...args)
     });
 }
 
-})();
+})(); // End of main code
+
+// Progressive Web Application code; separated closure
+(function () {
+
+// Opera desktop doesn't support PWA, but pops up beforeinstallprompt.
+if (navigator.userAgent.match(/(Windows|Macintosh|X11).*(Opera|OPR)/))
+    return;
+
+function showToast(id)
+{
+    var toast = $(id);
+    toast.toast('show');
+    // The toast is not shown again once closed.
+    toast.on('hide.bs.toast', () => localStorage.shownPwaAd = true);
+    return toast;
+}
+
+function pwaToast(event)
+{
+    // Prevents default browser notification https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent
+    event.preventDefault();
+    var toast = showToast('#toast-pwa-app');
+    toast.find('a[href]').on('click', () => {
+        // https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent/prompt
+        event.prompt();
+        toast.toast('hide');
+        return false;
+    });
+}
+
+if (!localStorage.shownPwaAd)
+{
+    // Safari sucks, it is incompatible
+    sfrTime = -1;
+    if (navigator.userAgent && navigator.userAgent.match(
+        // Test for safari on iOS, but not Chrome-based or Firefox frontend
+        /(?:iP(?:od|ad|hone))(?!.*(?:CriOS|FxiOS))/) &&
+        // Ensure it doesn't pop in standalone mode
+        !navigator.standalone && !window.matchMedia('(display-mode: standalone)').matches)
+    {
+        sfrTime = setTimeout(() => showToast('#toast-safari-app'), 5000);
+    }
+
+    window.addEventListener("beforeinstallprompt", event => {
+        setTimeout(() => pwaToast(event), 5000);
+        clearTimeout(sfrTime);
+    });
+}
+
+})(); // End of PWA code

app/mstile-150.png

@@ -0,0 +1,64 @@
+(function () {
+
+cacheNames = {
+    thirdparty: "thirdparty-v1",
+    static: "static-v1",
+    dynamic: "dynamic-v1"
+};
+
+// Delete caches not in the list of names
+self.addEventListener('activate', e => {
+    cacheIds = Object.keys(cacheNames).map(key => cacheNames[key]);
+    e.waitUntil(
+        caches.keys()
+        .then(names => names.filter(name => !cacheIds.includes(name)))
+        .then(names => Promise.all(names.map(name => caches.delete(name))))
+        .then(() => self.clients.claim())
+    );
+});
+
+// Cache logic implementation on fetch
+self.addEventListener('fetch', e => {
+    const url = new URL(e.request.url);
+
+    // This caching logic serves first from cache, then falls back to net
+    const cacheFirst = async cacheName =>
+        caches.open(cacheName)
+        .then(cache => cache.match(e.request.url)
+            .then(cachedResponse => cachedResponse ||
+                fetch(e.request)
+                .then(response => {
+                    cache.put(e.request, response.clone());
+                    return response;
+                })
+            ));
+
+    // This caching logic serves first from net, then falls back to cache
+    const netFirst = async cacheName =>
+        caches.open(cacheName)
+        .then(cache => {
+            return fetch(e.request)
+                .then(response => {
+                    cache.put(e.request, response.clone());
+                    return response;
+                })
+                .catch(() => cache.match(e.request.url));
+        });
+
+    // Requests for huroutes resources
+    if (url.origin == self.location.origin)
+    {
+        // Cache huroutes images to the static cache and serve cache-first
+        if (e.request.destination === 'image')
+            return e.respondWith(cacheFirst(cacheNames.static));
+
+        // Cache other huroutes stuff to the dynamic cache and serve net-first
+        return e.respondWith(netFirst(cacheNames.dynamic));
+    }
+
+    // Cache CDN stuff to the thirdparty cache and serve cache-first
+    if (url.hostname == "cdn.jsdelivr.net")
+        return e.respondWith(cacheFirst(cacheNames.thirdparty));
+});
+
+})();