Gunakan Web Push

Di ekstensi, Anda dapat menggunakan penyedia Push apa pun untuk mengirim notifikasi dan pesan 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 di ekstensi sama persis dengan yang Anda gunakan di web terbuka.

Mendapatkan izin untuk menggunakan Push API

Saat Anda mendaftarkan server Push di situs normal, pengguna akan melihat perintah izin untuk memberikan atau menolaknya. Pada ekstensi, dialog tidak akan ditampilkan. Untuk menggunakan Push API di ekstensi, Anda perlu menetapkan izin notifications di manifest.json

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

Jika Anda tidak memiliki izin ini, setiap interaksi 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 semua penginstalan yang ada hingga pengguna menyetujui permintaan izin baru. Anda dapat mempelajari lebih lanjut cara menanganinya di panduan peringatan izin.

Penyedia push dan layanan Push

Setelah menambahkan izin ke manifest.json, Anda harus mengonfigurasi koneksi antara backend dan ekstensi. Koneksi ini dapat dianggap dalam 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 penyedia Push apa pun dapat berfungsi untuk Push API (meskipun mereka mungkin tidak menawarkan SDK yang memudahkan integrasi). Anda harus bereksperimen dengan SDK penyedia untuk melihat kemungkinannya. Layanan Push adalah layanan yang digunakan untuk mendaftarkan perangkat pengguna akhir, sehingga perangkat dapat menerima pemberitahuan tentang pesan push yang dikirim oleh penyedia Push. Anda tidak dapat mengontrolnya, karena kode ini di-hardcode ke browser individual. Untuk Chrome, Firebase Cloud Messaging adalah layanan Push. Setiap pesan yang dikirim ke pengguna Chrome akan dirutekan melaluinya.

Menghosting sendiri penyedia Push

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 harus menyalin kunci publik VAPID server Push untuk membuat langganan Push di browser. Kunci publik ini sebenarnya adalah nilai biner berenkode base64 yang perlu didekode dan dikonversi menjadi Uint8Array untuk mendaftar ke Pengelola push browser. Ada library yang tersedia untuk menjalankan logika ini, tetapi hal berikut adalah 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 akan 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 di halaman.

Setelah memiliki PushSubscription, Anda siap untuk 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 pemroses yang tersedia, Anda dapat mengirimkan pesan di web-push-codelab.glitch.me, dan pesan akan dimasukkan ke dalam konsol pekerja layanan.

Karena merupakan standar web terbuka, ada banyak dokumentasi yang ada tentang cara menerapkan Web Push, termasuk di blog Chrome. Untuk versi lengkap contoh yang dibahas di sini, ada satu yang tersedia di repo contoh ekstensi kami.

Dorong Senyap

Anda dapat menerima notifikasi Push di ekstensi Manifes v3 sejak Manifes v3 diperkenalkan di Chrome 88. Namun, selalu ada persyaratan bahwa notifikasi harus menampilkan semacam perintah yang terlihat oleh pengguna, seperti Notifikasi Web. Hal ini membuat ekstensi menjadi jauh kurang berguna jika Anda ingin mendorong perintah atau pembaruan data ke ekstensi tanpa mengganggu pengguna dengan informasi yang tidak perlu. Mulai Chrome 121, ekstensi dapat menetapkan userVisibleOnly ke false. Sekarang Anda 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
});