webpack pwa manifest

Webpack-PWA-manifest

Procurando pessoas dispostas a ajudar! Mais informações

webpack-pwa-manifest é um plug-in do WebPack que gera um 'manifest.json' para o seu aplicativo da Web progressivo, com o suporte de redimensionamento e impressão digital do ícone automático.

Se você estiver usando inject na sua configuração, verifique se HtmlWebpackPlugin aparece antes WebpackPwaManifest na matriz plugins !

características

✔ Ressimensionamento do ícone automático

✔ Ícone impressão digital

✔ Manifesto impressão digital

✔ Injeção de manifesto automático em HTML

✔ Suporte a recarga a quente

✔ ES6+ pronto

instalar

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

uso

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

saída

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 ([opções])

opções

Tipo: object

Você pode seguir a especificação do manifesto do aplicativo da web.

A diferença aqui é que, ao definir ícones, você pode especificar um ícone com vários tamanhos, usando uma matriz de números inteiros, exatamente como o exemplo acima.

Você também pode alterar o nome do arquivo da saída com a propriedade filename .

Predefinições 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 padrão, a injeção de HTML e a geração de impressão digital estão ligadas. Com inject: false e fingerprints: false , respectivamente, você pode desligá -las.

Se inject: true e 'theme-color' não estiver definida, tentará usar theme_color como padrão. Caso contrário, nenhuma tag de meta theme-color será injetada.

Com o includeDirectory: true , usaremos o diretório do filename para exportar o arquivo de manifesto.

Com orientation: 'omit' , a chave de orientação será omitida a partir do arquivo de manifesto gerado.

Quando inject: true e ios: true , as meta tags específicas da Apple serão injetadas no código HTML, quando possível, conforme solicitado na edição 13. Você pode ver o aplicativo Web de configuração da Apple para obter mais informações. Em vez de usar um valor booleano, você também pode usar um objeto para especificar determinado link ou meta tag, por exemplo:

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

Se a opção publicPath não for fornecida, este plug -in fallbacks na definição de caminho público do Webpack.

Ao definir um objeto de ícone, você também pode especificar seu diretório de saída usando uma propriedade chamada destination . Usando ios: true em um objeto de ícone o torna elegível para a injeção de meta-tag apple-touch-icon . Usando ios: 'startup' em um objeto de ícone o torna elegível para a injeção de meta tag 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' )
    }
  ]
}

Se você especificar uma propriedade crossorigin válida, ele será adicionado ao <link rel="manifest"> no documento HTML. Esta propriedade determina se a solicitação para o manifesto inclui cabeçalhos de CORS e é necessária se o manifesto estiver localizado em um domínio diferente ou requer autenticação.