webpack pwa manifest

webpack-pwa-manifest

กำลังมองหาคนที่เต็มใจช่วย! ข้อมูลเพิ่มเติม

webpack-pwa-manifest เป็นปลั๊กอิน WebPack ที่สร้าง 'Manifest.json' สำหรับแอปพลิเคชันเว็บแบบก้าวหน้าของคุณพร้อมกับไอคอนอัตโนมัติที่ปรับขนาดและสนับสนุนการพิมพ์ลายนิ้วมือ

หากคุณใช้ inject ในการกำหนดค่าของคุณตรวจสอบให้แน่ใจว่า HtmlWebpackPlugin จะปรากฏขึ้น ก่อนที่ WebpackPwaManifest ในอาร์เรย์ plugins !

คุณสมบัติ

✔การปรับขนาดไอคอนอัตโนมัติ

✔ไอคอนลายนิ้วมือ

✔การพิมพ์ลายนิ้วมืออย่างชัดแจ้ง

✔การฉีดยาอย่างชัดแจ้งอัตโนมัติบน 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 ([ตัวเลือก])

ตัวเลือก

ประเภท: 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 Meta เฉพาะจะถูกฉีดไปยังรหัส HTML เมื่อเป็นไปได้ตามที่ร้องขอในฉบับที่ 13 คุณสามารถดูการกำหนดค่าเว็บแอปพลิเคชันของ Apple สำหรับข้อมูลเพิ่มเติม แทนที่จะใช้ค่าบูลีนคุณยังสามารถใช้วัตถุเพื่อระบุลิงก์หรือแท็กเมตาบางอย่างเช่น:

  ...
  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 ที่ถูกต้องมันจะถูกเพิ่มลงใน <link rel="manifest"> ในเอกสาร HTML คุณสมบัตินี้กำหนดว่าการร้องขอสำหรับรายการรวมถึงส่วนหัวของ CORS และจำเป็นต้องมีหากรายการอยู่ในโดเมนที่แตกต่างกันหรือต้องการการตรวจสอบสิทธิ์