webpack pwa manifest

webpack-pwa-manifest

Vous cherchez des gens prêts à aider! Plus d'informations

webpack-pwa-manifest est un plugin WebPack qui génère une «manifeste.json» pour votre application Web progressive, avec le redimensionnement des icônes et la prise en charge des empreintes digitales.

Si vous utilisez inject sur votre configuration, assurez-vous que HtmlWebpackPlugin apparaît avant WebpackPwaManifest dans le tableau plugins !

caractéristiques

✔ Redimensionnement de l'icône automatique

✔ Icône empreinte digitale

✔ Manifeste des empreintes digitales

✔ Injection de manifeste automatique sur HTML

✔ Support de recharge chaude

✔ ES6 + Prêt

installer

 npm install -- save - dev webpack - pwa - manifest

usage

Dans votre webpack.config.js :

 // ES6+
import WebpackPwaManifest from 'webpack-pwa-manifest'

// ES5
var WebpackPwaManifest = require ( 'webpack-pwa-manifest' )

. . .

plugins : [
  new WebpackPwaManifest ( {
    name : 'My Progressive Web App' ,
    short_name : 'MyPWA' ,
    description : 'My awesome Progressive Web App!' ,
    background_color : '#ffffff' ,
    crossorigin : 'use-credentials' , //can be null, use-credentials or anonymous
    icons : [
      {
        src : path . resolve ( 'src/assets/icon.png' ) ,
        sizes : [ 96 , 128 , 192 , 256 , 384 , 512 ] // multiple sizes
      } ,
      {
        src : path . resolve ( 'src/assets/large-icon.png' ) ,
        size : '1024x1024' // you can also use the specifications pattern
      } ,
      {
        src : path . resolve ( 'src/assets/maskable-icon.png' ) ,
        size : '1024x1024' ,
        purpose : 'maskable'
      }
    ]
  } )
]

sortir

manifest.<fingerprint>.json

{
  "name" : " My Progressive Web App " ,
  "orientation" : " portrait " ,
  "display" : " standalone " ,
  "start_url" : " . " ,
  "short_name" : " MyPWA " ,
  "description" : " My awesome Progressive Web App! " ,
  "background_color" : " #ffffff " ,
  "icons" : [
    {
      "src" : " icon_1024x1024.<fingerprint>.png " ,
      "sizes" : " 1024x1024 " ,
      "type" : " image/png " ,
      "purpose" : " maskable "
    },
    {
      "src" : " icon_1024x1024.<fingerprint>.png " ,
      "sizes" : " 1024x1024 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_512x512.<fingerprint>.png " ,
      "sizes" : " 512x512 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_384x384.<fingerprint>.png " ,
      "sizes" : " 384x384 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_256x256.<fingerprint>.png " ,
      "sizes" : " 256x256 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_192x192.<fingerprint>.png " ,
      "sizes" : " 192x192 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_128x128.<fingerprint>.png " ,
      "sizes" : " 128x128 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_96x96.<fingerprint>.png " ,
      "sizes" : " 96x96 " ,
      "type" : " image/png "
    }
  ]
}

API

Webpackpwamanifest ([options])

options

Type: object

Vous pouvez suivre la spécification manifeste de l'application Web.

La différence ici est que, lors de la définition d'icônes, vous pouvez spécifier une icône avec plusieurs tailles, en utilisant un tableau d'entiers, tout comme l'exemple ci-dessus.

Vous pouvez également modifier le nom de fichier de la sortie avec la propriété filename .

Préréglages d' options :

 {
  filename : "manifest.json" ,
  name : "App" ,
  orientation : "portrait" ,
  display : "standalone" ,
  start_url : "." ,
  crossorigin : null ,
  inject : true ,
  fingerprints : true ,
  ios : false ,
  publicPath : null ,
  includeDirectory : true
}

Par défaut, l'injection HTML et la génération d'empreintes digitales sont activées. Avec inject: false et fingerprints: false , respectivement, vous pouvez les désactiver.

Si la propriété inject: true et 'theme-color' n'est pas définie, il essaiera d'utiliser theme_color par défaut. Sinon, aucune étiquette de méta theme-color ne sera injectée.

Avec includeDirectory: true , nous utiliserons le répertoire de filename pour exporter le fichier manifeste.

Avec orientation: 'omit' , la clé d'orientation sera omise du fichier manifeste généré.

Lorsque inject: true et ios: true , des balises Apple spécifiques Apple seront injectées au code HTML lorsque cela est possible, comme demandé au numéro 13. Vous pouvez voir l'application Web de configuration d'Apple pour plus d'informations. Au lieu d'utiliser une valeur booléenne, vous pouvez également utiliser un objet pour spécifier certains liens ou balises de méta, par exemple:

  ...
  ios: {
    'apple-mobile-web-app-title' : 'AppTitle' ,
    'apple-mobile-web-app-status-bar-style' : 'black'
  }

Si l'option publicPath n'est pas donnée, ce plugin se retourne à la définition du chemin public de WebPack.

Lors de la définition d'un objet icon, vous pouvez également spécifier son répertoire de sortie à l'aide d'une propriété appelée destination . L'utilisation ios: true dans un objet icône le rend éligible à l'injection de méta-étiquette apple-touch-icon . L'utilisation ios: 'startup' dans un objet icône le rend éligible à l'injection de méta-étiquette apple-touch-startup-image .

  ...
  icons: [
    {
      src : path . resolve ( 'src/assets/icons/ios-icon.png' ) ,
      sizes : [ 120 , 152 , 167 , 180 , 1024 ] ,
      destination : path . join ( 'icons' , 'ios' ) ,
      ios : true
    } ,
    {
      src : path . resolve ( 'src/assets/icons/ios-icon.png' ) ,
      size : 1024 ,
      destination : path . join ( 'icons' , 'ios' ) ,
      ios : 'startup'
    } ,
    {
      src : path . resolve ( 'src/assets/icons/android-icon.png' ) ,
      sizes : [ 36 , 48 , 72 , 96 , 144 , 192 , 512 ] ,
      destination : path . join ( 'icons' , 'android' )
    }
  ]
}

Si vous spécifiez une propriété crossorigin valide, elle sera ajoutée au <link rel="manifest"> dans le document HTML. Cette propriété détermine si la demande de manifeste comprend des en-têtes CORS et est requise si le manifeste est situé sur un domaine différent ou nécessite une authentification.