update React play PWA

add react-play logo to manifest.json, update serviceworker.js and registerServiceWorker.js script
rh-abir · Jul 20, 2022 · c1f8143 · c1f8143
1 parent 60e83d5
commit c1f8143
Show file tree

Hide file tree

Showing 17 changed files with 32 additions and 249 deletions.
diff --git a/public/index.html b/public/index.html
@@ -48,30 +48,5 @@
  To begin the development, run `npm start` or `yarn start`.
  To create a production bundle, use `npm run build` or `yarn build`.
  -->
-
- <script>
- if ("serviceWorker" in navigator) {
- window.addEventListener("load", function () {
- navigator.serviceWorker
- .register("worker.js")
- .then(
- function (registration) {
- console.log(
- "Worker registration successful",
- registration.scope
- );
- },
- function (err) {
- console.log("Worker registration failed", err);
- }
- )
- .catch(function (err) {
- console.log(err);
- });
- });
- } else {
- console.log("Service Worker is not supported by browser.");
- }
- </script>
  </body>
 </html>
diff --git a/public/logo152x152.png b/public/logo152x152.png
diff --git a/public/logo16x16.png b/public/logo16x16.png
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo192x192.png b/public/logo192x192.png
diff --git a/public/logo24x24.png b/public/logo24x24.png
diff --git a/public/logo32x32.png b/public/logo32x32.png
diff --git a/public/logo48x48.png b/public/logo48x48.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/logo512x512.png b/public/logo512x512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -8,23 +8,23 @@
  "type": "image/x-icon"
  },
  {
- "src": "maskable_icon.png",
- "sizes": "64x64 32x32 24x24 16x16 512x512 192x192",
- "type": "image/png",
- "purpose": "maskable"
- },
- {
- "src": "logo192.png",
+ "src": "logo192x192.png",
  "type": "image/png",
  "sizes": "192x192"
  },
  {
  "src": "logo512x512.png",
  "type": "image/png",
  "sizes": "512x512"
+ },
+ {
+ "src": "maskable_icon.png",
+ "sizes": "64x64 32x32 24x24 16x16 512x512 192x192",
+ "type": "image/png",
+ "purpose": "maskable"
  }
  ],
- "start_url": ".",
+ "start_url": "",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"

diff --git a/public/worker.js → public/serviceWorker.js b/public/worker.js → public/serviceWorker.js
@@ -1,6 +1,6 @@
 const CACHE_NAME = "reactplay";
 
-const urlsToCache = ["/", "/completed"];
+const urlsToCache = ["/", "./index.html"];
 
 const self = this;
 

diff --git a/src/ServiceWorkerRegistration.js b/src/ServiceWorkerRegistration.js
diff --git a/src/index.js b/src/index.js
@@ -4,7 +4,7 @@ import "index.css";
 import React, { useState } from "react";
 import { createRoot } from "react-dom/client";
 import reportWebVitals from "reportWebVitals";
-import * as ServiceWorkerRegistration from "./ServiceWorkerRegistration";
+// import * as registerServiceWorker from "./registerServiceWorker";
 
 /** removing console statement in react prod build */
 if (process.env.NODE_ENV !== "development") {
@@ -35,7 +35,8 @@ const Index = () => {
 const container = document.getElementById("root");
 createRoot(container).render(<Index />);
 
-ServiceWorkerRegistration.register();
+// Makes the app to work offline and load faster
+// registerServiceWorker.register();
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
@@ -0,0 +1,19 @@
+if ("serviceWorker" in navigator) {
+ window.addEventListener("load", function () {
+ navigator.serviceWorker
+ .register("./serviceWorker.js")
+ .then(
+ function (registration) {
+ console.log("Worker registration successful", registration.scope);
+ },
+ function (err) {
+ console.log("Worker registration failed", err);
+ }
+ )
+ .catch(function (err) {
+ console.log(err);
+ });
+ });
+} else {
+ console.log("Service Worker is not supported by browser.");
+}
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
diff --git a/tsconfig.json b/tsconfig.json
@@ -12,5 +12,5 @@
  "resolveJsonModule": true,
  "allowSyntheticDefaultImports": true
  },
- "include": ["src/**/*"]
+ "include": ["src/**/*", "public/serviceWorker.js"]
 }