diff --git a/src/index.tsx b/src/index.tsx index d03f655..83c40a3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom"; +import * as ServiceWorker from "./registerServiceWorker"; import "./index.css"; @@ -12,3 +13,4 @@ ReactDOM.render( document.getElementById("root") ); +ServiceWorker.register(); diff --git a/src/registerServiceWorker.ts b/src/registerServiceWorker.ts new file mode 100644 index 0000000..e6b6aef --- /dev/null +++ b/src/registerServiceWorker.ts @@ -0,0 +1,16 @@ +export const register = () => { + if ("serviceWorker" in navigator) { + window.addEventListener("load", () => + navigator.serviceWorker + .register("/sw.js") + .then((registration) => { + if (process.env.NODE_ENV === "development") + console.log( + "Successfully registered ServiceWorker with scope:", + registration.scope + ); + }) + .catch((err) => console.error(err)) + ); + } +}; diff --git a/src/serviceWorker/cache.ts b/src/serviceWorker/cache.ts new file mode 100644 index 0000000..600a076 --- /dev/null +++ b/src/serviceWorker/cache.ts @@ -0,0 +1,22 @@ +import { CACHE } from "../constants"; + +const getCache = () => caches.open(CACHE); + +/** + * Caches static files for application + */ +export const precache = async () => + (await getCache()).addAll(["/", "/index.js", "/sw.js"]); + +/** + * Requests file from network or gets it from cache if offline + */ +export const fromCache = async (request: Request) => { + try { + const response = await fetch(request); + (await getCache()).put(request, response); + return response; + } catch (err) { + return (await getCache()).match(request); + } +}; diff --git a/src/serviceWorker/index.ts b/src/serviceWorker/index.ts new file mode 100644 index 0000000..93013ad --- /dev/null +++ b/src/serviceWorker/index.ts @@ -0,0 +1,10 @@ +import { precache } from "./cache"; + +declare const self: ServiceWorkerGlobalScope; + +self.addEventListener("install", (event) => { + self.skipWaiting(); + event.waitUntil(precache()); +}); + +export type {};