نحن ضخ NGSW الزاوي باستخدام المنطق المخصص في خدمة عامل

استخدام الزاوي لبناء تطبيقات الويب التقدمية (PWA)

الزاوي هو خيار كبير لتطوير PWA. تم تضمين دعم عمال الخدمة في Angular CLI منذ الإصدار 1.7.0 ، للبدء بسرعة في تطوير تطبيقات PWA . يمكن تكوين Worker Service في تطبيق Angular باستخدام ملف تكوين json يوفر العديد من الخيارات والوظائف. على الرغم من أن هذا يبدو رائعًا ، إلا أن هناك عيبًا كبيرًا في استخدام Angular Service Worker - لا يمكن تمديد منطقه بطريقة قياسية.

لماذا قد تحتاج إلى توسيع قدرات NGSW؟

في حالتي ، كنت بحاجة إلى تسجيل مستمع أحداث إعلام النقر المخصص الذي يتعامل مع إجراء النقر لإشعار الدفع. يجب أن أعترف بأن Angular Service Worker يقوم بعمل رائع في تلقي وعرض إشعارات الدفع - تتم معالجة هذا الجزء بواسطة ملف ngsw-worker.js دون أي جهد من جانب المطور. في البداية ، بدا أن الطريقة الوحيدة لتوفير المنطق الذي كنت أحتاج إليه هي إجراء تغييرات على رمز ملف ngsw-worker.js الذي تم إنشاؤه عند إنشاء التطبيق. لكنني فهمت أن هذه الطريقة سيئة - يجب دعمها والتحقق منها في كل مرة تقوم فيها بإجراء أي تغييرات على ملف تكوين ngsw. لحسن الحظ ، اتضح أنه تم حل المشكلة بسهولة عن طريق إدخال ملفين إضافيين.

الحل

لنبدأ بإنشاء ملفين js إضافيين في مجلد / src .

sw-custom.js - ملف يحتوي على مستمع الحدث:

(function () { 'use strict'; self.addEventListener('notificationclick', (event) => { event.notification.close(); console.log('notification details: ', event.notification); }); }()); 

sw-master.js هو ملف يجمع NGSW مع منطقنا الخاص:

 importScripts('./ngsw-worker.js'); importScripts('./sw-custom.js'); 

تسجيل الأصول

من خلال إنشاء ملفات نصية جديدة ، نحتاج إلى التأكد من أن Angular تأخذها في الاعتبار أثناء الإنشاء. من وجهة نظر تقنية ، هذه أصول شبيهة بملف favicon.ico الذي أنشأه Angular CLI عند إنشاء مشروع. يمكننا تسجيل مواردنا الإضافية في ملف angular.json (.angular-cli.json للإصدارات القديمة من Angular):

 { ..., "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/sw-master.js", "src/sw-reminders.js" ], ... } 

إعادة تسجيل البرنامج النصي العامل الخدمة

الخطوة الأخيرة هي تغيير نقطة الدخول إلى "عامل الخدمة" المسجل بواسطة Angular أثناء بدء تشغيل التطبيق. للقيام بذلك ، نحتاج إلى تغيير إدخال ServiceWorkerModule.register في app.module.ts كما يلي:

 ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production }) 

تلخيص

هذا كل شيء ، بعد تجميع إنتاج التطبيق ، سيتم نسخ ملفات البرامج النصية الجديدة الخاصة بنا إلى المجلد / dist وسيتم استخدامها من قبل التطبيق عند تسجيل ServiceWorker. إذا كنت ترغب في رؤية المزيد ، فيمكنك أيضًا الاطلاع على ملف تعريف GitHub الخاص بي ، حيث نشرت مثالًا للتطبيق Angular مع ServiceWorker تكمله منطق مخصص.