nuxt PWモジュール

️非推奨️

Nuxt 3 は、Nuxt をサポートする独自の素晴らしい PWA プラグインを備えた Vite を利用しています。

より良いソリューションが登場したため、このモジュールは今後メンテナンスされなくなります。

代わりに、Vite PWA Assets Generator を備えた Nuxt 3 用 Vite PWA の使用を検討してください。

メインメンテナー (@kevinmarrec) として、このプロジェクトを信頼してくれたすべての貢献者とユーザーに感謝したいと思います。

ナクスト 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
    }
  }
} )

カスタムのワークボックス サービス ワーカーが必要な場合は、 pwa.workbox.templatePathオプションを使用してワーカーへのパスを指定できます。 ~や@などのパス エイリアスを使用できます。

 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

あるいは、 numberサイズ パラメータの代わりにstringを使用して、Typescript で利用可能なサイズを利用することもできます。

発達

依存関係を必ずインストールしてください。

pnpm install

http://localhost:3000 で開発サーバーを起動します。

pnpm dev

例

http://localhost:3000 で例をビルドして開始します。

pnpm example:build
pnpm example:start

ライセンス

❤️で作りました

MIT ライセンスに基づいて公開されています。