vite-plugin-pwa

<p align='center'> <img src='https://yellow-cdn.veclightyear.com/835a84d5/ed94880e-14ae-4a7f-a58f-8dd551060920.svg' alt="vite-plugin-pwa - 零配置 PWA Vite 插件"><br> 零配置、框架无关的 Vite PWA 插件 </p> <p align='center'> <a href='https://www.npmjs.com/package/vite-plugin-pwa' target="__blank"> <img src='https://img.shields.io/npm/v/vite-plugin-pwa?color=33A6B8&label=' alt="NPM 版本"> </a> <a href="https://www.npmjs.com/package/vite-plugin-pwa" target="__blank"> <img alt="NPM 下载量" src="https://img.shields.io/npm/dm/vite-plugin-pwa?color=476582&label="> </a> <a href="https://vite-pwa-org.netlify.app/" target="__blank"> <img src="https://img.shields.io/static/v1?label=&message=文档%20%26%20指南&color=2e859c" alt="文档 & 指南"> </a> <br> <a href="https://github.com/antfu/vite-plugin-pwa" target="__blank"> <img alt="GitHub 星标" src="https://img.shields.io/github/stars/antfu/vite-plugin-pwa?style=social"> </a> </p> <br> <p align="center"> <a href="https://yellow-cdn.veclightyear.com/835a84d5/9b2ddc3a-0966-4e44-b38e-bb4d59190e86.svg"> <img src='https://yellow-cdn.veclightyear.com/835a84d5/9b2ddc3a-0966-4e44-b38e-bb4d59190e86.svg'/> </a> </p>

🚀 特性

• 📖 文档 & 指南
• 👌 零配置：为常见用例提供合理的内置默认配置
• 🔩 可扩展：完全暴露插件行为的自定义能力
• 🦾 类型强大：使用 TypeScript 编写
• 🔌 离线支持：生成具有离线支持的 Service Worker（通过 Workbox）
• ⚡ 完全可摇树优化：自动注入 Web App Manifest
• 💬 新内容提示：内置支持原生 JavaScript、Vue 3、React、Svelte、SolidJS 和 Preact
• ⚙️ Stale-while-revalidate：新内容可用时自动重新加载
• ✨ 静态资源处理：配置静态资源以支持离线使用
• 🐞 开发支持：在开发应用程序时调试自定义 Service Worker 逻辑
• 🛠️ 多功能：与元框架集成：îles、SvelteKit、VitePress、Astro、Nuxt 3 和 Remix
• 💥 PWA 资源生成器：通过单个命令和单一源图像生成所有 PWA 资源
• 🚀 PWA 资源集成：在应用程序中即时提供、生成和注入 PWA 资源

📦 安装

从 v0.17 开始，vite-plugin-pwa 需要 Vite 5。

从 v0.16 开始，vite-plugin-pwa 需要 Node 16 或更高版本：workbox v7 需要 Node 16 或更高版本。

从 v0.13 开始，vite-plugin-pwa 需要 Vite 3.1 或更高版本。

npm i vite-plugin-pwa -D 

# yarn 
yarn add vite-plugin-pwa -D

# pnpm 
pnpm add vite-plugin-pwa -D

🦄 使用

将 VitePWA 插件添加到 vite.config.js / vite.config.ts 并进行配置：

// vite.config.js / vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA()
  ]
}

阅读📖 文档获取有关如何配置和使用此插件的完整指南。

查看客户端类型声明 client.d.ts 以了解内置框架支持。

👀 完整配置

查看类型声明 src/types.ts 和以下链接以获取更多详细信息。

• Web 应用程序清单
• Workbox

📄 许可证

MIT 许可证 © 2020-现在 Anthony Fu