PWA

Author: sterlingwalsh

package-lock.json

@@ -41,5 +41,5 @@
   "bugs": {
     "url": "https://github.com/sterlingwalsh/robofriends/issues"
   },
-  "homepage": "https://github.com/sterlingwalsh/robofriends"
+  "homepage": "https://sterlingwalsh.github.io/robofriends"
 }

package.json

@@ -8,14 +8,15 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
+    <meta name="Description" content="Robofriends is a simple app displaying the flexibility of React web development" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/site.webmanifest">
+    <!-- <link rel="manifest" href="/site.webmanifest"> -->
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">

public/index.html

@@ -6,6 +6,16 @@
       "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-256x256.png",
+        "sizes": "256x256",
+        "type": "image/png"
     }
   ],
   "start_url": ".",

public/manifest.json

@@ -10,6 +10,7 @@ class SearchBox extends Component{
                     type='search'
                     placeholder='Search Robots'
                     onChange={searchChange}
+                    aria-label="search"
                 />
             </div>
         );

public/site.webmanifest

@@ -3,16 +3,13 @@
     font-family: 'SEGA LOGO FONT';
     font-style: normal;
     font-weight: normal;
+    font-display: swap;
     src: local('SEGA LOGO FONT'), url('SEGA.woff') format('woff');
 }
 
 h1{
-    font-family: "SEGA LOGO FONT";
+    font-family: "SEGA LOGO FONT", sans-serif;
     font-weight: 200;
     color: #0ccac4;
 }
 
-.pageHeader{
-    /* height: 16.67vh; */
-}
-

src/components/SearchBox.js

@@ -19,5 +19,5 @@ const store = createStore(rootReducer, applyMiddleware(thunkMiddleware, logger))
 ReactDOM.render(<Provider store={store}>
                     <App />
                 </Provider>, document.getElementById('root'));
-serviceWorker.unregister();
+serviceWorker.register();