nuxt pwa module

️ DÉCONSEILLÉ ️

Nuxt 3 est propulsé par Vite qui possède aujourd'hui un incroyable plugin PWA, avec le support de Nuxt.

Une meilleure solution ayant émergé, c'est pourquoi ce module ne sera plus maintenu.

Pensez plutôt à utiliser Vite PWA pour Nuxt 3 avec Vite PWA Assets Generator.

En tant que responsable principal (@kevinmarrec), je tiens à remercier tous les contributeurs et les utilisateurs qui ont fait confiance à ce projet.

PWA Nuxt 3

Solution PWA sans configuration pour Nuxt 3

Etat du module officiel

Ce module n'est pas officiel mais vise à devenir la prochaine itération du module officiel Nuxt PWA.

Installation

Ajoutez la dépendance @kevinmarrec/nuxt-pwa à votre projet :

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

Editez votre fichier nuxt.config.ts pour ajouter le module PWA :

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

Configuration

Comme ce module essaie d'être compatible avec Nuxt 2 PWA pour une migration facile, vous pouvez toujours utiliser la documentation https://pwa.nuxtjs.org pour la plupart des fonctionnalités.

Si vous souhaitez que votre application soit installable en développement , vous devez définir l'option pwa.workbox.enabled sur true dans votre nuxt.config , car elle n'est activée que pour la production par défaut :

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

Si vous avez besoin d'un travailleur de service Workbox personnalisé, vous pouvez spécifier le chemin d'accès à votre travailleur avec l'option pwa.workbox.templatePath , vous pouvez utiliser des alias de chemin tels que ~ et @ .

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

Pour le personnaliser, vous pouvez vérifier la valeur par défaut de ce module ici, ainsi que la valeur par défaut de Nuxt 2 et la documentation Workbox.

Composables

usePWAIcon (taille, options)

Vous pouvez utiliser usePWAIcon pour obtenir les URL des icônes de votre PWA et les utiliser dans votre application.

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

Alternativement, vous pouvez bénéficier des tailles disponibles avec Typescript en utilisant une string au lieu d'un paramètre de taille number :

Développement

Assurez-vous d'installer les dépendances :

pnpm install

Démarrez le serveur de développement sur http://localhost:3000 :

pnpm dev

Exemple

Exemple de build et de démarrage sur http://localhost:3000 :

pnpm example:build
pnpm example:start

Licence

Réalisé avec ❤️

Publié sous licence MIT.