كيفية إنشاء PWA w / Vue CLI 3 (عمال الخدمة / إضافة إلى الشاشة الرئيسية / إعلامات الدفع)

سجل التغيير
- UPDATE 2019–05–04: تم استبدال لقطة شاشة firebase بإصدار اللغة الإنجليزية
- التحديث 2019–05-16: قضية ثابتة حول 7. الضفيرة
- تحديث 2019-06-06: تم تغيير كيفية "إضافة إلى الشاشة الرئيسية" على سطح المكتب الكروم

العلاقات العامة - مصمم مؤسس مشارك

أقوم بتطوير أداة التعاون في الوقت الحقيقي في الكتابة اليدوية في الوقت المناسب لإصدار iPad OS هذا الخريف.

يرجى مراجعة هذه المنشورات إذا كنت مهتمًا بهذا المنتج والوظيفة!

النموذج المبدئي

ما هو PWA؟

هناك الوظائف التالية حول PWA (تطبيق الويب المتقدم).

  • عمال الخدمة
  • إضافة إلى الشاشة الرئيسية
  • دفع الإخطارات

باستخدام PWA ، يمكنك توفير UX مشابه للتطبيق الأصلي للمستخدمين حتى من خلال تطويره كتطبيق ويب.

سأحاول هذه الوظائف باستخدام Vue.js.

PWA ث / فيو CLI 3

عرض

https://vue-pwa-tutorial.firebaseapp.com

مصدر الرمز

الدورة التعليمية

1. تثبيت Vue CLI 3

المرجع. التثبيت | فيو CLI 3
$ npm install -g @ vue / cli

2. إنشاء مشروع جديد

vue خلق vue-pwa-تعليمي

3. حدد يدويا

Vue CLI v3.3.0
؟ يرجى اختيار إعداد مسبق:
  الافتراضي (بابل ، eslint)
features تحديد الميزات يدويًا

4. حدد PWA

Typescript ، Router ، Vuex كما تريد.

Vue CLI v3.3.0
؟ يرجى اختيار إعداد مسبق: تحديد الميزات يدويًا
؟ تحقق من الميزات اللازمة لمشروعك:
❯◉ بابل
 ◉ TypeScript
 App دعم تطبيق ويب التقدمي (PWA)
 ◉ جهاز التوجيه
 ◉ فو
 ◯ CSS قبل المعالجات
 inter Linter / المنسق
 ◯ اختبار الوحدة
 ◯ اختبار E2E

5. بعد ذلك بشكل مناسب

Vue CLI v3.3.0
؟ يرجى اختيار إعداد مسبق: تحديد الميزات يدويًا
؟ تحقق من الميزات المطلوبة لمشروعك: Babel ، TS ، PWA ، Router ، Vuex ، Linter
؟ استخدام بناء جملة المكون على غرار الطبقة؟ نعم
؟ استخدام بابل جنبا إلى جنب مع TypeScript للملفات متعددة الكشف التلقائي؟ نعم
؟ استخدام وضع التاريخ لجهاز التوجيه؟ (يتطلب إعداد خادم مناسب لاسترجاع الفهرس في الإنتاج) نعم
؟ اختيار التكوين linter / المنسق: TSLint
؟ اختيار ميزات الوبر إضافية: الوبر على حفظ
؟ أين تفضل وضع التهيئة لـ Babel و PostCSS و ESLint وما إلى ذلك؟ في ملفات التكوين مخصصة
؟ احفظ هذا كإعداد مسبق للمشاريع المستقبلية؟ نعم
؟ حفظ الإعداد المسبق باسم:

6. تهيئة

Vue CLI v3.3.0
project إنشاء مشروع في / Users / zyyx-kubo / WVVUProjects / chatty / vue-pwa-tutorial.
g تهيئة مستودع بوابة ...
plug تثبيت الإضافات CLI. وهذا قد يستغرق بعض الوقت...

7. تشغيل خادم الويب

$ cd vue-pwa-tutorial /
خدمة تشغيل npm $

8. الوصول إلى المضيف المحلي

حاسوب محمولالتليفون المحمول

PWA - عمال الخدمة

إذا بدأت بتشغيل npm run ، فلن يعمل عمال الخدمة على النحو التالي.

أداة المطور> التطبيق> عمال الخدمة

للتحقق من سلوك عمال الخدمة ، يجب أن تقوم بالبناء باستخدام npm run build.
إذا نشرت دليل ./dist باستخدام Web Server for Chrome ، فيمكنك التحقق من أن عمال الخدمة يعملون على النحو التالي. (عادةً ما تبدأ بتشغيل npm عندما لا تستخدم عمال الخدمة)

بناء npm $ بناء
 انتهى بناء كاملة. دليل dist جاهز للنشر.
أداة المطور> التطبيق> عمال الخدمةأداة المطور> التطبيق> تخزين ذاكرة التخزين المؤقت

يتم تخزين المحتويات الثابتة (*. html ، * .css ، * .js ، * .txt).

أداة المطورين التي تم التحقق منها> التطبيق> عمال الخدمة> التحديث عند إعادة التحميل ، ويتم مسح ذاكرة التخزين المؤقت في كل مرة عند إعادة تحميل المتصفح. وإلا احذف الملف الهدف من ذاكرة التخزين المؤقت.

PWA - إضافة إلى الشاشة الرئيسية

بيان تطبيق الويب

لعرض مربع الحوار "إضافة إلى الشاشة الرئيسية" ، يلزم توفر ملف بيان تطبيق الويب المنسق JSON.

إذا قمت بتحديد PWA باستخدام Vue CLI ، فسيتم إنشاؤه افتراضيًا ، لذا استخدم هذا كما هو.

./public/manifest.json
{
  "name": "vue-pwa-tutorial" ،
  "short_name": "vue-pwa-tutorial" ،
  "الرموز": [
    {
      "src": "./img/icons/android-chrome-192x192.png" ،
      "الأحجام": "192x192" ،
      "type": "image / png"
    }،
    {
      "src": "./img/icons/android-chrome-512x512.png" ،
      "الأحجام": "512 × 512" ،
      "type": "image / png"
    }
  ]،
  "start_url": "./index.html" ،
  "عرض": "مستقل" ،
  "background_color": "# 000000" ،
  "theme_color": "# 4DBA87"
}

البيئة المحلية

تم فتحه كتطبيق سطح المكتبالتطبيقات // /: الكروم

انشر على الخادم لأنه لا يمكنك التحقق منه عن طريق الهاتف المحمول.

بناء بيئة مظاهرة عن طريق استضافة Firebase

كسبب لاستخدام Firebase ، سأحاول دفع الإخطارات في المرة القادمة. لذلك هو الأساس لذلك.

المرجع. نشر Firebase | فيو CLI 3
  1. إنشاء مشروع جديد على Firebase

في البداية ، سجّل الدخول إلى وحدة Firebase باستخدام حساب Google ، وقم بإنشاء مشروع جديد.

Firebase وحدة التحكم

2. نشر

تثبيت Firebase CLI لأن النشر يعمل بسطر الأوامر.

$ npm install -g firebase-tools
$ firebase تسجيل الدخول

التهيئة بواسطة جذر المشروع.

$ firebase init init

؟ حدد مشروع Firebase افتراضي لهذا الدليل: (استخدم مفاتيح الأسهم)
  [لا تقم بإعداد مشروع افتراضي]
❯ vue-pwa-tutorial (vue-pwa-tutorial)
  [إنشاء مشروع جديد]

؟ ماذا تريد أن تستخدم كدليل عام؟ (العامة) dist

؟ هل تريد تكوين كتطبيق من صفحة واحدة (أعد كتابة جميع عناوين url إلى /index.html)؟ (ص / ن) ذ

؟ ملف dist / index.html موجود بالفعل. الكتابة فوق؟ (ص / ن) ذ

نشر

نشر firebase $ - استضافة فقط

تتم الآن إضافة الرمز إلى الشاشة الرئيسية بالإضافة إلى التطبيق الأصلي. (كما تم تقليل مشكلة التثبيت من AppStore)

نظرًا لأن المحتويات الثابتة يتم تخزينها مؤقتًا ، فإنها تعمل بسرعة. (على الرغم من أن واجهة برمجة التطبيقات تبدو قادرة على التخزين المؤقت أيضًا ، ولكن تم حذفها هذه المرة)

PWA - دفع الإخطارات

يمكنني استخدام Firebase Cloud Messaging (FCM) لإعلامات الدفع.

المرجع. قم بإعداد تطبيق عميل JavaScript Firebase Cloud Messaging | Firebase
المرجع. تلقي الرسائل في عميل JavaScript | Firebase
المرجع. Firebase Cloud Messaging Quickstart | جيثب
  1. قم بتكوين بيانات اعتماد الويب باستخدام FCM
إنشاء زوج مفاتيح جديد (الإعدادات> هل يمكن المراسلة)

2. أضف gcm_sender_id في Web App Manifest

./public/manitest.json
{
  ...،
  "gcm_sender_id": "103953800507"
}

3. تثبيت Firebase SDK

تثبيت $ npm - firebase

4. الحصول على تكوين Firebase

الخطوة 1الخطوة 2الخطوه 3الخطوة 4الخطوة 5إنهاء (الإعدادات> عام)

5. طلب ​​إذن من الإخطارات والحصول على رمز

./src/main.ts
استيراد * كـ firebase من "firebase" ؛

فار config = {
  apiKey: "xxxxxxxxxxxx" ،
  authDomain: "xxx.firebaseapp.com" ،
  databaseURL: "https://xxx.firebaseio.com" ،
  projectId: "xxx" ،
  storageBucket: "xxx.appspot.com" ،
  messagingSenderId: "xxxxxxxxxxxx"
}؛ // 4. الحصول على تكوين Firebase
firebase.initializeApp (التكوين)؛

const messaging = firebase.messaging ()؛

messaging.usePublicVapidKey ( "XXXXXXX")؛ // 1. توليد زوج مفتاح جديد

// طلب إذن الإخطارات
messaging.requestPermission (). ثم (() => {
  console.log ('تم منح إذن الإخطار.') ؛

  // الحصول على رمز
  messaging.getToken (). ثم ((الرمز المميز) => {
    console.log (علامة)
  })
}). catch ((err) => {
  console.log ('غير قادر على الحصول على إذن للإخطار.' ، يخطئ) ؛
})؛

6. إضافة خدمة عامل ل FCM

لتلقي حدث onMessage ، يجب أن يحدد تطبيقك عامل خدمة المراسلة في Firebase في firebase-messaging-sw.js. بدلاً من ذلك ، يمكنك تحديد عامل خدمة موجود باستخدام useServiceWorker.

./public/firebase-messaging-sw.js
// [START initialize_firebase_in_sw]
/ امنح عامل الخدمة حق الوصول إلى Firebase Messaging.
// لاحظ أنه يمكنك فقط استخدام Firebase Messaging هنا ، ومكتبات Firebase الأخرى
/ / غير متوفر في عامل الخدمة.
importScripts ( 'https://www.gstatic.com/firebasejs/5.5.6/firebase-app.js')؛
importScripts ( 'https://www.gstatic.com/firebasejs/5.5.6/firebase-messaging.js')؛
// تهيئة تطبيق Firebase في عامل الخدمة عن طريق تمرير messagingSenderId.
firebase.initializeApp ({
  'messagingSenderId': 'xxxxxxxxx' // 4. احصل على تكوين Firebase
})؛

/ / استرجع مثيل Firebase Messaging بحيث يمكنه معالجة رسائل الخلفية.
const messaging = firebase.messaging ()؛
// [END initialize_firebase_in_sw]

نظرًا لأن Push Notification يحتاج إلى تشغيل "عامل الخدمة" ، فإن تشغيل npm يتم تشغيله والوصول إلى المضيف المحلي باستخدام خادم الويب لمتصفح Chrome.

طلب إذنالحصول على رمز

7. تلقي رسالة اختبار عبر الضفيرة

سحابة المراسلة> مفتاح الخادم
$ curl -X POST -H "التخويل: key = $ {مفتاح الخادم أعلاه}" -H "Content-Type: application / json" -d '{
  "إلى": "$ {5's الرمز المميز}" ،
  "تنبيه": {
    "العنوان": "رسالة FCM" ،
    "body": "هذه رسالة FCM" ،
    "رمز": "./img/icons/android-chrome-192x192.png"
  }
} 'https://fcm.googleapis.com/fcm/send
نجاحلا تتلقى رسالة إذا كانت الصفحة الهدف نشطةحوار إذننجاحيتم أيضًا ربط نقطة الإعلام بالرمز

ملخص

باستخدام PWA ، يمكنك توفير UX مشابه للتطبيق الأصلي حتى مع تطبيق الويب.

نظرًا لوجود أشياء لا يمكنني تقديمها هذه المرة ، سأكتب مرة أخرى إذا أتيحت لي الفرصة.

عمال الخدمة

  • مخبأ التحكم
  • غير متصل الصفحة

دفع الإخطارات

  • رمز التحديث
  • Firebase Cloud Messaging

أخيرا

لقد نشرت البرنامج التعليمي الأصلي لبلدي بلوق. إذا كنت تشعر أن هذه المقالة جيدة ، فيرجى الرد عليها. شكرا.