nuxt pw Modul

️ VERALTET ️

Nuxt 3 wird von Vite betrieben, das heute über ein eigenes erstaunliches PWA-Plugin mit Nuxt-Unterstützung verfügt.

Da sich eine bessere Lösung herauskristallisiert hat, wird dieses Modul nicht mehr gepflegt.

Erwägen Sie stattdessen die Verwendung von Vite PWA für Nuxt 3 mit Vite PWA Assets Generator.

Als Hauptbetreuer (@kevinmarrec) möchte ich allen Mitwirkenden und Benutzern danken, die diesem Projekt vertraut haben.

Nuxt 3 PWA

Null-Konfigurations-PWA-Lösung für Nuxt 3

Status des offiziellen Moduls

Dieses Modul ist inoffiziell , soll aber die nächste Iteration des offiziellen Nuxt PWA-Moduls werden.

Aufstellen

Fügen Sie Ihrem Projekt die @kevinmarrec/nuxt-pwa Abhängigkeit hinzu:

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

Bearbeiten Sie Ihre nuxt.config.ts Datei, um das PWA-Modul hinzuzufügen:

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

Konfiguration

Da dieses Modul versucht, für eine einfache Migration mit Nuxt 2 PWA kompatibel zu sein, können Sie für die meisten Funktionen weiterhin die Dokumentation https://pwa.nuxtjs.org verwenden.

Wenn Ihre App in der Entwicklung installierbar sein soll, müssen Sie die Option pwa.workbox.enabled in Ihrer nuxt.config auf true setzen, da sie standardmäßig nur für die Produktion aktiviert ist:

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

Wenn Sie einen benutzerdefinierten Workbox-Service-Worker benötigen, können Sie den Pfad zu Ihrem Worker mit der Option pwa.workbox.templatePath angeben. Sie können Pfadaliase wie ~ und @ verwenden.

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

Um es anzupassen, können Sie hier die Standardeinstellungen dieses Moduls sowie die Nuxt 2-Standardeinstellungen und die Workbox-Dokumentation überprüfen.

Composables

usePWAIcon (Größe, Optionen)

Mit usePWAIcon können Sie Symbol-URLs Ihrer PWA abrufen und in Ihrer App verwenden.

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

Alternativ können Sie die verfügbaren Größen mit Typescript nutzen, indem Sie einen string anstelle eines number verwenden:

Entwicklung

Stellen Sie sicher, dass Sie die Abhängigkeiten installieren:

pnpm install

Starten Sie den Entwicklungsserver unter http://localhost:3000:

pnpm dev

Beispiel

Beispiel zum Erstellen und Starten auf http://localhost:3000:

pnpm example:build
pnpm example:start

Lizenz

Hergestellt mit ❤️

Veröffentlicht unter der MIT-Lizenz.