Peristiwa push

Pada titik ini, kita membahas berlangganan pengguna dan mengirim pesan push. Langkah berikutnya adalah menerima pesan push ini di perangkat pengguna dan menampilkan notifikasi (serta melakukan pekerjaan lain yang mungkin ingin kita lakukan).

Peristiwa Dorongan

Saat pesan diterima, akan mengakibatkan peristiwa push yang dikirimkan dalam pekerja layanan Anda.

Kode untuk menyiapkan pemroses peristiwa push harus mirip dengan pemroses peristiwa lain yang Anda tulis di JavaScript:

self.addEventListener('push', function(event) {
    if (event.data) {
    console.log('This push event has data: ', event.data.text());
    } else {
    console.log('This push event has no data.');
    }
});

Bagian teraneh dari kode ini bagi sebagian besar developer yang baru menggunakan pekerja layanan adalah variabel self. self biasanya digunakan dalam Pekerja Web, yang merupakan pekerja layanan. self mengacu pada cakupan global, seperti window di halaman web. Namun, untuk pekerja web dan pekerja layanan, self mengacu pada pekerja itu sendiri.

Pada contoh di atas, self.addEventListener() dapat dianggap sebagai menambahkan pemroses peristiwa ke pekerja layanan itu sendiri.

Di dalam contoh peristiwa push, kita memeriksa apakah ada data dan mencetak sesuatu ke konsol.

Ada cara lain untuk mengurai data dari peristiwa push:

// Returns string
event.data.text()

// Parses data as JSON string and returns an Object
event.data.json()

// Returns blob of data
event.data.blob()

// Returns an arrayBuffer
event.data.arrayBuffer()

Sebagian besar orang menggunakan json() atau text() bergantung pada apa yang mereka harapkan dari aplikasi mereka.

Contoh ini menunjukkan cara menambahkan pemroses peristiwa push dan cara mengakses data, tetapi tidak ada dua bagian fungsi yang sangat penting. Ikon ini tidak menampilkan notifikasi dan tidak menggunakan event.waitUntil().

Tunggu Hingga

Salah satu hal yang perlu dipahami tentang pekerja layanan adalah Anda memiliki sedikit kontrol terkait kapan kode pekerja layanan akan dijalankan. Browser memutuskan kapan akan mengaktifkannya dan kapan harus menghentikannya. Satu-satunya cara Anda dapat memberi tahu browser, "Saya sangat sibuk melakukan hal-hal penting", adalah dengan meneruskan promise ke dalam metode event.waitUntil(). Dengan begitu, browser akan terus menjalankan pekerja layanan hingga promise yang Anda teruskan selesai.

Dengan peristiwa push, ada persyaratan tambahan bahwa Anda harus menampilkan notifikasi sebelum promise yang Anda teruskan telah diselesaikan.

Berikut adalah contoh dasar menampilkan notifikasi:

self.addEventListener('push', function(event) {
    const promiseChain = self.registration.showNotification('Hello, World.');

    event.waitUntil(promiseChain);
});

Memanggil self.registration.showNotification() adalah metode yang menampilkan notifikasi kepada pengguna dan menampilkan promise yang akan diselesaikan setelah notifikasi ditampilkan.

Agar contoh ini sejelas mungkin, saya telah menetapkan promise ini ke variabel yang disebut promiseChain. Nilai ini kemudian diteruskan ke event.waitUntil(). Saya tahu cara ini sangat panjang, tetapi saya telah melihat sejumlah masalah yang memuncak sebagai akibat dari kesalahpahaman tentang apa yang harus diteruskan ke waitUntil() atau akibat dari promise chain yang rusak.

Contoh yang lebih rumit dengan permintaan jaringan untuk data dan melacak peristiwa push dengan analisis dapat terlihat seperti ini:

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        return self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

Di sini kita memanggil fungsi yang menampilkan promise pushReceivedTracking(), yang, sebagai contoh, kita dapat berpura-pura akan membuat permintaan jaringan ke penyedia analisis. Kami juga membuat permintaan jaringan, mendapatkan respons dan menampilkan notifikasi menggunakan data respons untuk judul dan pesan notifikasi.

Kita dapat memastikan pekerja layanan tetap aktif meskipun kedua tugas ini dilakukan dengan menggabungkan janji ini dengan Promise.all(). Promise yang dihasilkan diteruskan ke event.waitUntil(), yang berarti browser akan menunggu hingga kedua promise selesai sebelum memeriksa apakah notifikasi telah ditampilkan dan menghentikan pekerja layanan.

Alasan kami harus mengkhawatirkan waitUntil() dan cara menggunakannya adalah salah satu masalah paling umum yang dihadapi developer adalah saat rantai promise salah / rusak, Chrome akan menampilkan notifikasi "default" ini:

Gambar notifikasi default di Chrome

Chrome hanya akan menampilkan notifikasi "Situs ini telah diperbarui di latar belakang". saat pesan push diterima dan peristiwa push di pekerja layanan tidak menampilkan notifikasi setelah promise yang diteruskan ke event.waitUntil() selesai.

Alasan utama developer menemukan hal ini adalah karena kode mereka sering memanggil self.registration.showNotification(), tetapi mereka tidak melakukan apa pun dengan promise yang ditampilkannya. Hal ini sesekali mengakibatkan notifikasi default ditampilkan. Misalnya, kita dapat menghapus hasil untuk self.registration.showNotification() dalam contoh di atas dan kita berisiko melihat notifikasi ini.

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

Anda dapat melihat bagaimana ini adalah hal yang mudah untuk dilewatkan.

Perlu diingat - jika Anda melihat notifikasi tersebut, periksa rantai promise dan event.waitUntil() Anda.

Di bagian berikutnya, kita akan melihat hal yang dapat dilakukan untuk menata gaya notifikasi dan konten yang dapat ditampilkan.

Langkah berikutnya

Lab kode