nuxt密碼模組

️已棄用️

Nuxt 3 由 Vite 提供支持，如今 Vite 自己擁有一個令人驚嘆的 PWA 插件，並且有 Nuxt 支援。

隨著更好的解決方案的出現，這就是為什麼該模組將不再維護的原因。

考慮使用 Vite PWA for Nuxt 3 和 Vite PWA Assets Generator 來代替。

作為主要維護者（@kevinmarrec），我要感謝所有信任這個專案的貢獻者和使用者。

Nuxt 3 PWA

Nuxt 3 的零配置 PWA 解決方案

官方模組狀態

該模組是非官方的，但旨在成為官方 Nuxt PWA 模組的下一個迭代。

設定

將@kevinmarrec/nuxt-pwa依賴項新增至您的專案：

 # Using Yarn
yarn add -D @kevinmarrec/nuxt-pwa
# Using NPM
npm install -D @kevinmarrec/nuxt-pwa
# Using PNPM
pnpm install -D @kevinmarrec/nuxt-pwa

編輯nuxt.config.ts檔案以新增 PWA 模組：

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ]
} ) 

配置

由於此模組嘗試與 Nuxt 2 PWA 相容以方便遷移，因此您仍然可以使用 https://pwa.nuxtjs.org 文件來取得大多數功能。

如果您希望您的應用程式可在開發中安裝，則需要在nuxt.config中將pwa.workbox.enabled選項設為true ，因為預設情況下它僅在生產中啟用：

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ] ,
  pwa : {
    workbox : {
      enabled : true
    }
  }
} )

如果您需要自訂 Workbox Service Worker，您可以使用pwa.workbox.templatePath選項指定 Workbox 的路徑，您可以使用~和@等路徑別名。

 export default defineNuxtConfig ( {
  modules : [
    '@kevinmarrec/nuxt-pwa'
  ] ,
  pwa : {
    workbox : {
      templatePath : '~/path/to/your/worker.js'
    }
  }
} )

要自訂它，您可以在此處查看此模組的預設設置，以及 Nuxt 2 預設設定和 Workbox 文件。

可組合項

usePWAIcon（大小、選項）

您可以使用usePWAIcon來取得 PWA 的圖示 url，並在您的應用程式中使用它。

 const icon = usePWAIcon ( 512 ) // /assets/icons/512x512.png
const icon = usePWAIcon ( 512 , { maskable : true } ) // /assets/icons/512x512.maskable.png

或者，您可以使用 Typescript 使用string而不是number大小參數來利用可用大小：

發展

確保安裝相依性：

pnpm install

在 http://localhost:3000 上啟動開發伺服器：

pnpm dev

例子

在 http://localhost:3000 上建置並啟動範例：

pnpm example:build
pnpm example:start

執照

用❤️製作

根據麻省理工學院許可發布。