webpack pwa manifest

Webpack-Pwa-Manifest

Auf der Suche nach Menschen, die bereit sind zu helfen! Weitere Informationen

webpack-pwa-manifest ist ein Webpack-Plugin, das ein "Manifest.json" für Ihre progressive Webanwendung generiert, wobei die Änderungsgrößen- und Fingerabdruckunterstützung für das automatische Symbol ist.

Wenn Sie inject in Ihre Konfiguration verwenden, stellen Sie sicher, dass HtmlWebpackPlugin vor dem WebpackPwaManifest im plugins -Array angezeigt wird!

Merkmale

✔ Auto -Symboländerung

✔ Icon -Fingerabdruck

✔ Manifestiertes Fingerabdruck

✔ automatische Manifest -Injektion auf HTML

✔ Heiße Reload -Unterstützung

✔ es6+ bereit

installieren

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

Verwendung

In Ihrem 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'
      }
    ]
  } )
]

Ausgabe

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 ([Optionen])

Optionen

Typ: object

Sie können der Web -App -Manifestspezifikation folgen.

Der Unterschied besteht darin, dass Sie beim Definieren von Symbolen ein Symbol mit mehreren Größen mit einer Reihe von Ganzzahlen angeben können, genau wie das obige Beispiel.

Sie können auch den Dateinamen der Ausgabe mit der filename -Eigenschaft ändern.

Voreinstellungen von options :

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

Standardmäßig sind die HTML -Injektion und die Erzeugung von Fingerabdrücken eingeschaltet. Mit inject: false und fingerprints: false können Sie sie ausschalten.

Wenn inject: true und 'theme-color' Eigenschaft nicht definiert sind, wird sie versuchen, theme_color als Standard zu verwenden. Andernfalls wird kein META theme-color injiziert.

Mit includeDirectory: true werden wir das Verzeichnis von filename verwenden, um die Manifestdatei zu exportieren.

Mit orientation: 'omit' wird der Orientierungsschlüssel aus der generierten Manifestdatei weggelassen.

Bei inject: true und ios: true werden spezifische Apple -Meta -Tags nach Möglichkeit dem HTML -Code injiziert, wie in Ausgabe Nr. 13 angefordert. Sie können die Webanwendung von Apple für weitere Informationen konfigurieren. Anstatt einen booleschen Wert zu verwenden, können Sie beispielsweise ein Objekt verwenden, um einen bestimmten Link oder einen META -Tag anzugeben:

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

Wenn keine publicPath -Option angegeben wird, ist dieses Plugin -Fallback in die öffentliche Pfaddefinition von WebPack.

Bei der Definition eines Symbolobjekts können Sie das Ausgabesverzeichnis auch mit einer Eigenschaft namens destination angeben. Die Verwendung von ios: true in einem Icon-Objekt macht es für die apple-touch-icon Meta-Tag-Injektion berechtigt. Mit ios: 'startup' in einem Icon-Objekt kann es für die Meta-Tag-Injektion apple-touch-startup-image in Frage kommen.

  ...
  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' )
    }
  ]
}

Wenn Sie eine gültige crossorigin -Eigenschaft angeben, wird sie im HTML -Dokument zum <link rel="manifest"> hinzugefügt. Diese Eigenschaft bestimmt, ob die Anfrage für das Manifest CORS -Header umfasst und erforderlich ist, wenn sich das Manifest auf einer anderen Domäne befindet oder Authentifizierung erfordert.