feat: update icon and make this app a pwa (#110)

* feat: update icon and make this app a pwa * chore: update mimetypes * chore: remove share_Target * chore: oxipng reduced size of each PNG by ~30% on average * fix: set theme color * fix: theme-color from HTML spec https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color Co-authored-by: Marcin Rataj <[email protected]>
ipfs-shipyard · Feb 4, 2021 · 2aaffba · 2aaffba
1 parent 1fb7f99
commit 2aaffba
Show file tree

Hide file tree

Showing 18 changed files with 203 additions and 132 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#edffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -3,13 +3,17 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
+    <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="theme-color" content="#022E44">
+    <meta name="msapplication-TileColor" content="#edffff">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,15 +1,20 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "IPFS Share",
+  "name": "IPFS Share",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#022E44",
+  "background_color": "#022E44",
+  "start_url": "/",
+  "display": "standalone"
 }
diff --git a/public/mstile-144x144.png b/public/mstile-144x144.png
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/mstile-310x150.png b/public/mstile-310x150.png
diff --git a/public/mstile-310x310.png b/public/mstile-310x310.png
diff --git a/public/mstile-70x70.png b/public/mstile-70x70.png
diff --git a/public/offline.html b/public/offline.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="UTF-8">
+  <title>IPFS Share | Offline</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+ </head>
+ <body>
+     <script>
+     function reload() {
+        window.location.reload()
+     }
+     </script>
+   <div style="text-align:center; margin-top:40px;" onclick="reload()">
+        <svg viewBox='0 0 100 100' width="100" style="cursor: pointer">
+            <path d='M50 20.11A29.89 29.89 0 1 0 79.89 50 29.89 29.89 0 0 0 50 20.11zm-3.22 17a3.22 3.22 0 0 1 6.44 0v6.43a3.22 3.22 0 0 1-6.44 0zM50 66.08a16.14 16.14 0 0 1-11.41-27.49 3.28 3.28 0 0 1 1.76-.65 2.48 2.48 0 0 1 2.42 2.41 2.58 2.58 0 0 1-.77 1.77A10.81 10.81 0 0 0 38.59 50a11.25 11.25 0 0 0 22.5 0 10.93 10.93 0 0 0-3.21-7.88 3.37 3.37 0 0 1-.65-1.77 2.48 2.48 0 0 1 2.42-2.41 2.16 2.16 0 0 1 1.76.65A16.14 16.14 0 0 1 50 66.08z' />
+        </svg>
+        <p>You are currently offline.</p>
+   <div>
+  </body>
+</html>
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/service-worker.js b/public/service-worker.js
@@ -0,0 +1,31 @@
+/* eslint-disable no-restricted-globals */
+
+self.addEventListener('install', function (event) {
+  const offlineRequest = new Request('offline.html')
+  event.waitUntil(
+    fetch(offlineRequest).then(function (response) {
+      return caches.open('offline').then(function (cache) {
+        console.log('[oninstall] Cached offline page', response.url)
+        return cache.put(offlineRequest, response)
+      })
+    })
+  )
+})
+
+self.addEventListener('fetch', function (event) {
+  const request = event.request
+
+  if (request.method === 'GET') {
+    event.respondWith(
+      fetch(request).catch(function (error) {
+        console.error(
+          '[onfetch] Failed. Serving cached offline fallback ' +
+              error
+        )
+        return caches.open('offline').then(function (cache) {
+          return cache.match('offline.html')
+        })
+      })
+    )
+  }
+})