Di ekstensi, Anda dapat menggunakan penyedia Push apa pun untuk mengirim pesan dan notifikasi push. Push dari Push API akan diproses oleh pekerja layanan segera setelah diterima. Jika pekerja layanan telah ditangguhkan, Push akan mengaktifkannya kembali. Proses untuk menggunakannya dalam ekstensi sama persis dengan yang Anda gunakan di web terbuka.
Mendapatkan izin untuk menggunakan Push API
Saat Anda mendaftarkan server Push di situs biasa, pengguna akan melihat permintaan izin untuk memberikan atau menolaknya. Dengan ekstensi, perintah itu tidak
akan ditampilkan. Untuk menggunakan Push API di ekstensi, Anda perlu menyetel izin notifications
dalam manifest.json
{
"manifest_version": 3,
...
"permissions": ["notifications"]
Jika izin ini tidak ada, interaksi apa pun dengan
registration.pushManager
akan langsung mengakibatkan error, hasil yang sama seperti
jika pengguna menolak izin. Selain itu, perlu diingat bahwa
izin notifications
akan menyebabkan peringatan izin
ditampilkan saat penginstalan. Chrome juga akan menonaktifkan ekstensi untuk setiap penginstalan yang ada hingga pengguna menyetujui permintaan izin yang baru. Anda dapat mempelajari cara menangani hal ini lebih lanjut di panduan peringatan izin.
Penyedia push dan layanan Push
Setelah menambahkan izin ke manifest.json, Anda perlu mengonfigurasi koneksi antara backend dan ekstensi. Koneksi ini dapat dibagi menjadi dua bagian - penyedia Push dan layanan Push. Penyedia adalah SDK yang Anda gunakan untuk mengirim pesan ke layanan Push. Ada banyak opsi yang berbeda, dan setiap penyedia Push dapat berfungsi untuk Push API (meskipun mungkin tidak menawarkan SDK yang membuatnya mudah untuk diintegrasikan). Anda harus bereksperimen dengan SDK penyedia untuk melihat apa yang memungkinkan. Layanan Push adalah tempat perangkat pengguna akhir didaftarkan, sehingga dapat menerima pemberitahuan tentang setiap pesan push yang dikirim oleh penyedia Push. Hal ini adalah sesuatu yang tidak dapat Anda kontrol, karena di-hardcode ke dalam browser individual. Untuk Chrome, Firebase Cloud Messaging adalah layanan Push. Setiap pesan yang dikirim ke pengguna Chrome akan dirutekan melalui penyedia tersebut.
Menghosting penyedia Push secara mandiri
Semua penyedia Push dapat berfungsi, tetapi tidak semua penyedia menawarkan SDK yang berfungsi di pekerja layanan. Anda harus berkonsultasi dengan penyedia jika mengalami masalah saat menjalankannya. Namun, Anda tidak perlu menggunakan penyedia publik. Dengan menggunakan library seperti web-push, Anda dapat menghosting backend Anda sendiri.
Anda dapat menguji library ini menggunakan web-push-codelab.glitch.me. Secara khusus, Anda perlu menyalin kunci publik VAPID server Push untuk menghasilkan langganan Push di browser. Kunci publik ini sebenarnya adalah nilai biner berenkode base64 yang perlu didekode dan dikonversi menjadi Uint8Array agar dapat didaftarkan ke Pengelola Push browser. Ada library yang tersedia untuk menjalankan logika ini, tetapi hanya berikut ini yang diperlukan.
function urlB64ToUint8Array(base64String) {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
const rawData = atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
Nilai yang diberikan diteruskan ke Pengelola push
const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);
async function subscribe() {
try {
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey
});
console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);
return subscription
} catch (error) {
console.error('Subscribe error: ', error);
}
}
const subscription = await subscribe();
Fungsi subscribe
menampilkan PushSubscription, objek yang berisi metadata server Push. Karena Anda menggunakan
web-push-codelab.glitch.me, nilai ini perlu disalin ke
bagian Langganan Push pada halaman.
Setelah memiliki PushSubscription, Anda siap mendaftarkan pemroses untuk pesan push di pekerja layanan ekstensi kami.
self.addEventListener('push', function (event) {
console.log(`Push had this data/text: "${event.data.text()}"`);
});
Dengan menempatkan pemroses, Anda dapat mengirim pesan di web-push-codelab.glitch.me, dan pesan akan login ke konsol pekerja layanan.
Karena merupakan standar web terbuka, ada banyak dokumentasi tentang cara menerapkan Web Push, termasuk di blog Chrome. Untuk versi lengkap contoh yang dibahas di sini, versi tersebut tersedia di repo contoh ekstensi kami.
Dorong Senyap
Anda telah dapat menerima notifikasi Push di ekstensi Manifes v3
sejak Manifes v3 diperkenalkan di Chrome 88. Namun, selalu ada
persyaratan bahwa notifikasi menampilkan beberapa jenis dialog yang terlihat oleh pengguna,
seperti Notifikasi Web. Hal ini membuatnya jauh kurang berguna jika Anda ingin mendorong perintah atau update data ke ekstensi Anda tanpa mengganggu pengguna dengan informasi yang tidak perlu. Mulai Chrome 121, ekstensi
dapat menetapkan userVisibleOnly ke false
. Anda kini dapat mengirim notifikasi push senyap yang tidak ditampilkan kepada pengguna. Untuk menggunakannya,
tetapkan userVisibleOnly
ke false
saat Anda memanggil pushManager.subscribe
.
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: false,
applicationServerKey
});