nuxt3 加入Service Worker(复制粘贴即可)

1、安装workbox-core workbox-precaching workbox-routing

pnpm i -D workbox-core workbox-precaching workbox-routing

2、新建service-worker/sw.ts

import { clientsClaim } from 'workbox-core'
import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute, NavigationRoute } from 'workbox-routing';

self.skipWaiting();
clientsClaim();
precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();

// 如果你不缓存任何内容，你可以删除此代码，或者保留它并继续运行
try {
    const handler = createHandlerBoundToURL('/');
    const route = new NavigationRoute(handler);
    registerRoute(route);
} catch (error) {
    console.warn('Error while registering cache route', { error });
}

//业务代码

3、安装@vite-pwa/nuxt, 在 nuxt.config.ts 中将 pwa：strategies 属性更改为 injectManifest

   
  pwa: {
    mode: 'development',
    disable: false,
    scope: '/',
    srcDir: './service-worker',
    filename: 'sw.ts',
    strategies: 'injectManifest',
    injectRegister: false,
    includeManifestIcons: false,
    manifest: false,
    injectManifest: {
      globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm}'],
    },
    devOptions: {
      enabled: true,
      type: 'module',
    },
  },

ps: 以上方法来自@vite-pwa/nuxt的issues, 或源码中的playground