Di ekstensi, Anda dapat menggunakan penyedia {i> Push<i} apa pun untuk mengirim notifikasi push dan membuat pesan teks. Sebuah push dari Push API akan diproses oleh pekerja layanan sebagai segera setelah diterima. Jika pekerja layanan telah ditangguhkan, Push akan membangunkan kembali. Proses untuk menggunakannya di ekstensi sama persis dengan yang Anda akan menggunakannya di web terbuka.
Mendapatkan izin untuk menggunakan Push API
Saat Anda mendaftarkan server Push di situs web biasa, pengguna akan diperlihatkan
permintaan izin akses untuk
memberikan atau menolaknya. Dengan ekstensi yang tidak akan
ditampilkan. Untuk menggunakan Push API di ekstensi, Anda harus menyetel
Izin notifications
dalam manifest.json
{
"manifest_version": 3,
...
"permissions": ["notifications"]
Jika Anda tidak memiliki izin ini, maka
semua interaksi dengan
registration.pushManager
akan langsung mengakibatkan error, hasil yang sama dengan
jika pengguna menolak izin. Selain itu, perhatikan bahwa
Izin notifications
akan menyebabkan peringatan izin
yang akan ditampilkan saat penginstalan. Chrome juga akan menonaktifkan ekstensi untuk
penginstalan yang ada hingga pengguna menyetujui permintaan izin baru. Anda dapat
pelajari lebih lanjut cara menangani hal ini di
panduan peringatan izin.
Penyedia push dan layanan Push
Setelah menambahkan izin ke manifest.json, Anda harus mengonfigurasi koneksi antara backend Anda dan ekstensi. Koneksi ini dapat dilihat dalam dua bagian - penyedia Push, dan layanan Push. J adalah SDK yang digunakan oleh Anda untuk mengirim pesan ke layanan Push. Terdapat banyak opsi, dan setiap penyedia Push dapat berfungsi untuk metode Push API (meskipun mungkin tidak menawarkan SDK yang memudahkan integrasi). Anda perlu bereksperimen dengan SDK penyedia Anda untuk melihat apa yang mungkin dilakukan. Dorongan layanan adalah tempat perangkat pengguna akhir didaftarkan, sehingga perangkat itu dapat diberi tahu ke pesan push apa pun yang dikirim oleh penyedia Push. Ini adalah sesuatu yang tidak dapat kendalikan, karena dikodekan ke dalam {i>browser<i} individual. Untuk Chrome, Firebase Cloud Messaging adalah layanan Push. Pesan apa pun yang dikirim ke Chrome yang akan dirutekan melalui jaringan tersebut.
Menghosting penyedia Push secara mandiri
Semua penyedia Push dapat berfungsi, tetapi tidak semua penyedia menawarkan SDK yang berfungsi pada pekerja layanan. Anda harus menghubungi penyedia jika Anda mengalami masalah menjalankannya. Namun, Anda tidak perlu menggunakan penyedia publik. Menggunakan library seperti web-push, Anda dapat menghosting backend Anda sendiri.
Anda dapat menguji {i>library<i} ini menggunakan web-push-codelab.glitch.me. Secara khusus, Anda perlu salin kunci publik VAPID server Push untuk membuat kunci berlangganan di browser. Kunci publik ini sebenarnya adalah base64 nilai biner yang dikodekan dan harus didekodekan dan dikonversi menjadi Uint8Array agar dapat mendaftar dengan Push browser Google Anda. Ada {i>library<i} yang tersedia untuk melakukan logika ini, tapi 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 tersebut 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
akan menampilkan PushSubscription,
yang berisi metadata server Push. Karena Anda menggunakan
web-push-codelab.glitch.me, nilai ini perlu disalin ke
bagian Langganan Push pada laman.
Setelah Anda memiliki PushSubscription, Anda siap untuk mendaftarkan pemroses untuk mengirim pesan push di pekerja layanan ekstensi kita.
self.addEventListener('push', function (event) {
console.log(`Push had this data/text: "${event.data.text()}"`);
});
Dengan pendengar, Anda dapat mengirim pesan di web-push-codelab.glitch.me, dan pesan akan login konsol pekerja layanan.
Karena ini adalah standar web terbuka, ada banyak dokumentasi tentang cara menerapkan Web Push, termasuk di blog Chrome. Untuk contoh lengkap yang dibahas di sini, tersedia di repo contoh ekstensi.
Dorong Senyap
Anda dapat menerima notifikasi Push di ekstensi Manifes v3 Anda
sejak Manifes v3 diperkenalkan di Chrome 88. Namun, selalu ada
persyaratan bahwa notifikasi menampilkan
semacam perintah yang terlihat oleh pengguna,
seperti Notifikasi Web. Hal ini membuatnya jauh
kurang berguna jika Anda
ingin mendorong perintah atau pembaruan data ke ekstensi Anda tanpa mengganggu
pengguna dengan informasi
yang tidak perlu. Mulai Chrome 121, ekstensi
dapat menetapkan userVisibleOnly ke false
. Sekarang Anda dapat mengirim
notifikasi push yang tidak ditampilkan kepada pengguna kepada pengguna Anda. Untuk menggunakannya,
setel userVisibleOnly
ke false
saat Anda memanggil pushManager.subscribe
.
let subscription = await self.registration.pushManager.subscribe({
userVisibleOnly: false,
applicationServerKey
});