webpack pwa manifest
v4.3.0
喜んで助けてくれる人を探しています！詳細
webpack-pwa-manifest Auto Iconがサイズを変更し、フィンガープリントサポートを使用して、プログレッシブWebアプリケーションに「manifest.json」を生成するWebパックプラグインです。
構成にinject使用している場合は、 pluginsアレイにWebpackPwaManifestの前にHtmlWebpackPluginが表示されていることを確認してください！
✔自動アイコンのサイズ変更
✔アイコンフィンガープリント
manifestフィンガープリント
htmlでの自動マニフェストインジェクション
hotホットリロードサポート
✔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 "
}
]
}オプション
タイプ： object
Webアプリマニフェスト仕様に従うことができます。
ここでの違いは、アイコンを定義する場合、上記の例と同様に、整数の配列を使用して、複数のサイズの1つのアイコンを指定できることです。
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 and 'theme-color'プロパティが定義されていない場合、 theme_colorデフォルトとして使用しようとします。それ以外の場合は、 theme-colorメタタグは注入されません。
includeDirectory: trueでは、 filenameのディレクトリを使用してマニフェストファイルをエクスポートします。
orientation: 'omit'では、生成されたマニフェストファイルからオリエンテーションキーが省略されます。
inject: true and ios: true 、特定のAppleメタタグは、可能な限り、問題＃13で要求されているように、HTMLコードに挿入されます。詳細については、AppleのWebアプリケーションの構成を確認できます。ブール値を使用する代わりに、オブジェクトを使用して、特定のリンクまたはメタタグを指定することもできます。
...
ios: {
'apple-mobile-web-app-title' : 'AppTitle' ,
'apple-mobile-web-app-status-bar-style' : 'black'
} publicPathオプションが与えられない場合、このプラグインはWebpackのパブリックパス定義にフォールバックします。
アイコンオブジェクトを定義するときは、 destinationと呼ばれるプロパティを使用して出力ディレクトリを指定することもできます。 ios: true使用するとapple-touch-icon Metaタグインジェクションの対象となります。 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プロパティを指定すると、HTMLドキュメントで<link rel="manifest">に追加されます。このプロパティは、マニフェストのリクエストにCORSヘッダーが含まれているかどうかを判断し、マニフェストが別のドメインに配置されているか、認証が必要な場合に必要です。
