Peristiwa push

Matt Gaunt

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

Peristiwa Push

Saat pesan diterima, maka akan mengakibatkan kejadian push dikirim di pekerja layanan Anda.

Kode untuk menyiapkan pemroses peristiwa push harus cukup mirip dengan peristiwa lainnya pemroses yang akan 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 paling aneh dari kode ini bagi sebagian besar developer yang baru mengenal pekerja layanan adalah self variabel. self biasanya digunakan di Web Worker, yaitu pekerja layanan. self merujuk ke cakupan global, seperti window di halaman web. Tapi untuk pekerja web dan pekerja layanan, self merujuk ke pekerja itu sendiri.

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

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()

Kebanyakan 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. Namun, kehilangan dua bagian fungsi yang sangat penting. Aplikasi tidak menampilkan notifikasi dan tidak menggunakan event.waitUntil().

Tunggu Sampai

Salah satu hal yang perlu dipahami tentang pekerja layanan adalah bahwa Anda memiliki sedikit kontrol terhadap kapan kode pekerja layanan akan dijalankan. Browser memutuskan kapan harus mengaktifkannya menghentikannya. Satu-satunya cara agar Anda dapat memberi tahu browser, "Hei, saya sangat sibuk melakukan hal penting stuff", adalah untuk meneruskan promise ke dalam metode event.waitUntil(). Dengan demikian, {i>browser<i} akan membuat pekerja layanan tetap berjalan sampai promise yang Anda teruskan telah diselesaikan.

Dalam peristiwa push, ada persyaratan tambahan bahwa Anda harus menampilkan notifikasi sebelum janji yang Anda sampaikan telah berakhir.

Berikut adalah contoh dasar cara 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.

Demi menjaga contoh ini sejelas mungkin, saya telah menetapkan promise ini ke variabel yang disebut promiseChain. Objek ini kemudian diteruskan ke event.waitUntil(). Saya tahu ini sangat bertele-tele, tetapi saya pernah melihat berbagai masalah yang berujung pada salah memahami apa yang harus diteruskan ke waitUntil() atau sebagai akibat dari pelanggaran promise jaringan.

Contoh yang lebih rumit dengan permintaan jaringan untuk data dan pelacakan kejadian push dengan analitik akan 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 bisa berpura-pura membuat permintaan jaringan kepada penyedia analisis kami. Kita juga membuat permintaan jaringan, mendapatkan respons dan menampilkan notifikasi menggunakan data respons untuk judul dan pesan dari notifikasi tersebut.

Kita bisa memastikan bahwa pekerja layanan tetap hidup saat kedua tugas ini dilakukan dengan menggabungkan promise ini dengan Promise.all(). Promise yang dihasilkan diteruskan ke event.waitUntil() artinya browser akan menunggu hingga kedua promise selesai sebelum memeriksa bahwa notifikasi telah ditampilkan dan menghentikan pekerja layanan.

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

Gambar notifikasi default di Chrome

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

Alasan utama mengapa developer mengetahui hal ini adalah karena kode mereka akan sering memanggil self.registration.showNotification(), tetapi mereka tidak melakukannya apa pun dengan promise yang ditampilkannya. Hal ini sesekali menghasilkan notifikasi default sedang ditampilkan. Misalnya, kita bisa menghapus {i>return<i} untuk self.registration.showNotification() dalam contoh di atas dan kita berisiko melihatnya notifikasi.

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 bahwa ada hal yang mudah terlewatkan.

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

Di bagian berikutnya, kita akan melihat apa yang bisa kita lakukan untuk menata gaya notifikasi dan konten apa yang dapat kita tampilkan.

Langkah berikutnya

Lab kode