webpack pwa manifest

Webpack-pwa-manifest

Mencari orang yang mau membantu! Info lebih lanjut

webpack-pwa-manifest adalah plugin webpack yang menghasilkan 'manifest.json' untuk aplikasi web progresif Anda, dengan pengubahan ukuran ikon otomatis dan dukungan sidik jari.

Jika Anda menggunakan inject pada konfigurasi Anda, pastikan bahwa HtmlWebpackPlugin muncul sebelum WebpackPwaManifest di array plugins !

fitur

✔ Ubah Ulang Ikon Otomatis

✔ Ikon sidik jari

✔ Fingerprinting manifes

✔ Injeksi manifes otomatis pada HTML

✔ Dukungan Muat Ulang Panas

✔ ES6+ Siap

memasang

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

penggunaan

Di webpack.config.js Anda:

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

keluaran

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

opsi

Jenis: object

Anda dapat mengikuti spesifikasi manifes aplikasi web.

Perbedaannya di sini adalah bahwa, ketika mendefinisikan ikon, Anda dapat menentukan satu ikon dengan banyak ukuran, menggunakan array bilangan bulat, seperti halnya contoh di atas.

Anda juga dapat mengubah nama file output dengan properti filename .

Preset options :

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

Secara default, injeksi HTML dan generasi sidik jari aktif. Dengan inject: false dan fingerprints: false , masing -masing, Anda dapat mematikannya.

Jika inject: true dan 'theme-color' tidak ditentukan, itu akan mencoba menggunakan theme_color sebagai default. Kalau tidak, tidak ada tag meta theme-color yang akan disuntikkan.

Dengan includeDirectory: true , kami akan menggunakan direktori filename untuk mengekspor file manifes.

Dengan orientation: 'omit' , kunci orientasi akan dihilangkan dari file manifes yang dihasilkan.

Saat inject: true dan ios: true , tag meta apel spesifik akan disuntikkan ke kode HTML bila memungkinkan, seperti yang diminta pada edisi #13. Anda dapat melihat Apple Configuring Web Application untuk informasi lebih lanjut. Alih -alih menggunakan nilai boolean, Anda juga dapat menggunakan objek untuk menentukan tautan atau tag meta tertentu, misalnya:

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

Jika opsi publicPath tidak diberikan, fallback plugin ini ke definisi jalur publik Webpack.

Saat mendefinisikan objek ikon, Anda juga dapat menentukan direktori outputnya menggunakan properti yang disebut destination . Menggunakan ios: true dalam objek ikon membuatnya memenuhi syarat untuk injeksi tag meta apple-touch-icon . Menggunakan ios: 'startup' dalam objek ikon membuatnya memenuhi syarat untuk injeksi tag meta 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' )
    }
  ]
}

Jika Anda menentukan properti crossorigin yang valid, itu akan ditambahkan ke <link rel="manifest"> dalam dokumen HTML. Properti ini menentukan apakah permintaan untuk manifes termasuk header CORS dan diperlukan jika manifes terletak pada domain yang berbeda atau membutuhkan otentikasi.