converted to pwa and added icons

Kerosz · Dec 30, 2020 · 3c54a01 · 3c54a01
1 parent 79c249b
commit 3c54a01
Show file tree

Hide file tree

Showing 36 changed files with 412 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,19 @@
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
-    "remark-gfm": "^1.0.0"
+    "remark-gfm": "^1.0.0",
+    "workbox-background-sync": "^6.0.2",
+    "workbox-broadcast-update": "^6.0.2",
+    "workbox-cacheable-response": "^6.0.2",
+    "workbox-core": "^6.0.2",
+    "workbox-expiration": "^6.0.2",
+    "workbox-google-analytics": "^6.0.2",
+    "workbox-navigation-preload": "^6.0.2",
+    "workbox-precaching": "^6.0.2",
+    "workbox-range-requests": "^6.0.2",
+    "workbox-routing": "^6.0.2",
+    "workbox-strategies": "^6.0.2",
+    "workbox-streams": "^6.0.2"
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.2",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/icons/android-icon-144x144.png b/public/images/icons/android-icon-144x144.png
diff --git a/public/images/icons/android-icon-192x192.png b/public/images/icons/android-icon-192x192.png
diff --git a/public/images/icons/android-icon-36x36.png b/public/images/icons/android-icon-36x36.png
diff --git a/public/images/icons/android-icon-48x48.png b/public/images/icons/android-icon-48x48.png
diff --git a/public/images/icons/android-icon-72x72.png b/public/images/icons/android-icon-72x72.png
diff --git a/public/images/icons/android-icon-96x96.png b/public/images/icons/android-icon-96x96.png
diff --git a/public/images/icons/apple-icon-114x114.png b/public/images/icons/apple-icon-114x114.png
diff --git a/public/images/icons/apple-icon-120x120.png b/public/images/icons/apple-icon-120x120.png
diff --git a/public/images/icons/apple-icon-144x144.png b/public/images/icons/apple-icon-144x144.png
diff --git a/public/images/icons/apple-icon-152x152.png b/public/images/icons/apple-icon-152x152.png
diff --git a/public/images/icons/apple-icon-180x180.png b/public/images/icons/apple-icon-180x180.png
diff --git a/public/images/icons/apple-icon-57x57.png b/public/images/icons/apple-icon-57x57.png
diff --git a/public/images/icons/apple-icon-60x60.png b/public/images/icons/apple-icon-60x60.png
diff --git a/public/images/icons/apple-icon-72x72.png b/public/images/icons/apple-icon-72x72.png
diff --git a/public/images/icons/apple-icon-76x76.png b/public/images/icons/apple-icon-76x76.png
diff --git a/public/images/icons/apple-icon-precomposed.png b/public/images/icons/apple-icon-precomposed.png
diff --git a/public/images/icons/apple-icon.png b/public/images/icons/apple-icon.png
diff --git a/public/images/icons/favicon-16x16.png b/public/images/icons/favicon-16x16.png
diff --git a/public/images/icons/favicon-32x32.png b/public/images/icons/favicon-32x32.png
diff --git a/public/images/icons/favicon-96x96.png b/public/images/icons/favicon-96x96.png
diff --git a/public/images/icons/favicon.ico b/public/images/icons/favicon.ico
diff --git a/public/images/icons/ms-icon-144x144.png b/public/images/icons/ms-icon-144x144.png
diff --git a/public/images/icons/ms-icon-150x150.png b/public/images/icons/ms-icon-150x150.png
diff --git a/public/images/icons/ms-icon-310x310.png b/public/images/icons/ms-icon-310x310.png
diff --git a/public/images/icons/ms-icon-70x70.png b/public/images/icons/ms-icon-70x70.png
diff --git a/public/index.html b/public/index.html
@@ -2,24 +2,97 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="apple-touch-icon"
+      sizes="57x57"
+      href="%PUBLIC_URL%/images/icons/apple-icon-57x57.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="60x60"
+      href="%PUBLIC_URL%/images/icons/apple-icon-60x60.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="72x72"
+      href="%PUBLIC_URL%/images/icons/apple-icon-72x72.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="%PUBLIC_URL%/images/icons/apple-icon-76x76.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="%PUBLIC_URL%/images/icons/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="%PUBLIC_URL%/images/icons/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="%PUBLIC_URL%/images/icons/apple-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="%PUBLIC_URL%/images/icons/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="%PUBLIC_URL%/images/icons/apple-icon-180x180.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="%PUBLIC_URL%/images/icons/android-icon-192x192.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="%PUBLIC_URL%/images/icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="%PUBLIC_URL%/images/icons/favicon-96x96.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="%PUBLIC_URL%/images/icons/favicon-16x16.png"
+    />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta
+      name="msapplication-TileImage"
+      content="%PUBLIC_URL%/images/icons/ms-icon-144x144.png"
+    />
+    <meta name="theme-color" content="#ffffff" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#fff" />
     <meta
       name="description"
       content="Reddit Client Redesign is the unofficial Reddit frontend app concept to tune the experience of the users and greater increase the browsing experience."
     />
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Reddit Client</title>
-
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
     />
+
+    <title>Reddit Client</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript>Really ?! It's 2020, turn on that JavaScript</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,15 +1,49 @@
 {
-  "short_name": "Reddit Client",
-  "name": "Unofficial reddit client redesign",
+  "theme_color": "#f58415",
+  "background_color": "#fcf9f7",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "name": "Reddit Client",
+  "short_name": "RC",
+  "app_name": "Reddit Client",
+  "description": "Unofficial reddit client redesign",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/images/icons/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/images/icons/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/images/icons/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/images/icons/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/images/icons/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/images/icons/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
     }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  ]
 }
diff --git a/src/components/Card/commentCard/index.tsx b/src/components/Card/commentCard/index.tsx
@@ -37,7 +37,7 @@ const CommentCard: React.FC<CommentDataProps & StyleProps> = ({
   const formatSinceEdited = fd.getTimeFromNow(data.edited);
   const formatedUpvotes = fd.shortenLargeNumber(data.ups);
   const upvotes = data.ups > 1 ? 'upvotes' : 'upvote';
-  const url = process.env.APP_URL || 'http://localhost:3000';
+  const url = process.env.PUBLIC_URL || 'http://localhost:3000';
   const shareUrl = `${url}/#/post/${data.subreddit}/comments/${postId}`;
 
   let authorDisplay;

diff --git a/src/components/Card/postCard/index.tsx b/src/components/Card/postCard/index.tsx
@@ -112,7 +112,7 @@ const PostCard: React.FC<StyleProps & PostDataProps> = ({
     preview = null;
   }
 
-  const url = process.env.APP_URL || 'http://localhost:3000';
+  const url = process.env.PUBLIC_URL || 'http://localhost:3000';
   const shareUrl = `${url}/#/post/${data.subreddit}/comments/${data.id}`;
 
   return (

diff --git a/src/index.tsx b/src/index.tsx
@@ -5,6 +5,7 @@
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import store from './store/store';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
 const render = () => {
   const App = require('./app').default;
@@ -21,3 +22,5 @@ render();
 if (process.env.NODE_ENV === 'development' && module.hot) {
   module.hot.accept('./app', render);
 }
+
+serviceWorkerRegistration.register();
diff --git a/src/lib/API.ts b/src/lib/API.ts
@@ -1,7 +1,5 @@
 const API_URL = process.env.REACT_APP_API_URL || 'https://www.reddit.com';
 
-// https://snowy-salad-2e3a.kerosz.workers.dev/?
-
 const initialOptions = {
   headers: {
     accept: 'application/json',

diff --git a/src/service-worker.ts b/src/service-worker.ts
@@ -0,0 +1,71 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-restricted-globals */
+/// <reference lib="webworker" />
+
+// This service worker can be customized!
+// See https://developers.google.com/web/tools/workbox/modules
+// for the list of available Workbox modules, or add any other
+// code you'd like.
+// You can also remove this file if you'd prefer not to use a
+// service worker, and the Workbox build step will be skipped.
+
+import { clientsClaim } from 'workbox-core';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate } from 'workbox-strategies';
+
+declare const self: ServiceWorkerGlobalScope;
+
+clientsClaim();
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+registerRoute(
+  // Return false to exempt requests from being fulfilled by index.html.
+  ({ request, url }: { request: Request; url: URL }) => {
+    if (request.mode !== 'navigate') {
+      return false;
+    }
+
+    // If this is a URL that starts with /_, skip.
+    if (url.pathname.startsWith('/_')) {
+      return false;
+    }
+
+    // If this looks like a URL for a resource, because it contains
+    // a file extension, skip.
+    if (url.pathname.match(fileExtensionRegexp)) {
+      return false;
+    }
+
+    return true;
+  },
+  createHandlerBoundToURL(`${process.env.PUBLIC_URL}/index.html`),
+);
+
+registerRoute(
+  // Add in any other file extensions or routing criteria as needed.
+  ({ url }) =>
+    url.origin === self.location.origin && url.pathname.endsWith('.png'),
+  // Customize this strategy as needed, e.g., by changing to CacheFirst.
+  new StaleWhileRevalidate({
+    cacheName: 'images',
+    plugins: [
+      // Ensure that once this runtime cache reaches a maximum size the
+      // least-recently used images are removed.
+      new ExpirationPlugin({ maxEntries: 50 }),
+    ],
+  }),
+);
+
+// This allows the web app to trigger skipWaiting via
+// registration.waiting.postMessage({type: 'SKIP_WAITING'})
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+// Any other custom service worker logic can go here.