From 85268790deef7498c0e37c441e31db10233f98f1 Mon Sep 17 00:00:00 2001 From: Thomas Gauvin <35609369+thomasgauvin@users.noreply.github.com> Date: Tue, 16 Jul 2024 00:53:37 -0400 Subject: [PATCH 1/2] testing adding service workers to have static pmtiles --- app/components/map.tsx | 62 ++++++++++++++++++++---------- package-lock.json | 25 +++++++++++- package.json | 4 +- public/sw2.js | 87 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 156 insertions(+), 22 deletions(-) create mode 100644 public/sw2.js diff --git a/app/components/map.tsx b/app/components/map.tsx index da9bd58..d8a1cce 100644 --- a/app/components/map.tsx +++ b/app/components/map.tsx @@ -17,6 +17,23 @@ export const MapComponent = ({ customTheme }: { customTheme: Partial }) = }; }, []); + //add service worker + useEffect(() => { + if ("serviceWorker" in navigator) { + const registration = navigator.serviceWorker.register("/sw2.js").then( + function (registration) { + console.log( + "Service Worker registration successful with scope: ", + registration.scope + ); + }, + function (err) { + console.log("Service Worker registration failed: ", err); + } + ); + } + }, []); + return ( <> }) = protomaps: { type: "vector", // url: "pmtiles://http://localhost:8080/world.pmtiles", - // tiles: ["http://localhost:8787/world/{z}/{x}/{y}.mvt"], - tiles: [ - "https://protomaps-host.tomsprojects.workers.dev/world/{z}/{x}/{y}.mvt", - ], + // tiles: [ + // "https://pmtiles-cloudflare.tomsprojects.workers.dev/world/{z}/{x}/{y}.mvt", + // ], + // tiles: [ + // "https://protomaps-host.tomsprojects.workers.dev/world/{z}/{x}/{y}.mvt", + // ], // url: "pmtiles://http://localhost:8787/world/{z}/{x}/{y}.mvt", - // url: "pmtiles://world.pmtiles", + url: "pmtiles://world.pmtiles", + }, + protomaps2: { + type: "vector", + // url: "pmtiles://http://localhost:8080/nyc.pmtiles", + // url: "pmtiles://http://localhost:8787/nyc/{z}/{x}/{y}.mvt", + // tiles: ["http://localhost:8787/nyc/{z}/{x}/{y}.mvt"], + url: "pmtiles://nyc.pmtiles", + // tiles: [ + // "https://pmtiles-cloudflare.tomsprojects.workers.dev/nyc/{z}/{x}/{y}.mvt", + // ], }, - // protomaps2: { - // type: "vector", - // // url: "pmtiles://http://localhost:8080/nyc.pmtiles", - // // url: "pmtiles://http://localhost:8787/nyc/{z}/{x}/{y}.mvt", - // // tiles: ["http://localhost:8787/nyc/{z}/{x}/{y}.mvt"], - // url: "pmtiles://test/nyc.pmtiles", - // }, }, glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf", @@ -56,14 +78,14 @@ export const MapComponent = ({ customTheme }: { customTheme: Partial }) = ).filter((e) => { return !e.id.includes("background"); }), - // ...layersWithPartialCustomTheme("protomaps2", "light", customTheme) - // .filter((e) => { - // return !e.id.includes("background"); - // }) - // .map((e) => { - // e.id = e.id + "2"; - // return e; - // }), + ...layersWithPartialCustomTheme("protomaps2", "light", customTheme) + .filter((e) => { + return !e.id.includes("background"); + }) + .map((e) => { + e.id = e.id + "2"; + return e; + }), ], }} mapLib={maplibregl} diff --git a/package-lock.json b/package-lock.json index 0843c6e..eb9d188 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,9 @@ "react": "^18", "react-dom": "^18", "react-map-gl": "^7.1.7", - "react-markdown": "^9.0.1" + "react-markdown": "^9.0.1", + "workbox-routing": "^7.1.0", + "workbox-strategies": "^7.1.0" }, "devDependencies": { "@cloudflare/next-on-pages": "^1.12.1", @@ -7965,6 +7967,27 @@ "node": ">=8" } }, + "node_modules/workbox-core": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-7.1.0.tgz", + "integrity": "sha512-5KB4KOY8rtL31nEF7BfvU7FMzKT4B5TkbYa2tzkS+Peqj0gayMT9SytSFtNzlrvMaWgv6y/yvP9C0IbpFjV30Q==" + }, + "node_modules/workbox-routing": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-7.1.0.tgz", + "integrity": "sha512-oOYk+kLriUY2QyHkIilxUlVcFqwduLJB7oRZIENbqPGeBP/3TWHYNNdmGNhz1dvKuw7aqvJ7CQxn27/jprlTdg==", + "dependencies": { + "workbox-core": "7.1.0" + } + }, + "node_modules/workbox-strategies": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-7.1.0.tgz", + "integrity": "sha512-/UracPiGhUNehGjRm/tLUQ+9PtWmCbRufWtV0tNrALuf+HZ4F7cmObSEK+E4/Bx1p8Syx2tM+pkIrvtyetdlew==", + "dependencies": { + "workbox-core": "7.1.0" + } + }, "node_modules/workerd": { "version": "1.20240701.0", "resolved": "https://registry.npmjs.org/workerd/-/workerd-1.20240701.0.tgz", diff --git a/package.json b/package.json index 8436561..0a31ff1 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,9 @@ "react": "^18", "react-dom": "^18", "react-map-gl": "^7.1.7", - "react-markdown": "^9.0.1" + "react-markdown": "^9.0.1", + "workbox-routing": "^7.1.0", + "workbox-strategies": "^7.1.0" }, "devDependencies": { "@cloudflare/next-on-pages": "^1.12.1", diff --git a/public/sw2.js b/public/sw2.js new file mode 100644 index 0000000..cb3b984 --- /dev/null +++ b/public/sw2.js @@ -0,0 +1,87 @@ +// public/service-worker.js + +// import { registerRoute } from "workbox-routing"; +// import { CacheFirst } from "workbox-strategies"; + +const cacheAssets = [ + 'world.pmtiles', + 'nyc.pmtiles' +] + +self.addEventListener('install', (e) => { + console.log("service worker installed") + + e.waitUntil( + caches + .open("pmtiles-cache") + .then((cache) => { + return cache.addAll(cacheAssets) + }) + .catch((err) => { + console.log("error caching assets") + }) + .then(() => { + self.skipWaiting() + }) + ) +}) + +self.addEventListener('activate', (e) => { + console.log("service worker activated") +}) + +self.addEventListener('fetch', (e) => { + console.log("service worker fetching 2") + + if(e.request.url.endsWith(".pmtiles")) { + console.log('service worker fetching pmtiles') + async ({ request }) => { + try { + // Use CacheFirst strategy + const cacheStrategy = new CacheFirst({ + cacheName: "pmtiles-cache", + plugins: [ + { + // Ensure the entire response is cached + cacheWillUpdate: async ({ response }) => { + if (response && response.ok) { + return response; + } + return null; + }, + }, + ], + }); + + // Attempt to serve from cache first + let response = await cacheStrategy.handle({ request }); + + // If not found in cache, fetch the full file from the network + if (!response) { + const headers = new Headers(request.headers); + headers.delete("range"); // Remove range request headers + + const fullRequest = new Request(request.url, { + headers: headers, + method: "GET", // Ensure it's a GET request + }); + + console.log("fetching full request from network"); + + response = await fetch(fullRequest); + + // Ensure the response is valid before caching + if (response.ok) { + const cache = await caches.open("pmtiles-cache"); + await cache.put(request, response.clone()); + } + } + + return response; + } catch (error) { + console.error("Error in service worker:", error); + throw error; + } + } + } +}) From 57551bc4974ca4da89381be6ba12aa1094df937c Mon Sep 17 00:00:00 2001 From: Thomas Gauvin <35609369+thomasgauvin@users.noreply.github.com> Date: Tue, 16 Jul 2024 01:06:47 -0400 Subject: [PATCH 2/2] reload page is sw not registered --- app/components/map.tsx | 55 ++++++++++++++++++++++++++++++------------ 1 file changed, 40 insertions(+), 15 deletions(-) diff --git a/app/components/map.tsx b/app/components/map.tsx index d8a1cce..f3ab535 100644 --- a/app/components/map.tsx +++ b/app/components/map.tsx @@ -8,7 +8,25 @@ import layers, { layersWithPartialCustomTheme } from "protomaps-themes-base"; import { Theme } from "../lib/theme"; -export const MapComponent = ({ customTheme }: { customTheme: Partial }) => { +if ("serviceWorker" in navigator) { + const registration = navigator.serviceWorker.register("/sw2.js").then( + function (registration) { + console.log( + "Service Worker registration successful with scope: ", + registration.scope + ); + }, + function (err) { + console.log("Service Worker registration failed: ", err); + } + ); +} + +export const MapComponent = ({ + customTheme, +}: { + customTheme: Partial; +}) => { useEffect(() => { let protocol = new Protocol(); maplibregl.addProtocol("pmtiles", protocol.tile); @@ -17,21 +35,28 @@ export const MapComponent = ({ customTheme }: { customTheme: Partial }) = }; }, []); - //add service worker useEffect(() => { - if ("serviceWorker" in navigator) { - const registration = navigator.serviceWorker.register("/sw2.js").then( - function (registration) { - console.log( - "Service Worker registration successful with scope: ", - registration.scope - ); - }, - function (err) { - console.log("Service Worker registration failed: ", err); - } - ); - } + if ("serviceWorker" in navigator) { + window.addEventListener("load", () => { + navigator.serviceWorker + .getRegistrations() + .then((registrations) => { + const sw2Registered = registrations.some((registration) => + registration.active?.scriptURL.endsWith("/sw2.js") + ); + + if (!sw2Registered) { + window.location.reload(); + } + }) + .catch((error) => { + console.error( + "Error checking service worker registrations:", + error + ); + }); + }); + } }, []); return (