新内容刷新提示

Prompt for update for new content dialog image with the update and cancel button

插件配置

因为这是 registerType 插件选项的默认行为，你不需要配置它

清理过期缓存

service worker 会把你所有的应用资源存储在浏览器缓存(或一组缓存)中。每次你对应用进行修改并重新构建时，service worker 也会被重新构建，包括在它的预缓存清单中所有新修改的资产，这些资产的版本也会发生变化(所有被修改的资产都会有一个新版本)。没有被修改过的资产也会被包含在 service worker 的预缓存清单中，但它们的修订版本不会改变。

预缓存清单条目修改

预缓存清单条目的修订只是资产内容的哈希 MD5 ，如果资产没有被修改，那么计算出来的哈希将始终相同

当浏览器检测并安装新版本的应用程序时，它将在缓存中存储所有新资产和旧资产。要删除旧的资产(先前不再需要的版本)，您必须在插件配置的workbox条目中配置一个选项。

当使用 generateSW 策略时，无需配置，插件会默认激活

我们强烈建议您不要停用该选项。如果你却是想要禁用，可以在插件配置中使用以下代码来禁用它:

import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      workbox: {
        cleanupOutdatedCaches: false,
      },
    }),
  ],
});

Inject Manifest Source Map 新选项自 v0.18.0+

信息

从 v0.18.0+开始，你可以在 injectManifest 配置选项中使用 minify、sourcemap 和enableWorkboxModulesLogs，查看 New Vite Build 部分了解更多详情。

由于您正在构建自己的 service worker，这个插件将使用 Vite 的 build.sourcemap 配置选项，默认值为 false 来生成源码映射

如果您想为 service worker 生成源码映射，则需要为整个应用程序生成源码映射

Generate SW Source Map

从插件版本 0.11.2 开始，service worker 的源码映射将不会被生成，因为它使用了 vite 配置选项build.sourcemap来构建，默认情况下为 false

当 vite 的build.sourcemap配置选项为true、'inline'或'hidden'时，并且你没有配置workbox.sourcemap选项，service worker 的源码映射将被生成。如果你配置了workbox.sourcemap选项，插件将不会改变该值。

如果你想生成 service worker 的源码映射，你可以使用以下代码

import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      workbox: {
        sourcemap: true,
      },
    }),
  ],
});

导入虚拟模块

您必须在 main.ts 或 main.js 文件中包含以下代码:

import { registerSW } from 'virtual:pwa-register';

const updateSW = registerSW({
  onNeedRefresh() {},
  onOfflineReady() {},
});

你需要:

在onNeedRefresh方法中向用户显示带有刷新和取消按钮的提示。
在onOfflineReady 方法中展示一个准备好离线工作带有确认按钮提示给用户。

当 onNeedRefresh 被调用，用户点击刷新按钮，然后会调用 updateSW（） 函数;页面将重新加载，并提供最新内容。

无论如何，当用户分别在onNeedRefresh或onOfflineReady情况下单击取消或确认按钮时，关闭相应的显示提示。

SSR/SSG

如果你使用SSR/SSG, 你需要导入 virtual:pwa-register 模块使用动态导入并且检查 window 是否 undefined.

你可以在src/pwa.ts 模块注册 service worker:

import { registerSW } from 'virtual:pwa-register';

registerSW({
  /* ... */
});

然后从 main.ts 中导入它:

if (typeof window !== 'undefined') import('./pwa');

更多信息请查看常见问题解答

新内容刷新提示 ​

插件配置 ​

清理过期缓存 ​

Inject Manifest Source Map 新选项 自 v0.18.0+ ​

Generate SW Source Map ​

导入虚拟模块 ​

SSR/SSG ​