Nuxt 3 的零配置 PWA 插件
🚀 功能
- 📖 文档和指南
- 👌 零配置：针对常见用例提供合理的内置默认配置
- 🔩 可扩展：提供完全自定义插件行为的能力
- 🦾 类型安全：使用 TypeScript 编写
- 🔌 离线支持：使用 Workbox 生成具有离线支持的服务工作者
- ⚡ 完全可摇树：自动注入 Web 应用清单
- 💬 提示新内容：内置支持 Vanilla JavaScript、Vue 3、React、Svelte、SolidJS 和 Preact
- ⚙️ Stale-while-revalidate：在有新内容可用时自动重新加载
- ✨ 静态资产处理：配置静态资产以实现离线支持
- 🐞 开发支持：在开发应用程序时调试自定义服务工作者逻辑
- 🛠️ 多功能：与元框架集成：îles、SvelteKit、VitePress、Astro、Nuxt 3 和 Remix
- 💥 PWA 资产生成器：通过单个命令和单个源图像生成所有 PWA 资产
- 🚀 PWA 资产集成：在应用程序中动态提供、生成和注入 PWA 资产
📦 安装
从 v0.4.0 开始，
@vite-pwa/nuxt需要 Vite 5 和 Nuxt 3.9.0+。
对于旧版本，
@vite-pwa/nuxt需要 Vite 3.2.0+ 和 Nuxt 3.0.0+。
npx nuxi@latest module add @vite-pwa/nuxt
🦄 使用方法
将 @vite-pwa/nuxt 模块添加到 nuxt.config.ts 中并进行配置
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: [
'@vite-pwa/nuxt'
],
pwa: {
/* PWA options */
}
})
阅读 📖 文档 以获取有关如何配置和使用此插件的完整指南。
⚡️ 示例
启动开发服务器后，需要停止它，然后才能看到 PWA 运行，请执行以下操作
nr dev:preview:build：Nuxt 构建命令 + 启动服务器nr dev:preview:generate：Nuxt 生成命令 + 启动服务器
| 示例 | 源代码 | 游乐场 |
|---|---|---|
自动更新 PWA | GitHub |
 |
👀 完全配置
查看类型声明 src/types.ts 和以下链接以获取更多详细信息。
📄 许可证
MIT 许可证 © 2023-PRESENT Anthony Fu