webpack pwa manifest

webpack-pwa-manifest

تبحث عن أشخاص على استعداد للمساعدة! مزيد من المعلومات

webpack-pwa-manifest هو مكون إضافي لـ WebPack يقوم بإنشاء "ManySest.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' في كائن أيقونة يجعلها مؤهلة لحقن علامة 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' )
    }
  ]
}

إذا قمت بتحديد خاصية crossorigin صالحة ، فسيتم إضافتها إلى <link rel="manifest"> في مستند HTML. تحدد هذه الخاصية ما إذا كان طلب البيان يتضمن رؤوس cors وكان مطلوبًا إذا كان البيان موجودًا في مجال مختلف أو يتطلب مصادقة.