適用於 Nuxt 3 的零配置 PWA 外掛
🚀 功能
- 📖 文件和指南
- 👌 零配置:針對常見用例提供合理的內建預設配置
- 🔩 可擴充套件:充分暴露自定義外掛行為的能力
- 🦾 強型別:使用 TypeScript 編寫
- 🔌 離線支援:生成支援離線的 Service Worker(透過 Workbox)
- ⚡ 完全可搖樹:自動注入 Web 應用清單
- 💬 新內容提示:內建支援 Vanilla JavaScript、Vue 3、React、Svelte、SolidJS 和 Preact
- ⚙️ 先舊後新 (Stale-while-revalidate):當有新內容可用時自動重新載入
- ✨ 靜態資產處理:配置靜態資產以實現離線支援
- 🐞 開發支援:在開發應用程式時除錯自定義 Service Worker 邏輯
- 🛠️ 多功能:與元框架整合:î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