@vite-pwa/nuxt

Nuxt 3 的零配置 PWA 外掛程式

🚀 功能

• 📖 文件與指南
• 👌 零配置：針對常見使用案例的合理內建預設配置
• 🔩 可擴展：完整公開自訂外掛程式行為的能力
• 🦾 強型別：以 TypeScript 編寫
• 🔌 離線支援：產生具有離線支援的 Service Worker（透過 Workbox）
• ⚡ 完全可 tree-shake：自動注入 Web App Manifest
• 💬 提示新內容：內建支援 Vanilla JavaScript、Vue 3、React、Svelte、SolidJS 和 Preact
• ⚙️ Stale-while-revalidate：當有新內容可用時自動重新載入
• ✨ 靜態資源處理：為離線支援配置靜態資源
• 🐞 開發支援：在開發應用程式時偵錯您的自訂 Service Worker 邏輯
• 🛠️ 多功能：與 meta 框架整合：î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 和以下連結，以取得更多詳細資訊。

• Web app manifests
• Workbox

📄 授權

MIT 授權 © 2023-至今 Anthony Fu