@graphcommerce/service-worker 9.0.0-canary.108

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @graphcommerce/service-worker
+
+## 9.0.0-canary.108
+
+### Patch Changes
+
+- [#2439](https://github.com/graphcommerce-org/graphcommerce/pull/2439) [`6061226`](https://github.com/graphcommerce-org/graphcommerce/commit/60612265466e4c508a2d3f478ff679251e7819de) - Moved to serwist for service workers ([@paales](https://github.com/paales))

package/index.ts

@@ -0,0 +1,2 @@
+export * from 'serwist'
+export * from './runtimeCaching'

package/nextImagePlugin.ts

@@ -0,0 +1,69 @@
+import { filterNonNullableKeys } from '@graphcommerce/next-ui/RenderType/filterNonNullableKeys'
+import type { SerwistPlugin } from 'serwist'
+
+function extractImageProps(request: Request): {
+  request: Request
+  url?: string | null
+  w?: number | null
+  q?: number | null
+} {
+  const url = new URL(request.url)
+  return {
+    request,
+    url: url.searchParams.get('url'),
+    w: parseInt(url.searchParams.get('w') ?? '0', 10),
+    q: parseInt(url.searchParams.get('q') ?? '0', 10),
+  }
+}
+
+async function findRelatedImages(request: Request, cacheName: string) {
+  const { w, url, q } = extractImageProps(request)
+  if (!url) return undefined
+  if (!w) return undefined
+  if (!q) return undefined
+
+  const cache = await caches.open(cacheName)
+  const requests = (await cache.keys()).map(extractImageProps)
+  const cached = filterNonNullableKeys(requests, ['w', 'url', 'q'])
+    .filter((c) => c.url === url && c.q === q)
+    .sort((a, b) => a.w - b.w)
+  return { w, url, q, cached }
+}
+
+export function nextImagePlugin(cacheName: string): SerwistPlugin {
+  return {
+    // cacheDidUpdate: async ({ request }) => {
+    //   const result = await findRelatedImages(request, cacheName)
+    //   if (!result || result.cached.length <= 1) return
+
+    //   console.log(
+    //     result.cached.map((c) => c.request.url),
+    //     'are the cached versions',
+    //     result.url,
+    //     'should be the same as',
+    //     request.url,
+    //   )
+    //   const cache = await caches.open(cacheName)
+    //   const toDelete = result.cached.slice(0, -1).map(async (c) => {
+    //     await cache.delete(c.request)
+    //     return c.request.url
+    //   })
+    //   console.log('Deleted smaller images from cache', await Promise.all(toDelete))
+    // },
+    cacheKeyWillBeUsed: async ({ mode, request }) => {
+      if (mode !== 'read') return request
+
+      const result = await findRelatedImages(request, cacheName)
+      if (!result) return request
+
+      const found = result.cached.find((c) => c.w > result.w)
+
+      if (found) {
+        // console.log('Same image, but bigger found in the cache, using that one', found.request.url)
+        return found.request
+      }
+
+      return request
+    },
+  }
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@graphcommerce/service-worker",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "9.0.0-canary.108",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "dependencies": {
+    "@serwist/next": "^9.0.10",
+    "serwist": "^9.0.10"
+  },
+  "peerDependencies": {
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.108",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.108",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.108",
+    "next": "*",
+    "webpack": "^5.0.0"
+  }
+}

package/runtimeCaching.ts

@@ -0,0 +1,197 @@
+import { PAGES_CACHE_NAME } from '@serwist/next/worker'
+import type { RuntimeCaching } from 'serwist'
+import {
+  CacheFirst,
+  ExpirationPlugin,
+  NetworkFirst,
+  NetworkOnly,
+  RangeRequestsPlugin,
+  StaleWhileRevalidate,
+} from 'serwist'
+import { nextImagePlugin } from './nextImagePlugin'
+
+const devCaching = [{ matcher: /.*/i, handler: new NetworkOnly() }]
+
+const handlers: RuntimeCaching[] = [
+  {
+    matcher: /\/_next\/image\?url=.+$/i,
+    handler: new StaleWhileRevalidate({
+      cacheName: 'next-image',
+      plugins: [
+        nextImagePlugin('next-image'),
+        new ExpirationPlugin({
+          maxEntries: 1000,
+          maxAgeSeconds: 168 * 60 * 60,
+          matchOptions: { ignoreVary: true },
+          purgeOnQuotaError: true,
+          maxAgeFrom: 'last-used',
+        }),
+      ],
+    }),
+  },
+  {
+    matcher: /\/_next\/data\/[^/]+\/.+\.json(\?.*)?$/i,
+    handler: new NetworkFirst({
+      cacheName: 'next-data',
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60,
+          maxAgeFrom: 'last-used',
+        }),
+      ],
+    }),
+  },
+  {
+    matcher: ({ sameOrigin, url: { pathname } }) => sameOrigin && pathname.startsWith('/api/'),
+    method: 'GET',
+    handler: new NetworkFirst({
+      cacheName: 'apis',
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 16,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          maxAgeFrom: 'last-used',
+        }),
+      ],
+      networkTimeoutSeconds: 10, // fallback to cache if API does not response within 10 seconds
+    }),
+  },
+  {
+    matcher: ({ request, url: { pathname }, sameOrigin }) =>
+      request.headers.get('RSC') === '1' &&
+      request.headers.get('Next-Router-Prefetch') === '1' &&
+      sameOrigin &&
+      !pathname.startsWith('/api/'),
+    handler: new NetworkFirst({
+      cacheName: PAGES_CACHE_NAME.rscPrefetch,
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
+    }),
+  },
+  {
+    matcher: ({ request, url: { pathname }, sameOrigin }) =>
+      request.headers.get('RSC') === '1' && sameOrigin && !pathname.startsWith('/api/'),
+    handler: new NetworkFirst({
+      cacheName: PAGES_CACHE_NAME.rsc,
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
+    }),
+  },
+  {
+    matcher: ({ request, url: { pathname }, sameOrigin }) =>
+      (!request.headers.get('Content-Type') ||
+        request.headers.get('Content-Type')?.includes('text/html')) &&
+      sameOrigin &&
+      !pathname.startsWith('/api/'),
+    handler: new NetworkFirst({
+      cacheName: PAGES_CACHE_NAME.html,
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+        }),
+      ],
+    }),
+  },
+
+  {
+    matcher: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
+    handler: new StaleWhileRevalidate({
+      cacheName: 'runtime-font',
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 4,
+          maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+          maxAgeFrom: 'last-used',
+        }),
+      ],
+    }),
+  },
+  {
+    matcher: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
+    handler: new StaleWhileRevalidate({
+      cacheName: 'runtime-image',
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 64,
+          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
+          maxAgeFrom: 'last-used',
+        }),
+      ],
+    }),
+  },
+  {
+    matcher: /\.(?:mp3|wav|ogg)$/i,
+    handler: new CacheFirst({
+      cacheName: 'runtime-audio',
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          maxAgeFrom: 'last-used',
+        }),
+        new RangeRequestsPlugin(),
+      ],
+    }),
+  },
+  {
+    matcher: /\.(?:mp4|webm)$/i,
+    handler: new CacheFirst({
+      cacheName: 'runtime-video',
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          maxAgeFrom: 'last-used',
+        }),
+        new RangeRequestsPlugin(),
+      ],
+    }),
+  },
+  {
+    matcher: ({ url: { pathname }, sameOrigin }) =>
+      /\.(?:js)$/i.test(pathname) && !pathname.includes('/_next/static/') && sameOrigin,
+    handler: new StaleWhileRevalidate({
+      cacheName: 'runtime-js',
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 48,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          maxAgeFrom: 'last-used',
+        }),
+      ],
+    }),
+  },
+  {
+    matcher: ({ url: { pathname }, sameOrigin }) =>
+      /\.(?:css)$/i.test(pathname) && !pathname.includes('/_next/static/') && sameOrigin,
+    handler: new StaleWhileRevalidate({
+      cacheName: 'runtime-css',
+      plugins: [
+        new ExpirationPlugin({
+          maxEntries: 32,
+          maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          maxAgeFrom: 'last-used',
+        }),
+      ],
+    }),
+  },
+  {
+    matcher: ({ sameOrigin }) => !sameOrigin,
+    handler: new NetworkOnly(),
+  },
+]
+
+export const productionCaching = handlers
+
+export const runtimeCaching: RuntimeCaching[] =
+  process.env.NODE_ENV !== 'production' ? devCaching : productionCaching

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json",
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ESNext", "WebWorker"],
+  },
+}