Menggunakan Angular untuk Membangun Aplikasi Web Progresif (PWA)
Angular adalah pilihan tepat untuk mengembangkan PWA. Dukungan untuk Pekerja Servis telah dimasukkan dalam CLI Angular sejak versi 1.7.0,
untuk segera mulai mengembangkan aplikasi PWA . Pekerja Layanan dapat dikonfigurasi dalam aplikasi Angular menggunakan file konfigurasi json yang menyediakan banyak opsi dan fungsi. Meskipun ini terdengar hebat, ada satu kelemahan besar untuk menggunakan Pekerja Layanan Angular - logikanya tidak dapat diperpanjang dengan cara standar.
Mengapa Anda perlu memperluas kemampuan NGSW?
Dalam kasus saya, saya perlu mendaftarkan pendengar peristiwa pemberitahuan klik khusus yang akan menangani tindakan klik pemberitahuan push. Saya harus mengakui bahwa Pekerja Layanan Angular melakukan pekerjaan besar dalam menerima dan menampilkan pemberitahuan push - bagian ini ditangani oleh file ngsw-worker.js tanpa ada upaya dari pihak pengembang. Dan pada awalnya, sepertinya satu-satunya cara untuk memberikan logika yang saya butuhkan adalah dengan membuat perubahan pada kode dari file ngsw-worker.js yang dihasilkan saat membangun aplikasi. Tapi saya mengerti bahwa metode ini buruk - perlu didukung dan diperiksa setiap kali Anda membuat perubahan pada file konfigurasi ngsw. Untungnya, ternyata masalah itu mudah diselesaikan dengan memasukkan dua file tambahan.
Solusi
Mari kita mulai dengan membuat dua file js tambahan di folder
/ src .
sw-custom.js - file yang berisi pendengar acara:(function () { 'use strict'; self.addEventListener('notificationclick', (event) => { event.notification.close(); console.log('notification details: ', event.notification); }); }());
sw-master.js adalah file yang menggabungkan NGSW dengan logika kita sendiri: importScripts('./ngsw-worker.js'); importScripts('./sw-custom.js');
Pendaftaran aset
Dengan membuat file skrip baru, kita perlu memastikan bahwa Angular memperhitungkannya selama proses pembuatan. Dari sudut pandang teknis, ini adalah aset yang mirip dengan file favicon.ico yang dibuat oleh CLI Angular saat membuat proyek. Kami dapat mendaftarkan sumber daya tambahan kami di file angular.json (.angular-cli.json untuk versi Angular yang lebih lama):
{ ..., "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/sw-master.js", "src/sw-reminders.js" ], ... }
Daftar ulang skrip Pekerja Layanan
Langkah terakhir adalah mengubah titik masuk ke Pekerja Layanan yang didaftarkan oleh Angular selama startup aplikasi. Untuk melakukan ini, kita perlu mengubah entri ServiceWorkerModule.register di app.module.ts sebagai berikut:
ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production })
Ringkaslah
Itu saja, setelah perakitan produksi aplikasi, file skrip baru kami akan disalin ke folder
/ dist dan digunakan oleh aplikasi saat mendaftar ServiceWorker. Jika Anda ingin melihat lebih banyak, Anda juga dapat melihat profil GitHub saya, di mana saya memposting
contoh aplikasi Angular dengan ServiceWorker yang dilengkapi dengan logika khusus.