Merge pull request #2249 from graphcommerce-org/fix/servist

Move service worker to serwist

docs/framework/caching.md

@@ -152,22 +152,33 @@ cache.
 
 The service worker caches:
 
-- [static fonts](https://github.com/shadowwalker/next-pwa/blob/master/cache.js#L28)
-- [static images](https://github.com/shadowwalker/next-pwa/blob/master/cache.js#L39)
-- [\_next/image](https://github.com/shadowwalker/next-pwa/blob/master/cache.js#L50)
-- [js](https://github.com/shadowwalker/next-pwa/blob/master/cache.js#L85)
+- [static fonts](https://github.com/serwist/serwist/blob/main/packages/next/src/index.worker.ts#L27):
+  Google fonts and webfonts with StaleWhileRevalidate strategy
+- [static images](https://github.com/serwist/serwist/blob/main/packages/next/src/index.worker.ts#L64):
+  jpg, jpeg, gif, png, svg, ico, webp with StaleWhileRevalidate strategy
+- [\_next/image](https://github.com/graphcommerce-org/graphcommerce/blob/main/packages/service-worker/runtimeCaching.ts#L6):
+  Custom implementation with StaleWhileRevalidate and nextImagePlugin
+- js and css files: Only for files outside of `_next/static` with
+  StaleWhileRevalidate strategy
+
+Notable differences from previous implementation:
+
+- All `_next/static` files (js, css) are excluded from runtime caching as they
+  are handled by the precache mechanism
+- Cross-origin requests use NetworkOnly strategy instead of NetworkFirst
+- Image caching has been optimized with custom configuration for better
+  performance
 
 Note: When a new deployment is made, the service worker is updated. This means
 that all previous caches are cleared and new caches are created.
 
 It does not cache:
 
-- [\_next/data](https://github.com/shadowwalker/next-pwa/blob/master/cache.js#L107):
-  Although it looks like it does, the regex is actually wrong and it does not
-  cache anything.
-- [pages](https://github.com/shadowwalker/next-pwa/blob/master/cache.js#L152)
+- [\_next/data](https://github.com/ducanh-99/serwist/blob/main/packages/next/src/index.worker.ts#L137):
+  Uses NetworkFirst strategy to ensure fresh data
+- [pages](https://github.com/ducanh-99/serwist/blob/main/packages/next/src/index.worker.ts#L152):
   Uses NetworkFirst strategy, which means it will always try to fetch the
-  resource from the network first, and only if that fails it will use the cache.
+  resource from the network first, and only if that fails it will use the cache
 
 ## Cache invalidation limitations
 

docs/upgrading/graphcommerce-8-to-9.md

@@ -5,6 +5,9 @@ steps. Please follow the regular [upgrade steps first](./readme.md).
 
 1. ReactPlugin TypeScript definition is removed.
 2. Locales now require an explicit configuration.
+3. `@graphcommerce/graphcms-ui` is now `@graphcommerce/hygraph-ui`
+4. `@ducanh2912/next-pwa` replaced by `serwist`
+5. `next-sitemap` replaced by custom implementation
 
 ## 1. ReactPlugin TypeScript definition is removed
 
@@ -56,3 +59,14 @@ const config = {
 3. `@graphcommerce/graphcms-ui` is now `@graphcommerce/hygraph-ui`
 
 Replace all `@graphcommerce/graphcms-ui` with `@graphcommerce/hygraph-ui`.
+
+4. `@ducanh2912/next-pwa` replaced by `serwist`
+
+Any customizations made to the service worker should
+
+5. `next-sitemap` replaced by custom implementation.
+
+- pages/robots.txt.tsx
+- pages/sitemap/categories.xml.tsx
+- pages/sitemap/content.xml.tsx
+- pages/sitemap/products.xml.tsx

examples/magento-graphcms/lib/sw.ts

@@ -0,0 +1,23 @@
+import {
+  runtimeCaching,
+  PrecacheEntry,
+  Serwist,
+  productionCaching,
+} from '@graphcommerce/service-worker'
+
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+declare const self: ServiceWorkerGlobalScope & {
+  __SW_MANIFEST: (PrecacheEntry | string)[] | undefined
+}
+
+const serwist = new Serwist({
+  // eslint-disable-next-line no-underscore-dangle
+  precacheEntries: self.__SW_MANIFEST,
+  skipWaiting: true,
+  clientsClaim: true,
+  navigationPreload: true,
+  runtimeCaching: productionCaching,
+  disableDevLogs: true,
+})
+
+serwist.addEventListeners()

examples/magento-graphcms/next.config.mjs

@@ -0,0 +1,28 @@
+import { withGraphCommerce } from '@graphcommerce/next-config'
+import withSerwistInit from '@serwist/next'
+import dotenv from 'dotenv'
+
+dotenv.config()
+
+const withPWA = withSerwistInit({
+  // disable: process.env.NODE_ENV === 'development',
+  swSrc: 'lib/sw.ts',
+  swDest: 'public/sw.js',
+  exclude: [/sitemap/, /robots/, 'sw.js'],
+})
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  onDemandEntries: {
+    maxInactiveAge: 1000 * 60 * 10,
+    pagesBufferLength: 10,
+  },
+  images: {
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
+
+export default withGraphCommerce(withPWA(nextConfig))

examples/magento-graphcms/package.json

@@ -22,7 +22,6 @@
   },
   "dependencies": {
     "@apollo/client": "~3.11.10",
-    "@ducanh2912/next-pwa": "9.7.2",
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "11.12.0",
     "@emotion/server": "^11.11.0",
@@ -79,15 +78,17 @@
     "@graphcommerce/next-config": "9.0.0-canary.107",
     "@graphcommerce/next-ui": "9.0.0-canary.107",
     "@graphcommerce/react-hook-form": "9.0.0-canary.107",
+    "@graphcommerce/service-worker": "9.0.0-canary.107",
     "@lingui/conf": "4.14.0",
     "@lingui/core": "4.14.0",
     "@lingui/macro": "4.14.0",
     "@lingui/react": "4.14.0",
     "@mui/lab": "5.0.0-alpha.173",
-    "@mui/material": "5.16.7",
-    "@mui/utils": "^5.16.6",
+    "@mui/material": "5.16.8",
+    "@mui/utils": "^5.16.8",
     "@next/env": "15.0.3",
-    "@parcel/watcher": "^2.4.1",
+    "@parcel/watcher": "^2.5.0",
+    "@serwist/next": "^9.0.10",
     "@unts/patch-package": "^8.0.0",
     "concurrently": "8.2.2",
     "cross-env": "^7.0.3",
@@ -108,14 +109,14 @@
     "@graphcommerce/prettier-config-pwa": "9.0.0-canary.107",
     "@graphcommerce/typescript-config-pwa": "9.0.0-canary.107",
     "@lingui/cli": "4.14.0",
-    "@playwright/test": "1.47.2",
-    "@testing-library/react": "^14.3.1",
-    "@types/node": "^18.19.66",
+    "@playwright/test": "1.49.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/node": "^18.19.67",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-is": "^18.3.0",
     "babel-plugin-macros": "^3.1.0",
-    "eslint": "^8",
+    "eslint": "^8.57.1",
     "prettier": "^3",
     "type-fest": "^4.26.1",
     "typescript": "5.7.2"

examples/magento-graphcms/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": ["DOM", "DOM.Iterable", "ESNext", "WebWorker"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -16,7 +16,8 @@
     "jsx": "preserve",
     "jsxImportSource": "@emotion/react",
     "incremental": true,
-    "moduleSuffixes": [".interceptor", ""]
+    "moduleSuffixes": [".interceptor", ""],
+    "types": ["@serwist/next/typings"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

examples/magento-open-source/components/ProductListItems/productListRenderer.tsx

@@ -73,9 +73,7 @@ export const productListRenderer: ProductListItemRenderer = {
       topRight={<ProductWishlistChip {...props} />}
     />
   ),
-  // // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // // @ts-ignore GiftCardProduct is only available in Commerce
-  // GiftCardProduct: (props) => (
-  //   <ProductListItem {...props} aspectRatio={[1, 1]} />
-  // ),
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore GiftCardProduct is only available in Commerce
+  GiftCardProduct: (props) => <ProductListItem {...props} aspectRatio={[1, 1]} />,
 }

examples/magento-open-source/lib/sw.ts

@@ -0,0 +1,18 @@
+import type { PrecacheEntry, SerwistGlobalConfig } from '@graphcommerce/service-worker'
+import { runtimeCaching, Serwist } from '@graphcommerce/service-worker'
+
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+declare const self: SerwistGlobalConfig & {
+  __SW_MANIFEST: (PrecacheEntry | string)[] | undefined
+}
+
+const serwist = new Serwist({
+  // eslint-disable-next-line no-underscore-dangle
+  precacheEntries: self.__SW_MANIFEST,
+  skipWaiting: true,
+  clientsClaim: true,
+  navigationPreload: true,
+  runtimeCaching,
+})
+
+serwist.addEventListeners()