webpack pwa manifest
v4.3.0
기꺼이 도와 줄 사람들을 찾고 있습니다! 더 많은 정보
webpack-pwa-manifest 자동 아이콘 크기 조정 및 지문 지원이 포함 된 프로그레시브 웹 애플리케이션을 위해 'Manifest.json'을 생성하는 Webpack 플러그인입니다.
구성에 inject 사용하는 경우 plugins 어레이에서 WebpackPwaManifest 전에 HtmlWebpackPlugin 나타나는지 확인하십시오!
✔ 자동 아이콘 크기 조정
✔ 아이콘 지문
✔ 지문이 나타납니다
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
웹 앱 매니페스트 사양을 따라갈 수 있습니다.
차이점은 아이콘을 정의 할 때 위의 예와 같이 정수 배열을 사용하여 여러 크기의 아이콘을 지정할 수 있다는 것입니다.
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 : False를 각각 끄질 수 있습니다.
inject: true 및 'theme-color' 속성이 정의되지 않으면 theme_color 기본값으로 사용하려고합니다. 그렇지 않으면 theme-color 메타 태그가 주입되지 않습니다.
includeDirectory: true 사용하면 filename 디렉토리를 사용하여 Manifest 파일을 내보낼 것입니다.
orientation: 'omit' 사용하면 생성 된 Manifest 파일에서 방향 키가 생략됩니다.
inject: true 및 ios: true 문제 #13에서 요청 된대로 가능한 경우 HTML 코드에 주입됩니다. 자세한 내용은 Apple의 웹 응용 프로그램 구성을 볼 수 있습니다. 부울 값을 사용하는 대신 객체를 사용하여 특정 링크 또는 메타 태그를 지정할 수도 있습니다.
...
ios: {
'apple-mobile-web-app-title' : 'AppTitle' ,
'apple-mobile-web-app-status-bar-style' : 'black'
} publicPath 옵션이 제공되지 않으면이 플러그인은 WebPack의 공개 경로 정의로 떨어집니다.
아이콘 객체를 정의 할 때 destination 이라는 속성을 사용하여 출력 디렉토리를 지정할 수도 있습니다. ios: true 사용하면 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 속성을 지정하면 HTML 문서에서 <link rel="manifest"> 에 추가됩니다. 이 속성은 매니페스트 요청에 CORS 헤더가 포함되어 있는지 여부를 결정하고 매니페스트가 다른 도메인에 있거나 인증이 필요한 경우 필요한 경우 필요합니다.
