chore: add service worker

Author: userquin

app/service-worker.ts

@@ -0,0 +1,97 @@
+import {
+  cleanupOutdatedCaches,
+  createHandlerBoundToURL,
+  precacheAndRoute,
+} from 'workbox-precaching'
+import { clientsClaim } from 'workbox-core'
+import { NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies'
+import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { CacheableResponsePlugin } from 'workbox-cacheable-response'
+import { ExpirationPlugin } from 'workbox-expiration'
+
+declare let self: ServiceWorkerGlobalScope
+
+const cacheNames = ['npmx-packages', 'npmx-packages-code-and-docs', 'npmx-vercel-proxies'] as const
+
+async function createRuntimeCaches() {
+  await Promise.all(cacheNames.map(c => caches.open(c)))
+}
+self.addEventListener('install', event => {
+  event.waitUntil(createRuntimeCaches())
+})
+
+self.skipWaiting()
+clientsClaim()
+
+cleanupOutdatedCaches()
+precacheAndRoute(self.__WB_MANIFEST, {
+  urlManipulation: ({ url }) => {
+    const urls: URL[] = []
+    // search use query params, we need to include here any page using query params
+    if (url.pathname.endsWith('_payload.json') || url.pathname.endsWith('/search')) {
+      const newUrl = new URL(url.href)
+      newUrl.search = ''
+      urls.push(newUrl)
+    }
+    return urls
+  },
+})
+
+// allow only fallback in dev: we don't want to cache anything
+let allowlist: undefined | RegExp[]
+if (import.meta.env.DEV) allowlist = [/^\/$/]
+
+// deny api and server page calls
+let denylist: undefined | RegExp[]
+if (import.meta.env.PROD) {
+  denylist = [
+    // search page
+    /^\/search$/,
+    // api calls
+    /^\/api\//,
+    /^\/oauth\//,
+    /^\/package\//,
+    /^\/package-code\//,
+    /^\/package-docs\//,
+    /^\/_v\//,
+    /^\/opensearch\.xml$/,
+    // exclude sw: if the user navigates to it, fallback to index.html
+    /^\/service-worker\.js$/,
+  ]
+
+  registerRoute(
+    ({ sameOrigin, url }) => sameOrigin && url.pathname.startsWith('/package/'),
+    new NetworkFirst({
+      cacheName: cacheNames[0],
+      plugins: [
+        new CacheableResponsePlugin({ statuses: [200] }),
+        new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 60 }),
+      ],
+    }),
+  )
+  registerRoute(
+    ({ sameOrigin, url }) =>
+      sameOrigin &&
+      (url.pathname.startsWith('/package-docs/') || url.pathname.startsWith('/package-code/')),
+    new StaleWhileRevalidate({
+      cacheName: cacheNames[1],
+      plugins: [
+        new CacheableResponsePlugin({ statuses: [200] }),
+        new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 365 * 24 * 60 * 60 }),
+      ],
+    }),
+  )
+  registerRoute(
+    ({ sameOrigin, url }) => sameOrigin && url.pathname.startsWith('/_v/'),
+    new NetworkFirst({
+      cacheName: cacheNames[1],
+      plugins: [
+        new CacheableResponsePlugin({ statuses: [200] }),
+        new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 60 }),
+      ],
+    }),
+  )
+}
+
+// to allow work offline
+registerRoute(new NavigationRoute(createHandlerBoundToURL('/'), { allowlist, denylist }))

nuxt.config.ts

@@ -199,21 +199,51 @@ export default defineNuxtConfig({
     },
   },
 
+  $test: {
+    pwa: {
+      disable: true,
+    },
+  },
+
   pwa: {
-    injectRegister: false,
+    registerType: 'autoUpdate',
+    strategies: 'injectManifest',
+    srcDir: '.',
+    filename: 'service-worker.ts',
     client: {
-      // Disable service worker
-      registerPlugin: false,
+      installPrompt: true,
+      periodicSyncForUpdates: 3_600, // Check for updates every hour
+    },
+    injectManifest: {
+      minify: process.env.VITE_DEV_PWA !== 'true',
+      enableWorkboxModulesLogs: process.env.VITE_DEV_PWA === 'true' ? true : undefined,
+      globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm}'],
+      globIgnores: ['manifest**.webmanifest'],
     },
     devOptions: {
-      enabled: true,
+      enabled: process.env.VITE_DEV_PWA === 'true',
+      type: 'module',
     },
     manifest: {
+      id: '/',
+      scope: '/',
+      start_url: '/',
       name: 'npmx',
       short_name: 'npmx',
       description: 'A fast, modern browser for the npm registry',
       theme_color: '#0a0a0a',
       background_color: '#0a0a0a',
+      orientation: 'portrait',
+      display: 'standalone',
+      display_override: ['window-controls-overlay'],
+      // categories: ['social', 'social networking', 'news'],
+      handle_links: 'preferred',
+      launch_handler: {
+        client_mode: ['navigate-existing', 'auto'],
+      },
+      edge_side_panel: {
+        preferred_width: 480,
+      },
       icons: [
         {
           src: 'pwa-64x64.png',

package.json

@@ -14,6 +14,7 @@
     "build:lunaria": "node ./lunaria/lunaria.ts",
     "build:test": "NODE_ENV=test pnpm build",
     "dev": "nuxt dev",
+    "dev:pwa": "VITE_DEV_PWA=true nuxt dev",
     "dev:docs": "pnpm run --filter npmx-docs dev --port=3001",
     "i18n:check": "node scripts/compare-translations.ts",
     "i18n:check:fix": "node scripts/compare-translations.ts --fix",
@@ -71,7 +72,7 @@
     "@unocss/preset-wind4": "66.6.0",
     "@upstash/redis": "1.36.1",
     "@vite-pwa/assets-generator": "1.0.2",
-    "@vite-pwa/nuxt": "1.1.0",
+    "@vite-pwa/nuxt": "1.1.1",
     "@voidzero-dev/vite-plus-core": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
     "@vueuse/core": "14.2.0",
     "@vueuse/integrations": "14.2.0",
@@ -105,7 +106,14 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
     "vue": "3.5.27",
-    "vue-data-ui": "3.14.9"
+    "vue-data-ui": "3.14.9",
+    "workbox-build": "7.4.0",
+    "workbox-cacheable-response": "7.4.0",
+    "workbox-core": "7.4.0",
+    "workbox-expiration": "7.4.0",
+    "workbox-precaching": "7.4.0",
+    "workbox-routing": "7.4.0",
+    "workbox-strategies": "7.4.0"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.1.4",