From d135d002bf5814386a9a243dfe9d8210c31277a8 Mon Sep 17 00:00:00 2001 From: Alexander Harding <2166114+aeharding@users.noreply.github.com> Date: Sun, 5 May 2024 16:48:03 -0500 Subject: [PATCH] Fix offline functionality after dependency upgrades (#147) --- package.json | 13 +-- pnpm-lock.yaml | 33 ------- src/service-worker.ts | 213 ------------------------------------------ vite.config.ts | 105 ++++++++++++++++++++- 4 files changed, 104 insertions(+), 260 deletions(-) delete mode 100644 src/service-worker.ts diff --git a/package.json b/package.json index 8db2393..4a534f9 100644 --- a/package.json +++ b/package.json @@ -54,18 +54,7 @@ "react-transition-group": "^4.4.2", "suncalc": "^1.9.0", "typescript": "^5.0.2", - "velitherm": "^1.2.0", - "workbox-background-sync": "^7.1.0", - "workbox-broadcast-update": "^7.1.0", - "workbox-cacheable-response": "^7.1.0", - "workbox-core": "^7.1.0", - "workbox-expiration": "^7.1.0", - "workbox-navigation-preload": "^7.1.0", - "workbox-precaching": "^7.1.0", - "workbox-range-requests": "^7.1.0", - "workbox-routing": "^7.1.0", - "workbox-strategies": "^7.1.0", - "workbox-streams": "^7.1.0" + "velitherm": "^1.2.0" }, "scripts": { "start": "vite", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5f8f6ce..3506fcb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -155,39 +155,6 @@ importers: velitherm: specifier: ^1.2.0 version: 1.2.0 - workbox-background-sync: - specifier: ^7.1.0 - version: 7.1.0 - workbox-broadcast-update: - specifier: ^7.1.0 - version: 7.1.0 - workbox-cacheable-response: - specifier: ^7.1.0 - version: 7.1.0 - workbox-core: - specifier: ^7.1.0 - version: 7.1.0 - workbox-expiration: - specifier: ^7.1.0 - version: 7.1.0 - workbox-navigation-preload: - specifier: ^7.1.0 - version: 7.1.0 - workbox-precaching: - specifier: ^7.1.0 - version: 7.1.0 - workbox-range-requests: - specifier: ^7.1.0 - version: 7.1.0 - workbox-routing: - specifier: ^7.1.0 - version: 7.1.0 - workbox-strategies: - specifier: ^7.1.0 - version: 7.1.0 - workbox-streams: - specifier: ^7.1.0 - version: 7.1.0 devDependencies: '@emotion/babel-plugin': specifier: ^11.11.0 diff --git a/src/service-worker.ts b/src/service-worker.ts deleted file mode 100644 index da12df0..0000000 --- a/src/service-worker.ts +++ /dev/null @@ -1,213 +0,0 @@ -/// - -// 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 { - cleanupOutdatedCaches, - precacheAndRoute, - createHandlerBoundToURL, -} from "workbox-precaching"; -import { registerRoute } from "workbox-routing"; -import { - NetworkFirst, - StaleWhileRevalidate, - CacheFirst, -} from "workbox-strategies"; - -declare const self: ServiceWorkerGlobalScope; - -self.skipWaiting(); -clientsClaim(); - -cleanupOutdatedCaches(); - -// 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); - -// Set up App Shell-style routing, so that all navigation requests -// are fulfilled with your index.html shell. Learn more at -// https://developers.google.com/web/fundamentals/architecture/app-shell -const fileExtensionRegexp = new RegExp("/[^/?]+\\.[^/]+$"); -registerRoute( - // Return false to exempt requests from being fulfilled by index.html. - ({ request, url }: { request: Request; url: URL }) => { - // If this isn't a navigation, skip. - if (request.mode !== "navigate") { - return false; - } - - // If this is a URL that starts with /_, skip. - if (url.pathname.startsWith("/_")) { - return false; - } - - // If API request, never cache - if (url.pathname.startsWith("/api/")) { - return false; - } - - // If this looks like a URL for a resource, because it contains - // a file extension, skip. - // - // Check for "," to exempt lat/lon paths /22.0354,-88.5532 - if ( - url.pathname.match(fileExtensionRegexp) && - url.pathname.indexOf(",") === -1 - ) { - return false; - } - - // Return true to signal that we want to use the handler. - return true; - }, - createHandlerBoundToURL("/index.html"), -); - -// An example runtime caching route for requests that aren't handled by the -// precache, in this case same-origin .png requests like those from in public/ -registerRoute( - // Add in any other file extensions or routing criteria as needed. - ({ url }) => - url.origin === self.location.origin && url.pathname.endsWith(".png"), - // Customize this strategy as needed, e.g., by changing to CacheFirst. - new StaleWhileRevalidate({ - cacheName: "images", - plugins: [ - // Ensure that once this runtime cache reaches a maximum size the - // least-recently used images are removed. - new ExpirationPlugin({ maxEntries: 50 }), - ], - }), -); - -// Cache API geocode response -registerRoute( - new RegExp("/api/position.*"), - new CacheFirst({ - cacheName: "apiPositionCache", - plugins: [ - new ExpirationPlugin({ - maxEntries: 100, - maxAgeSeconds: 60 * 60 * 24 * 7, // 7 Days - }), - ], - }), -); - -// Cache API RAP response -registerRoute( - new RegExp("/api/rap.*"), - new NetworkFirst({ - cacheName: "apiRapCache", - plugins: [ - new ExpirationPlugin({ - maxEntries: 100, - maxAgeSeconds: 60 * 60 * 4, // 4 Hours - }), - ], - }), -); - -// Cache API RAP response -registerRoute( - new RegExp("/api/weather.*"), - new NetworkFirst({ - cacheName: "apiWeatherCache", - plugins: [ - new ExpirationPlugin({ - maxEntries: 100, - maxAgeSeconds: 60 * 60 * 4, // 4 Hours - }), - ], - }), -); - -// Cache API TFR response -registerRoute( - new RegExp("/api/tfr.*"), - new NetworkFirst({ - cacheName: "tfrCache", - plugins: [ - new ExpirationPlugin({ - maxEntries: 100, - maxAgeSeconds: 60 * 60 * 4, // 4 Hours - }), - ], - }), -); - -// Cache API elevation response -registerRoute( - new RegExp("/api/pqs.*"), - new NetworkFirst({ - cacheName: "apiElevationCache", - plugins: [ - new ExpirationPlugin({ - maxEntries: 100, - maxAgeSeconds: 60 * 60 * 24 * 7, // 7 Days - }), - ], - }), -); - -// Cache backup API elevation response -registerRoute( - new RegExp("/api/googleelevation.*"), - new NetworkFirst({ - cacheName: "apiGoogleElevationCache", - plugins: [ - new ExpirationPlugin({ - maxEntries: 100, - maxAgeSeconds: 60 * 60 * 24 * 7, // 7 Days - }), - ], - }), -); - -// Cache aviation weather API response -registerRoute( - new RegExp("/api/aviationweather.*"), - new NetworkFirst({ - cacheName: "apiAviationWeatherCache", - plugins: [ - new ExpirationPlugin({ - maxEntries: 100, - maxAgeSeconds: 60 * 60 * 4, // 4 Hours - }), - ], - }), -); - -// Cache aviation alerts API response -registerRoute( - new RegExp("/api/aviationalerts.*"), - new NetworkFirst({ - cacheName: "apiAviationAlertsCache", - plugins: [ - new ExpirationPlugin({ - maxEntries: 100, - maxAgeSeconds: 60 * 60 * 4, // 4 Hours - }), - ], - }), -); - -// This allows the web app to trigger skipWaiting via -// registration.waiting.postMessage({type: 'SKIP_WAITING'}) -self.addEventListener("message", (event) => { - if (event.data && event.data.type === "SKIP_WAITING") { - self.skipWaiting(); - } -}); - -// Any other custom service worker logic can go here. diff --git a/vite.config.ts b/vite.config.ts index ca8fd54..e131701 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -21,10 +21,111 @@ export default defineConfig(() => { }), svgr(), VitePWA({ - strategies: "injectManifest", srcDir: "src", - filename: "service-worker.ts", registerType: "autoUpdate", + workbox: { + runtimeCaching: [ + { + handler: "CacheFirst", + urlPattern: /\/api\/position.*/, + options: { + cacheName: "apiPositionCache", + expiration: { + maxEntries: 100, + maxAgeSeconds: 60 * 60 * 24 * 7, // 7 Days + }, + }, + }, + { + handler: "NetworkFirst", + urlPattern: /\/api\/rap.*/, + options: { + cacheName: "apiRapCache", + expiration: { + maxEntries: 100, + maxAgeSeconds: 60 * 60 * 4, // 4 Hours + }, + }, + }, + { + handler: "NetworkFirst", + urlPattern: /\/api\/weather.*/, + options: { + cacheName: "apiWeatherCache", + expiration: { + maxEntries: 100, + maxAgeSeconds: 60 * 60 * 4, // 4 Hours + }, + }, + }, + { + handler: "NetworkFirst", + urlPattern: /\/api\/weather.*/, + options: { + cacheName: "apiWeatherCache", + expiration: { + maxEntries: 100, + maxAgeSeconds: 60 * 60 * 4, // 4 Hours + }, + }, + }, + { + handler: "NetworkFirst", + urlPattern: /\/api\/tfr.*/, + options: { + cacheName: "apiTfrCache", + expiration: { + maxEntries: 100, + maxAgeSeconds: 60 * 60 * 4, // 4 Hours + }, + }, + }, + { + handler: "NetworkFirst", + urlPattern: /\/api\/pqs.*/, + options: { + cacheName: "apiElevationCache", + expiration: { + maxEntries: 100, + maxAgeSeconds: 60 * 60 * 24 * 7, // 7 Days + }, + }, + }, + { + handler: "NetworkFirst", + urlPattern: /\/api\/googleelevation.*/, + options: { + cacheName: "apiGoogleElevationCache", + expiration: { + maxEntries: 100, + maxAgeSeconds: 60 * 60 * 24 * 7, // 7 Days + }, + }, + }, + { + handler: "NetworkFirst", + urlPattern: /\/api\/aviationweather.*/, + options: { + cacheName: "apiAviationWeatherCache", + expiration: { + maxEntries: 100, + maxAgeSeconds: 60 * 60 * 4, // 4 Hours + }, + }, + }, + { + handler: "NetworkFirst", + urlPattern: /\/api\/aviationalerts.*/, + options: { + cacheName: "apiAviationAlertsCache", + expiration: { + maxEntries: 100, + maxAgeSeconds: 60 * 60 * 4, // 4 Hours + }, + }, + }, + ], + }, manifest: { name: "PPG.report", short_name: "PPG.report",