webpack pwa manifest

WebPack-PWA-Manifest

Ищу людей, желающих помочь! Больше информации

webpack-pwa-manifest -это плагин WebPack, который генерирует «manifest.json» для вашего прогрессивного веб-приложения, с автозапункты и поддержкой с давлением пальцев.

Если вы используете inject в своей конфигурации, убедитесь, что HtmlWebpackPlugin появляется перед WebpackPwaManifest в массиве plugins !

функции

✔ АВТОКОН

✔ Значок

✔ Manifest Descrinting

✔ Автоманифестная инъекция на HTML

✔ Поддержка горячей перезагрузки

✔ es6+ готово

установить

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

Использование

В вашем 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'
      }
    ]
  } )
]

выход

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])

параметры

Тип: object

Вы можете следовать спецификации веб -приложения.

Разница здесь заключается в том, что при определении значков вы можете указать один значок с несколькими размерами, используя массив целых чисел, как приведенный выше пример.

Вы также можете изменить имя файла вывода со свойством filename .

Предустановки options :

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

По умолчанию HTML -инъекция и генерация отпечатков пальцев включены. С inject: false и fingerprints: false , соответственно, вы можете выключить их.

Если inject: true и 'theme-color' свойство не определено, оно попытается использовать theme_color в качестве по умолчанию. В противном случае не будет введена ни один из theme-color метагов.

С includeDirectory: true , мы будем использовать каталог filename для экспорта манифестного файла.

С orientation: 'omit' , ключ ориентации будет опущен из сгенерированного манифестного файла.

При inject: true и ios: true , конкретные метатеги Apple будут введены в HTML -код, когда это возможно, по мере необходимости по запросу № 13. Вы можете увидеть настройку веб -приложения Apple для получения дополнительной информации. Вместо использования логического значения вы также можете использовать объект для указания определенной ссылки или метага, например:

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

Если опция publicPath не предоставлена, этот плагин отступает в определение публичного пути WebPack.

При определении объекта значка вы также можете указать его выходной каталог, используя свойство, называемое destination . Использование ios: true в объекте Icon дает право на метагильную инъекцию apple-touch-icon . Использование ios: 'startup' в объекте значка дает ему право на метагильную инъекцию 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' )
    }
  ]
}

Если вы указали действительное свойство crossorigin оно будет добавлено в <link rel="manifest"> в документе HTML. Это свойство определяет, включает ли запрос на манифест и требуется, если манифест расположен в другом домене или требует аутентификации.