React pwa workbox example

package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "webpack-dev-server": "webpack-dev-server",
     "dev": "webpack serve --mode=development",
-    "prod": "webpack --mode=production",
-	"serve": "npm run prod && serve -s dist",
+    "prod": "NODE_ENV=production webpack --mode=production",
+    "serve": "npm run prod && serve -s dist",
     "svg": "svgr -d src/components/icons src/components/icons/svgs"
   },
   "repository": {
@@ -29,7 +29,14 @@
     "file-loader": "^6.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "style-loader": "^2.0.0"
+    "style-loader": "^2.0.0",
+    "workbox-cacheable-response": "^6.1.5",
+    "workbox-core": "^6.1.5",
+    "workbox-expiration": "^6.1.5",
+    "workbox-precaching": "^6.1.5",
+    "workbox-routing": "^6.1.5",
+    "workbox-strategies": "^6.1.5",
+    "workbox-window": "^6.1.5"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",
@@ -38,12 +45,14 @@
     "@babel/preset-react": "^7.13.13",
     "@svgr/cli": "^5.5.0",
     "babel-loader": "^8.2.2",
+    "copy-webpack-plugin": "^9.0.0",
     "dotenv-webpack": "^7.0.2",
     "html-webpack-plugin": "^5.3.1",
     "path": "^0.12.7",
     "serve": "^11.3.2",
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^3.11.2",
+    "workbox-webpack-plugin": "^6.1.5"
   }
 }

public/index.html

@@ -5,6 +5,8 @@
 	<meta name="viewport"
 	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<link rel="manifest" href="manifest.json">
+	<link rel="shortcut icon" href="favicon.ico">
 	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
 	<title>React App</title>
 </head>

src/App.js

@@ -10,7 +10,7 @@ class App extends React.Component {
 		return (
       <Router>
         <Home path="/"/>
-        <TopPicks path="/top-picks"/>
+        <TopPicks path="top-picks"/>
       </Router>
 		);
 	}

src/components/layout/hero.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import NetflixBackgroundImage from '../../images/netflix-background.png';
+
+const Hero = () => {
+  return (
+    <div id="hero" className="hero">
+      <div className="content">
+        <img className="logo" src="http://www.returndates.com/backgrounds/narcos.logo.png"/>
+        <h2>Season 2 now available</h2>
+        <p>
+          Lorem ipsum dolor sit amet,
+          consectetur adipisicing elit. Doloremque id quam sapiente unde voluptatum alias vero debitis, magnam quis
+          quod.
+        </p>
+        <div className="button-wrapper">
+          <a href="#" className="button-el">Watch now</a>
+          <a href="#" className="button-el">My list</a>
+        </div>
+      </div>
+      <div className="overlay" style={{background: `url(${NetflixBackgroundImage})`}}/>
+    </div>
+  )
+}
+
+export default Hero

src/components/layout/index.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import Header from './header';
+import Hero from './hero';
 
 const Layout = ({children}) => {
   return (
     <div>
       <Header/>
-      {children}
+      <Hero/>
+      <div className="max-w-screen-xl m-auto mt-12">
+        {children}
+      </div>
     </div>
   )
 }

src/components/layout/nav.js

@@ -10,7 +10,7 @@ const Nav = () => {
             <a href="https://www.netflix.com/browse" target="_blank" rel="noopener noreferrer noopener">Browse</a>
           </li>
           <li>
-            <Link to="top-picks">Top picks</Link>
+            <Link to="/top-picks">Top picks</Link>
           </li>
           <li>
             <a href="https://www.netflix.com" target="_blank" rel="noopener noreferrer noopener">Recent</a>

src/components/movies/index.js

@@ -27,11 +27,9 @@ const Movies = () => {
   }, [])
 
   return (
-    <div className="max-w-screen-xl m-auto mt-12">
       <div className="flex flex-wrap -mb-4">
-        {!loading && movies?.length ? movies.map( movie =>  <Movie movie={movie}/>) : <h2>Loading...</h2>}
+        {!loading && movies?.length ? movies.map( (movie, index) =>  <Movie key={movie?.id ?? index} movie={movie}/>) : <h2>Loading...</h2>}
       </div>
-    </div>
   )
 }
 

src/index.js

@@ -1,5 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from "./App";
+import registerServiceWorker from './serviceWorkerRegistration';
 
 ReactDOM.render( <App/>, document.getElementById('root') );
+
+registerServiceWorker();

src/manifest.json

@@ -0,0 +1,25 @@
+{
+	"short_name": "React PWA",
+	"name": "React PWA Example",
+	"icons": [
+		{
+			"src": "favicon.ico",
+			"sizes": "64x64 32x32 24x24 16x16",
+			"type": "image/x-icon"
+		},
+		{
+			"src": "logo192.png",
+			"type": "image/png",
+			"sizes": "192x192"
+		},
+		{
+			"src": "logo512.png",
+			"type": "image/png",
+			"sizes": "512x512"
+		}
+	],
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#e50914",
+	"background_color": "#221f1f"
+}

src/pages/home.js

@@ -1,28 +1,11 @@
 import React from 'react';
 
-import NetflixBackgroundImage from '../images/netflix-background.png';
 import Layout from '../components/layout';
 import Movies from '../components/movies';
 
 const Home = () => {
   return (
     <Layout>
-      <div id="hero" className="hero">
-        <div className="content">
-          <img className="logo" src="http://www.returndates.com/backgrounds/narcos.logo.png"/>
-          <h2>Season 2 now available</h2>
-          <p>
-            Lorem ipsum dolor sit amet,
-            consectetur adipisicing elit. Doloremque id quam sapiente unde voluptatum alias vero debitis, magnam quis
-            quod.
-          </p>
-          <div className="button-wrapper">
-            <a href="#" className="button-el">Watch now</a>
-            <a href="#" className="button-el">My list</a>
-          </div>
-        </div>
-        <div className="overlay" style={{background: `url(${NetflixBackgroundImage})`}}/>
-      </div>
       <Movies/>
     </Layout>
   );

src/pages/top-picks.js

@@ -4,7 +4,9 @@ import Layout from '../components/layout';
 const TopPicks = () => {
   return (
     <Layout>
-      Top picks
+      <h1 className="text-xl font-bold mb-4">Top picks</h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam aut deserunt expedita, hic id, ipsum itaque iusto laborum maxime nam neque praesentium, quaerat quia repudiandae sint tempora tenetur totam!</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam aut deserunt expedita, hic id, ipsum itaque iusto laborum maxime nam neque praesentium, quaerat quia repudiandae sint tempora tenetur totam!</p>
     </Layout>
   )
 }

src/serviceWorkerRegistration.js

@@ -0,0 +1,26 @@
+import { Workbox } from 'workbox-window';
+
+export default function registerServiceWorker() {
+
+  if ( 'production' !== process.env.NODE_ENV ) {
+    return;
+  }
+  // Check if the serviceWorker Object exists in the navigator object ( means if browser supports SW )
+  if ('serviceWorker' in navigator) {
+    const wb = new Workbox('sw.js');
+
+    wb.addEventListener('installed', event => {
+      /**
+       * We have the condition - event.isUpdate because we don't want to show
+       * this message on the very first service worker installation,
+       * only on the updated
+       */
+      if (event.isUpdate) {
+        if (confirm(`New app update is available!. Click OK to refresh`)) {
+          window.location.reload();
+        }
+      }
+    });
+    wb.register();
+  }
+}

src/src-sw.js

@@ -0,0 +1,108 @@
+/* eslint-disable no-restricted-globals */
+
+// 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 } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
+import {CacheableResponsePlugin} from 'workbox-cacheable-response';
+
+clientsClaim();
+
+/**
+ * We are not wrapping it in a 'message' event as per the new update.
+ * @see https://developers.google.com/web/tools/workbox/modules/workbox-core
+ */
+self.skipWaiting();
+
+/**
+ * Precache all of the assets generated by your build process.
+ * Their URLs are injected into the manifest variable below.
+ * This variable must be present somewhere in your service worker file,
+ * even if you decide not to use precaching. See https://cra.link/PWA
+ */
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
+// @see https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts
+registerRoute(
+  ({url}) => url.origin === 'https://fonts.googleapis.com',
+  new StaleWhileRevalidate({
+    cacheName: 'google-fonts-stylesheets',
+  })
+);
+
+// Cache the underlying font files with a cache-first strategy for 1 year.
+// @see https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts
+registerRoute(
+  ({url}) => url.origin === 'https://fonts.gstatic.com',
+  new CacheFirst({
+    cacheName: 'google-fonts-webfonts',
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxAgeSeconds: 60 * 60 * 24 * 365,
+        maxEntries: 30,
+      }),
+    ],
+  })
+);
+
+/**
+ * Move api.
+ *
+ * Caches at: runtime
+ */
+registerRoute(
+  ({url}) => url.origin === 'https://api.themoviedb.org' &&
+    url.pathname.startsWith('/3/discover/tv'),
+  new StaleWhileRevalidate({
+    cacheName: 'movie-api-response',
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({maxEntries: 1}), // Will cache maximum 1 requests.
+    ]
+  })
+);
+
+/**
+ * We use CacheFirst for images because, images are not going to change very often,
+ * so it does not make sense to revalidate images on every request.
+ *
+ * @see https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images
+ */
+registerRoute(
+  ({request}) => request.destination === 'image',
+  new CacheFirst({
+    cacheName: 'images',
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxEntries: 60,
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
+      }),
+    ],
+  }),
+);
+
+// @see https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files
+registerRoute(
+  ({request}) => request.destination === 'script' ||
+    request.destination === 'style',
+  new StaleWhileRevalidate({
+    cacheName: 'static-resources',
+  })
+);

webpack.config.js

@@ -1,6 +1,8 @@
-const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
 const Dotenv = require('dotenv-webpack');
 const path = require( 'path' );
+const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
 
 module.exports = {
 	context: __dirname,
@@ -37,6 +39,18 @@ module.exports = {
     new Dotenv({
       path: './.env', // Path to .env file (this is the default)
       systemvars: true
-    })
+    }),
+    new CopyPlugin({
+      patterns: [
+        { from: "./src/favicon.ico", to: "" },
+        { from: "./src/manifest.json", to: "" },
+        { from: "./src/logo192.png", to: "" },
+        { from: "./src/logo512.png", to: "" },
+      ],
+    }),
+    new WorkboxWebpackPlugin.InjectManifest({
+      swSrc: "./src/src-sw.js",
+      swDest: "sw.js",
+    }),
 	]
 };