First try making mealie a PWA

frontend/public/images/browserconfig.xml

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

frontend/public/images/safari-pinned-tab.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="511.000000pt" height="511.000000pt" viewBox="0 0 511.000000 511.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 2555 l0 -2425 2555 0 2555 0 0 2425 0 2425 -2555 0 -2555 0 0
+-2425z"/>
+</g>
+</svg>

frontend/public/index.html

@@ -4,8 +4,15 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title> Mealie </title>
+      <title> Mealie </title>
     <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> -->
     <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> -->
   </head>
@@ -14,6 +21,13 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
+    <script>
+        if (!navigator.serviceWorker.controller) {
+            navigator.serviceWorker.register("/sw.js").then(function(reg) {
+                console.log("Service worker has been registered for scope: " + reg.scope);
+            });
+        }
+    </script>
     <!-- built files will be auto injected -->
   </body>
 </html>

frontend/public/main.js

@@ -0,0 +1,9 @@
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js')
+        .then(function(registration) {
+            console.log('Registration successful, scope is:', registration.scope);
+        })
+        .catch(function(error) {
+            console.log('Service worker registration failed, error:', error);
+        });
+}

frontend/public/manifest.json

@@ -0,0 +1,20 @@
+{
+    "name": "Mealie",
+    "short_name": "Mealie",
+    "start_url": "index.html",
+    "icons": [
+        {
+            "src": "images/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "images/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#E17B20",
+    "background_color": "#898989",
+    "display": "fullscreen"
+}

frontend/public/sw.js

@@ -0,0 +1,51 @@
+self.addEventListener("install", function(event) {
+    event.waitUntil(preLoad());
+});
+
+var preLoad = function(){
+    console.log("Installing web app");
+    return caches.open("offline").then(function(cache) {
+        console.log("caching index and important routes");
+        return cache.addAll([ "/","/recipes/all"]);
+    });
+};
+
+self.addEventListener("fetch", function(event) {
+    event.respondWith(checkResponse(event.request).catch(function() {
+        return returnFromCache(event.request);
+    }));
+    event.waitUntil(addToCache(event.request));
+});
+
+var checkResponse = function(request){
+    return new Promise(function(fulfill, reject) {
+        fetch(request).then(function(response){
+            if(response.status !== 404) {
+                fulfill(response);
+            } else {
+                reject();
+            }
+        }, reject);
+    });
+};
+
+var addToCache = function(request){
+    return caches.open("offline").then(function (cache) {
+        return fetch(request).then(function (response) {
+            console.log(response.url + " was cached");
+            return cache.put(request, response);
+        });
+    });
+};
+
+var returnFromCache = function(request){
+    return caches.open("offline").then(function (cache) {
+        return cache.match(request).then(function (matching) {
+            if(!matching || matching.status == 404) {
+                return cache.match("offline.html");
+            } else {
+                return matching;
+            }
+        });
+    });
+};