@vite-pwa/nuxt

Nuxt 3 的零配置 PWA 插件

🚀 功能特色

• 📖 文件與指南
• 👌 零配置：針對常見使用情境的合理內建預設配置
• 🔩 可擴展：完全開放自訂插件行為的能力
• 🦾 強類型：使用 TypeScript 編寫
• 🔌 離線支援：產生具備離線支援的 service worker (透過 Workbox)
• ⚡ 完整 tree shaking：自動注入 Web App Manifest
• 💬 新內容提示：內建支援 Vanilla JavaScript、Vue 3、React、Svelte、SolidJS 和 Preact
• ⚙️ Stale-while-revalidate：當新內容可用時自動重新載入
• ✨ 靜態資源處理：設定靜態資源以支援離線
• 🐞 開發支援：在您開發應用程式時偵錯您的自訂 service worker 邏輯
• 🛠️ 多功能：與 meta frameworks 整合：î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