webpack pwa manifest

Webpack-Pwa-manifest

¡Buscando personas dispuestas a ayudar! Más información

webpack-pwa-manifest es un complemento Webpack que genera un 'manifest.json' para su aplicación web progresiva, con un cambio de tamaño de icono automático y soporte de huellas dactilares.

Si está utilizando inject en su configuración, ¡asegúrese de que HtmlWebpackPlugin aparezca antes de WebpackPwaManifest en la matriz plugins !

características

✔ RESIMENTO DE ICONO AUTO

✔ Huellas digitales de icono

✔ Manifiestas de huellas dactilares

✔ Inyección de manifiesto automático en HTML

✔ Soporte de recarga caliente

✔ ES6+ listo

instalar

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

uso

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

producción

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

opción

Tipo: object

Puede seguir la especificación de manifiesto de la aplicación web.

La diferencia aquí es que, al definir iconos, puede especificar un icono con múltiples tamaños, utilizando una matriz de enteros, al igual que el ejemplo anterior.

También puede cambiar el nombre de archivo de la salida con la propiedad filename .

Presets de options :

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

Por defecto, la inyección HTML y la generación de huellas digitales están encendidas. Con inject: false y fingerprints: false , respectivamente, puede apagarlas.

Si inject: true y 'theme-color' no está definida, intentará usar theme_color como predeterminado. De lo contrario, no se inyectará meta etiqueta theme-color .

Con includeDirectory: true , utilizaremos el directorio del filename para exportar el archivo manifiesto.

Con orientation: 'omit' , la clave de orientación se omitirá desde el archivo manifiesto generado.

Cuando inject: true e ios: true , se inyectarán metaetiquetas de Apple específicas al código HTML cuando sea posible, como se solicite en el problema #13. Puede ver la aplicación web de configuración de Apple para obtener más información. En lugar de usar un valor booleano, también puede usar un objeto para especificar cierto enlace o metaetiqueta, por ejemplo:

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

Si no se da la opción publicPath , este complemento se vuelve a ver a la definición de ruta pública de Webpack.

Al definir un objeto de icono, también puede especificar su directorio de salida utilizando una propiedad llamada destination . Usando ios: true en un objeto iconal lo hace elegible para la inyección de meta etiqueta apple-touch-icon . Usando ios: 'startup' en un objeto icono lo hace elegible para la inyección de meta etiqueta 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 especifica una propiedad crossorigin válida, se agregará al <link rel="manifest"> en el documento HTML. Esta propiedad determina si la solicitud del manifiesto incluye encabezados CORS y es necesario si el manifiesto se encuentra en un dominio diferente o requiere autenticación.