- Top picks
+ Top picks
+ 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!
+ 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!
)
}
diff --git a/src/serviceWorkerRegistration.js b/src/serviceWorkerRegistration.js
new file mode 100644
index 0000000..256ef1f
--- /dev/null
+++ b/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();
+ }
+}
diff --git a/src/src-sw.js b/src/src-sw.js
new file mode 100644
index 0000000..221320d
--- /dev/null
+++ b/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',
+ })
+);
diff --git a/webpack.config.js b/webpack.config.js
index a208edf..dd316e2 100644
--- a/webpack.config.js
+++ b/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",
+ }),
]
};
+