Notifikasi Push di Open Web

Jika Anda bertanya kepada developer mengenai fitur perangkat seluler apa saja yang tidak ada di web, notifikasi push selalu berada paling atas dalam daftar.

Notifikasi push memungkinkan pengguna memilih untuk menerima info terbaru secara tepat waktu dari situs yang mereka Anda sukai dan memungkinkan Anda melibatkan kembali mereka secara efektif dengan konten yang disesuaikan dan menarik.

Mulai Chrome versi 42, Push API dan Notification API tersedia untuk developer.

Push API di Chrome bergantung pada beberapa teknologi yang berbeda, termasuk Manifes Aplikasi Web dan Service Worker. Dalam postingan ini kita akan melihat masing-masing teknologi ini, tetapi hanya minimal untuk mengaktifkan dan menjalankan pesan push. Untuk mendapatkan pemahaman yang lebih baik tentang beberapa fitur manifes lainnya dan kemampuan offline pekerja layanan, lihat link di atas.

Kita juga akan melihat apa yang akan ditambahkan ke API di Chrome versi mendatang, dan akhirnya kita akan memiliki FAQ.

Menerapkan Pesan Push untuk Chrome

Bagian ini menjelaskan setiap langkah yang perlu Anda selesaikan untuk mendukung push dalam aplikasi web Anda.

Mendaftarkan Service Worker

Terdapat ketergantungan pada pekerja layanan untuk mengimplementasikan pesan push bagi web. Alasannya adalah karena ketika pesan {i>push<i} diterima, browser dapat memulai pekerja layanan, yang berjalan di latar belakang tanpa terbuka, dan mengirim peristiwa sehingga Anda dapat memutuskan cara menanganinya pesan push.

Di bawah ini adalah contoh cara mendaftarkan pekerja layanan di aplikasi web Anda. Kapan pendaftaran berhasil diselesaikan, kita panggil initialiseState(), yang akan segera kita bahas.

var isPushEnabled = false;

…

window.addEventListener('load', function() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.addEventListener('click', function() {
    if (isPushEnabled) {
        unsubscribe();
    } else {
        subscribe();
    }
    });

    // Check that service workers are supported, if so, progressively
    // enhance and add push messaging support, otherwise continue without it.
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(initialiseState);
    } else {
    console.warn('Service workers aren\'t supported in this browser.');
    }
});

Pengendali klik tombol membuat pengguna berlangganan atau menghentikan langganan untuk mengirim pesan push. isPushEnabled adalah variabel global yang hanya melacak apakah push saat ini berlangganan atau tidak. Hal ini akan menjadi referensi pada seluruh cuplikan kode.

Kemudian, kami akan memeriksa apakah pekerja layanan didukung sebelum mendaftarkan service-worker.js yang memiliki logika untuk menangani pesan push. Kita hanya memberi tahu browser bahwa file JavaScript ini adalah pekerja layanan untuk situs kita.

Menyiapkan Status Awal

Contoh UX pesan push yang diaktifkan dan dinonaktifkan di Chrome.

Setelah pekerja layanan terdaftar, kita perlu menyiapkan status UI.

Pengguna akan mengharapkan UI sederhana untuk mengaktifkan atau menonaktifkan pesan push untuk situs Anda, serta berharap perangkat tetap mengikuti perubahan yang terjadi. Di kata. Jika kata kunci tersebut mengaktifkan pesan push untuk situs Anda, keluar dan kembali minggu kemudian, UI Anda akan menyoroti bahwa pesan push sudah diaktifkan.

Anda dapat menemukan beberapa panduan UX di dokumen ini, dalam artikel ini kami akan berfokus pada aspek teknis.

Pada titik ini Anda mungkin berpikir hanya ada dua keadaan yang harus ditangani, diaktifkan atau dinonaktifkan. Namun, ada beberapa negara bagian lain yang notifikasi yang perlu Anda pertimbangkan.

Diagram yang menyoroti berbagai pertimbangan dan status push di Chrome

Ada sejumlah API yang perlu kita periksa sebelum mengaktifkan tombol, dan jika semuanya didukung, kita dapat mengaktifkan UI dan mengatur status awal ke menunjukkan apakah pesan push berlangganan atau tidak.

Karena sebagian besar pemeriksaan ini mengakibatkan UI kita dinonaktifkan, Anda harus mengatur status awal ke nonaktif. Hal ini juga menghindari kesimpangsiuran terjadi masalah pada JavaScript halaman Anda, misalnya file JS tidak dapat diunduh atau pengguna menonaktifkan JavaScript.

<button class="js-push-button" disabled>
    Enable Push Messages
</button>

Dengan status awal ini, kita dapat melakukan pemeriksaan yang diuraikan di atas dalam Metode initialiseState(), yaitu setelah pekerja layanan terdaftar.

// Once the service worker is registered set the initial state
function initialiseState() {
    // Are Notifications supported in the service worker?
    if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
    console.warn('Notifications aren\'t supported.');
    return;
    }

    // Check the current Notification permission.
    // If its denied, it's a permanent block until the
    // user changes the permission
    if (Notification.permission === 'denied') {
    console.warn('The user has blocked notifications.');
    return;
    }

    // Check if push messaging is supported
    if (!('PushManager' in window)) {
    console.warn('Push messaging isn\'t supported.');
    return;
    }

    // We need the service worker registration to check for a subscription
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // Do we already have a push message subscription?
    serviceWorkerRegistration.pushManager.getSubscription()
        .then(function(subscription) {
        // Enable any UI which subscribes / unsubscribes from
        // push messages.
        var pushButton = document.querySelector('.js-push-button');
        pushButton.disabled = false;

        if (!subscription) {
            // We aren't subscribed to push, so set UI
            // to allow the user to enable push
            return;
        }

        // Keep your server in sync with the latest subscriptionId
        sendSubscriptionToServer(subscription);

        // Set your UI to show they have subscribed for
        // push messages
        pushButton.textContent = 'Disable Push Messages';
        isPushEnabled = true;
        })
        .catch(function(err) {
        console.warn('Error during getSubscription()', err);
        });
    });
}

Ringkasan singkat tentang langkah-langkah tersebut:

  • Kami memeriksa apakah showNotification tersedia di ServiceWorkerRegistration prototipe. Tanpa itu, kita tidak dapat menampilkan notifikasi dari pekerja layanan saat pesan push diterima.
  • Kita akan memeriksa apa Notification.permission saat ini untuk memastikan bahwa ini tidak "denied". Jika izin ditolak berarti Anda tidak dapat menampilkan notifikasi hingga pengguna mengubah izin akses di browser secara manual.
  • Untuk memeriksa apakah pesan push didukung, periksa apakah PushManager didukung yang tersedia di objek window.
  • Terakhir, kita menggunakan pushManager.getSubscription() untuk memeriksa apakah kita sudah memiliki langganan atau tidak. Jika kami melakukannya, kami akan mengirimkan detail langganan ke server untuk memastikan kita memiliki informasi yang tepat dan mengatur UI kita untuk menunjukkan apakah pesan push itu sudah diaktifkan atau belum. Kita akan melihat detail apa ada dalam objek langganan nanti dalam artikel ini.

Kami menunggu hingga navigator.serviceWorker.ready diselesaikan untuk memeriksa berlangganan dan mengaktifkan tombol {i>push button<i} karena hanya setelah layanan aktif sehingga Anda dapat benar-benar berlangganan ke pesan push.

Langkah berikutnya adalah menangani ketika pengguna ingin mengaktifkan pesan push, sebelum dapat melakukannya, kita perlu menyiapkan project Google Developers Console dan menambahkan beberapa parameter ke manifes untuk menggunakan Firebase Cloud Messaging (FCM), sebelumnya dikenal sebagai Google Cloud Messaging (GCM).

Membuat Project di Firebase Developer Console

Chrome menggunakan FCM untuk menangani pengiriman dan pengiriman pesan push; Namun, untuk menggunakan FCM API, Anda perlu menyiapkan project di Firebase Developer Console.

Langkah-langkah berikut khusus untuk Chrome, Opera untuk Android, dan Samsung Browser tempat pengguna menggunakan FCM. Kami akan membahas bagaimana hal ini akan bekerja di {i>browser<i} lain nanti dalam artikel ini.

Membuat Project Developer Firebase baru

Untuk memulai, Anda harus membuat project baru di https://console.firebase.google.com/ dengan mengklik 'Create New Project'.

Screenshot Project Firebase Baru

Tambahkan nama project, buat project, dan Anda akan diarahkan ke project tersebut {i>dashboard<i}:

Beranda Project Firebase

Dari dasbor ini, klik roda gigi di samping nama project Anda di bagian atas pojok kiri dan klik 'Setelan Proyek'.

Menu Setelan Project Firebase

Di halaman setelan, klik tombol 'Cloud Messaging' .

Menu Cloud Messaging Project Firebase

Halaman ini berisi kunci API untuk pesan push, yang nanti akan kita gunakan, dan ID pengirim yang perlu kita masukkan ke dalam manifes aplikasi web bagian.

Menambahkan Manifes Aplikasi Web

Untuk push, kita perlu menambahkan file manifes dengan kolom gcm_sender_id, agar langganan push berhasil. Parameter ini hanya dibutuhkan oleh Chrome, Opera untuk Android, dan Browser Samsung sehingga dapat menggunakan FCM / GCM.

gcm_sender_id digunakan oleh browser ini saat ia membuat pengguna berlangganan dengan FCM. Ini berarti bahwa FCM dapat mengidentifikasi perangkat pengguna dan membuat pastikan ID pengirim Anda cocok dengan kunci API yang sesuai dan pengguna telah mengizinkan server Anda untuk mengirim pesan push.

Berikut adalah file manifes yang sangat sederhana:

{
    "name": "Push Demo",
    "short_name": "Push Demo",
    "icons": [{
        "src": "images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
        }],
    "start_url": "/index.html?homescreen=1",
    "display": "standalone",
    "gcm_sender_id": "<Your Sender ID Here>"
}

Anda harus menetapkan nilai gcm_sender_id ke ID pengirim dari project Firebase Anda.

Setelah Anda menyimpan file manifes dalam proyek Anda (manifes.json adalah nama), referensikan dari HTML Anda dengan tag berikut di bagian kepala kami.

<link rel="manifest" href="/manifest.json">

Jika Anda tidak menambahkan manifes web dengan parameter ini, Anda akan mendapatkan pengecualian saat Anda mencoba membuat pengguna berlangganan untuk mengirim pesan, dengan kesalahan "Registration failed - no sender id provided" atau "Registration failed - permission denied".

Berlangganan Pesan Push

Setelah menyiapkan manifes, Anda dapat kembali ke JavaScript situs Anda.

Untuk berlangganan, Anda harus memanggil metode subscribe() di PushManager, yang Anda akses melalui ServiceWorkerRegistration.

Tindakan ini akan meminta pengguna untuk memberikan izin origin Anda untuk mengirim push notifikasi. Tanpa izin ini, Anda tidak akan berhasil berlangganan.

Jika promise ditampilkan oleh metode subscribe() yang di-resolve, Anda akan diberi PushSubscription yang akan berisi endpoint.

Endpoint harus disimpan di server Anda untuk setiap karena Anda akan membutuhkannya untuk mengirimkan pesan {i>push<i} di kemudian hari.

Kode berikut membuat pengguna berlangganan pesan push:

function subscribe() {
    // Disable the button so it can't be changed while
    // we process the permission request
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    serviceWorkerRegistration.pushManager.subscribe()
        .then(function(subscription) {
        // The subscription was successful
        isPushEnabled = true;
        pushButton.textContent = 'Disable Push Messages';
        pushButton.disabled = false;

        // TODO: Send the subscription.endpoint to your server
        // and save it to send a push message at a later date
        return sendSubscriptionToServer(subscription);
        })
        .catch(function(e) {
        if (Notification.permission === 'denied') {
            // The user denied the notification permission which
            // means we failed to subscribe and the user will need
            // to manually change the notification permission to
            // subscribe to push messages
            console.warn('Permission for Notifications was denied');
            pushButton.disabled = true;
        } else {
            // A problem occurred with the subscription; common reasons
            // include network errors, and lacking gcm_sender_id and/or
            // gcm_user_visible_only in the manifest.
            console.error('Unable to subscribe to push.', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        }
        });
    });
}

Pada tahap ini, aplikasi web Anda siap untuk menerima pesan push, meskipun tidak ada akan terjadi sampai kita menambahkan pemroses peristiwa push ke file pekerja layanan.

Pemroses Peristiwa Push Service Worker

Saat pesan push diterima (kita akan membahas cara mengirim push pesan di bagian berikutnya), peristiwa push akan dikirim ke pekerja layanan, dan pada saat itu Anda perlu untuk menampilkan notifikasi.

self.addEventListener('push', function(event) {
    console.log('Received a push message', event);

    var title = 'Yay a message.';
    var body = 'We have received a push message.';
    var icon = '/images/icon-192x192.png';
    var tag = 'simple-push-demo-notification-tag';

    event.waitUntil(
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag
    })
    );
});

Kode ini mendaftarkan pemroses peristiwa push dan menampilkan notifikasi dengan judul, teks isi, ikon, dan tag notifikasi yang telah ditentukan sebelumnya. Satu hal kecil yang perlu disoroti dengan contoh ini adalah event.waitUntil() . Metode ini mengambil promise dan memperluas masa aktif pengendali peristiwa (atau dapat dianggap sebagai mempertahankan layanan pekerja hidup), sampai promise tersebut selesai; Dalam hal ini, promise yang diteruskan ke event.waitUntil adalah Promise yang ditampilkan, dari showNotification().

Tag notifikasi berfungsi sebagai ID untuk notifikasi unik. Jika kita mengirim dua pesan {i> push<i} ke alamat email yang sama, endpoint, dengan penundaan singkat di antara keduanya, dan menampilkan notifikasi dengan tag yang sama, browser akan menampilkan notifikasi pertama dan menggantinya dengan notifikasi kedua ketika pesan push diterima.

Jika Anda ingin menampilkan beberapa notifikasi sekaligus, gunakan tag yang berbeda, atau tidak memiliki tag sama sekali. Kita akan melihat contoh yang lebih lengkap untuk menampilkan notifikasi nanti dalam postingan. Untuk saat ini, mari kita tetap sederhana dan lihat apakah mengirim pesan {i>push<i} menunjukkan notifikasi ini.

Mengirim Pesan Push

Kita telah berlangganan pesan push dan pekerja layanan siap menampilkan jadi ini saatnya mengirim pesan push melalui FCM.

Ini hanya berlaku untuk browser yang menggunakan FCM.

Saat Anda mengirim variabel PushSubscription.endpoint ke server, khusus untuk FCM. Kode ini memiliki parameter di akhir URL yang adalah registration_id.

Contoh endpoint adalah:

https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

URL FCM adalah:

https://fcm.googleapis.com/fcm/send

registration_id akan menjadi:

APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

Ini khusus untuk browser yang menggunakan FCM. Pada browser biasa, Anda akan mendapatkan titik akhir dan Anda akan memanggil endpoint itu dengan cara standar dan alamat itu akan berfungsi terlepas dari URL-nya.

Artinya, di server, Anda harus memeriksa apakah endpoint untuk FCM, dan jika ya, ekstrak Registration_id-nya. Untuk melakukannya di Python, Anda bisa melakukan sesuatu seperti:

if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
    endpointParts = endpoint.split('/')
    registrationId = endpointParts[len(endpointParts) - 1]

    endpoint = 'https://fcm.googleapis.com/fcm/send'

Setelah mendapatkan ID pendaftaran, Anda dapat melakukan panggilan ke FCM API. Anda dapat menemukan dokumen referensi tentang FCM API di sini.

Aspek utama yang perlu diingat saat memanggil FCM adalah:

  • Header Authorization dengan nilai key=&lt;YOUR_API_KEY&gt; harus ditetapkan saat Anda memanggil API, dengan &lt;YOUR_API_KEY&gt; sebagai Kunci API dari project Firebase.
    • Kunci API digunakan oleh FCM untuk menemukan ID pengirim yang tepat. pengguna telah memberikan izin untuk proyek Anda dan akhirnya untuk memastikan alamat IP server diizinkan untuk project tersebut.
  • Header Content-Type yang sesuai dari application/json atau application/x-www-form-urlencoded;charset=UTF-8 bergantung pada apakah Anda mengirim data sebagai JSON atau data formulir.
  • Array registration_ids - ini adalah ID pendaftaran yang akan Anda yang telah diekstrak dari endpoint dari pengguna Anda.

Harap lihat dokumennya tentang cara mengirim pesan {i>push<i} dari server Anda, tetapi untuk pemeriksaan cepat pekerja layanan, Anda dapat menggunakan cURL untuk mengirim pesan push ke browser Anda.

Menukar &lt;YOUR_API_KEY&gt; dan &lt;YOUR_REGISTRATION_ID&gt; di perintah cURL ini dengan Anda sendiri dan jalankan dari terminal.

Anda akan melihat notifikasi yang indah:

    curl --header "Authorization: key=<YOUR_API_KEY>" --header
    "Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
    "{\"registration_ids\":[\"<YOUR_REGISTRA>TION_ID\"]}"
Contoh pesan push dari Chrome untuk Android.

Saat mengembangkan logika backend, ingatlah bahwa header Otorisasi dan format isi POST bersifat khusus untuk endpoint FCM, jadi deteksi endpoint adalah untuk FCM dan menambahkan header serta memformat isi POST secara bersyarat. Untuk browser lain (dan semoga Chrome di masa mendatang) Anda perlu menerapkan Web Push Protocol.

Kelemahan dari implementasi Push API saat ini di Chrome adalah Anda tidak dapat mengirim data apa pun dengan pesan push. Tidak, tidak ada. Alasannya adalah bahwa dalam implementasi di masa depan, data {i>payload<i} harus dienkripsi pada server sebelum dikirim ke titik akhir pesan push. Dengan cara ini, endpoint, penyedia {i>push<i} apa pun itu, tidak akan dapat dengan mudah melihat konten dari pesan push. Cara ini juga melindungi dari kerentanan lain seperti validasi sertifikat HTTPS dan serangan {i>man-in-the-middle<i} antara server dan penyedia push. Namun, enkripsi ini belum didukung, jadi sementara itu Anda harus melakukan pengambilan untuk mendapatkan informasi yang dibutuhkan akan mengisi notifikasi.

Contoh Peristiwa Push yang Lebih Lengkap

Notifikasi yang kita lihat sejauh ini cukup mendasar dan mengenai contoh, aplikasi ini tidak cukup baik dalam membahas kasus penggunaan di dunia nyata.

Secara realistis, kebanyakan orang ingin mendapatkan beberapa informasi dari server mereka sebelum menampilkan notifikasi. Ini bisa berupa data untuk mengisi judul notifikasi dan pesan dengan sesuatu yang spesifik, atau melangkah lebih jauh dan menyimpan beberapa halaman atau data ke dalam cache sehingga ketika pengguna mengeklik notifikasi, semuanya langsung tersedia saat browser dibuka—bahkan jika jaringan tidak tersedia pada saat itu.

Dalam kode berikut, kita mengambil beberapa data dari API, mengonversi respons menjadi dan menggunakannya untuk mengisi notifikasi.

self.addEventListener('push', function(event) {
    // Since there is no payload data with the first version
    // of push messages, we'll grab some data from
    // an API and use it to populate a notification
    event.waitUntil(
    fetch(SOME_API_ENDPOINT).then(function(response) {
        if (response.status !== 200) {
        // Either show a message to the user explaining the error
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        throw new Error();
        }

        // Examine the text in the response
        return response.json().then(function(data) {
        if (data.error || !data.notification) {
            console.error('The API returned an error.', data.error);
            throw new Error();
        }

        var title = data.notification.title;
        var message = data.notification.message;
        var icon = data.notification.icon;
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
        });
    }).catch(function(err) {
        console.error('Unable to retrieve data', err);

        var title = 'An error occurred';
        var message = 'We were unable to get the information for this push message';
        var icon = URL_TO_DEFAULT_ICON;
        var notificationTag = 'notification-error';
        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
    })
    );
});

Sekali lagi, perlu diingat bahwa event.waitUntil() memiliki yang menghasilkan promise yang ditampilkan oleh showNotification(), yang berarti bahwa pemroses peristiwa tidak akan keluar sampai panggilan fetch() asinkron selesai, dan notifikasi ditampilkan.

Anda akan melihat bahwa kami menampilkan notifikasi bahkan saat terjadi error. Ini adalah karena jika tidak, Chrome akan menampilkan notifikasi umum miliknya.

Membuka URL saat Pengguna Mengklik Notifikasi

Saat pengguna mengklik notifikasi, peristiwa notificationclick akan dikirim dalam pekerja layanan Anda. Dalam pengendali, Anda dapat mengambil tindakan yang sesuai, seperti memfokuskan tab atau membuka jendela dengan URL tertentu:

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    // Android doesn't close the notification when you click on it
    // See: http://crbug.com/463146
    event.notification.close();

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(
    clients.matchAll({
        type: "window"
    })
    .then(function(clientList) {
        for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == '/' && 'focus' in client)
            return client.focus();
        }
        if (clients.openWindow) {
        return clients.openWindow('/');
        }
    })
    );
});

Contoh ini membuka browser ke {i>root <i}asal situs, dengan memfokuskan tab origin yang sama jika sudah ada, dan jika tidak, akan membuka tab baru.

Ada postingan khusus tentang beberapa hal yang dapat Anda lakukan dengan Notification API di sini.

Berhenti Berlangganan Perangkat Pengguna

Anda telah berlangganan perangkat pengguna dan mereka menerima pesan push, tetapi bagaimana cara berhenti berlangganan?

Hal utama yang diperlukan untuk menghentikan langganan perangkat pengguna adalah memanggil metode metode unsubscribe() di PushSubscription dan menghapus endpoint dari server Anda (agar Anda tidak mengirim pesan push yang Anda tahu tidak akan diterima). Kode di bawah melakukan persis seperti ini:

function unsubscribe() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // To unsubscribe from push messaging, you need get the
    // subscription object, which you can call unsubscribe() on.
    serviceWorkerRegistration.pushManager.getSubscription().then(
        function(pushSubscription) {
        // Check we have a subscription to unsubscribe
        if (!pushSubscription) {
            // No subscription object, so set the state
            // to allow the user to subscribe to push
            isPushEnabled = false;
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            return;
        }

        var subscriptionId = pushSubscription.subscriptionId;
        // TODO: Make a request to your server to remove
        // the subscriptionId from your data store so you
        // don't attempt to send them push messages anymore

        // We have a subscription, so call unsubscribe on it
        pushSubscription.unsubscribe().then(function(successful) {
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            isPushEnabled = false;
        }).catch(function(e) {
            // We failed to unsubscribe, this can lead to
            // an unusual state, so may be best to remove
            // the users data from your data store and
            // inform the user that you have done so

            console.log('Unsubscription error: ', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        });
        }).catch(function(e) {
        console.error('Error thrown while unsubscribing from push messaging.', e);
        });
    });
}

Menjaga Langganan Tetap Terbaru

Langganan mungkin tidak sinkron antara FCM dan server Anda. Pastikan server Anda mengurai isi respons dari POST dari FCM API, mencari Hasil error:NotRegistered dan canonical_id, seperti yang dijelaskan dalam dokumentasi FCM.

Langganan juga mungkin tidak sinkron antara pekerja layanan dan server tertentu. Misalnya, setelah berhasil berlangganan/berhenti berlangganan, grup data yang tidak stabil koneksi jaringan dapat mencegah Anda memperbarui server; atau pengguna mungkin mencabut izin notifikasi, yang memicu penghentian langganan otomatis. Nama sebutan akun kasus semacam itu dengan memeriksa hasil serviceWorkerRegistration.pushManager.getSubscription() secara berkala (mis. saat pemuatan halaman) dan menyinkronkannya dengan server. Anda mungkin juga ingin berlangganan kembali secara otomatis jika Anda tidak lagi memiliki langganan dan Notification.permission == 'granted'.

Dalam sendSubscriptionToServer(), Anda perlu mempertimbangkan cara menangani permintaan jaringan yang gagal saat memperbarui endpoint. Salah satu solusinya adalah untuk melacak status endpoint dalam cookie untuk menentukan apakah server Anda membutuhkan detail terbaru atau tidak.

Semua langkah di atas menghasilkan implementasi penuh pesan push pada web di Chrome 46. Masih ada fitur khusus yang akan memudahkan proses (seperti API standar untuk memicu pesan push), tetapi rilis ini memungkinkan Anda untuk mulai membangun pesan push ke dalam aplikasi web Anda sekarang.

Cara Men-debug Aplikasi Web Anda

Saat mengimplementasikan pesan push, bug akan muncul di salah satu dari dua tempat: halaman Anda atau pekerja layanan Anda.

{i>Bug<i} di laman dapat di-debug menggunakan DevTools yang lama. Untuk men-debug pekerja layanan masalah, Anda memiliki dua opsi:

  1. Buka chrome://inspect > Pekerja layanan. Tampilan ini tidak memberikan banyak informasi selain pekerja layanan yang sedang berjalan.
  2. Buka chrome://serviceworker-internals dan dari sini Anda dapat melihat status pekerja layanan, dan melihat kesalahan, jika ada. Halaman ini sementara hingga DevTools memiliki set fitur yang serupa.

Salah satu tips terbaik yang dapat saya berikan kepada siapa saja yang baru mengenal pekerja layanan adalah penggunaan kotak centang yang disebut "Buka jendela DevTools dan jeda eksekusi JavaScript pada startup service worker untuk proses debug." Kotak centang ini akan menambahkan titik henti sementara pada memulai pekerja layanan dan menjeda eksekusi, hal ini memungkinkan Anda melanjutkan atau menjalankan skrip pekerja layanan Anda dan melihat apakah Anda menekan menyelesaikan semua jenis permasalahan.

Screenshot yang menunjukkan letak kotak centang jeda eksekusi di internal serviceworker.

Jika tampaknya ada masalah antara FCM dan peristiwa push pekerja layanan Anda, maka tidak banyak yang dapat Anda lakukan untuk men-{i>debug<i} masalah karena tidak ada cara untuk melihat apakah Chrome menerima sesuatu. Hal utama yang harus dipastikan adalah bahwa dari FCM akan berhasil saat server melakukan panggilan API. Alat tersebut akan terlihat sesuatu seperti:

{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}

Perhatikan respons "success": 1. Jika Anda melihat kegagalan, maka menunjukkan bahwa ada masalah dengan ID pendaftaran FCM dan push pesan tidak terkirim ke Chrome.

Men-debug Service Worker di Chrome untuk Android

Saat ini, proses debug pekerja layanan di Chrome untuk Android belum jelas. Anda perlu membuka chrome://inspect, temukan perangkat Anda, dan mencari item daftar dengan nama "Worker pid:...." yang memiliki URL layanan Anda pekerja.

Screenshot yang menunjukkan tempat pekerja layanan tinggal di pemeriksaan Chrome

UX untuk Notifikasi Push

Tim Chrome telah menyusun dokumen praktik terbaik untuk UX notifikasi push serta dokumen yang membahas beberapa kasus ekstrem saat bekerja dengan notifikasi push.

Masa Depan Pesan Push di Chrome dan Open Web

Bagian ini membahas sedikit detail seputar beberapa fitur Chrome bagian tertentu dari implementasi ini yang harus Anda ketahui dan bagaimana hal itu akan berbeda dari implementasi browser lainnya.

Protokol Push Web dan Endpoint

Keindahan standar Push API adalah Anda harus dapat mengambil endpoint, meneruskannya ke server Anda dan mengirim push pesan baru dengan menerapkan Web Push Protocol.

{i>Web Push Protocol<i} adalah standar baru yang dapat diimplementasikan oleh penyedia {i>push<i}, memungkinkan pengembang tidak perlu khawatir tentang siapa penyedia {i>push<i}. Tujuan idenya adalah hal ini menghindari keharusan mendaftar untuk kunci API dan mengirim data berformat, seperti yang harus Anda lakukan dengan FCM.

Chrome adalah browser pertama yang menerapkan Push API dan FCM tidak mendukung {i>Web Push Protocol<i}, yang merupakan alasan mengapa Chrome memerlukan gcm_sender_id dan Anda perlu menggunakan API tenang untuk FCM.

Tujuan akhir Chrome adalah beralih ke penggunaan Web Push Protocol dengan Chrome dan FCM.

Sebelum itu, Anda perlu mendeteksi endpoint &quot;https://fcm.googleapis.com/fcm/send&quot; dan menanganinya secara terpisah dari endpoint lain, yaitu memformat data payload dalam cara tertentu dan menambahkan kunci Otorisasi.

Bagaimana cara Mengimplementasikan Web Push Protocol?

Firefox Nightly saat ini sedang diluncurkan dan kemungkinan akan menjadi browser pertama untuk menerapkan Web Push Protocol.

FAQ

Di mana spesifikasinya?

https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/

Dapatkah saya mencegah notifikasi duplikat jika kehadiran web saya memiliki beberapa asal, atau jika saya memiliki kehadiran web dan native?

Saat ini belum ada solusi untuk hal ini, tetapi Anda dapat mengikuti progresnya di Chromium.

Skenarionya adalah memiliki semacam ID untuk perangkat pengguna, lalu di sisi server mencocokkan dengan ID langganan aplikasi asli dan aplikasi web memutuskan ke mana pesan push akan dikirim. Anda dapat melakukan ini melalui ukuran layar, model perangkat, berbagi kunci yang dihasilkan antara aplikasi web dan aplikasi native, tetapi setiap pendekatan memiliki pro dan kontra.

Mengapa saya memerlukan GUID_Sender_id?

Tindakan ini diperlukan agar Chrome, Opera untuk Android, dan Browser Samsung dapat menggunakan API Firebase Cloud Messaging (FCM). Tujuannya adalah untuk menggunakan Web Push Protocol setelah standar ditetapkan dan FCM dapat mendukungnya.

Mengapa tidak menggunakan Web Sockets atau Server-Sent Events (EventSource)?

Keuntungan menggunakan pesan push adalah bahwa meskipun halaman Anda ditutup, pekerja layanan akan diaktifkan dan dapat menampilkan notifikasi. Soket Web dan EventSource menutup koneksinya saat halaman atau browser ditutup.

Bagaimana jika saya tidak memerlukan pengiriman peristiwa latar belakang?

Jika Anda tidak memerlukan pengiriman di latar belakang, maka Web Sockets adalah pilihan yang bagus.

Kapan saya dapat menggunakan push tanpa menampilkan notifikasi (yaitu push latar belakang senyap)?

Belum ada linimasa terkait kapan fitur ini akan tersedia, tetapi ada untuk menerapkan sinkronisasi latar belakang dan meskipun belum diputuskan atau ditetapkan, ada beberapa diskusi tentang push senyap dengan sinkronisasi latar belakang.

Mengapa hal ini memerlukan HTTPS? Bagaimana cara mengatasi hal ini selama pengembangan?

Pekerja layanan memerlukan origin yang aman untuk memastikan bahwa skrip pekerja layanan berasal dari asal yang dimaksudkan dan bukan berasal dari serangan. Saat ini, itu berarti menggunakan HTTPS di situs aktif, meskipun {i>localhost<i} akan bekerja selama pengembangan.

Seperti apa dukungan browser?

Chrome didukung dalam versi stabilnya dan Mozilla telah bekerja di Firefox Nightly. Lihat bug menerapkan Push API untuk info selengkapnya dan Anda dapat melacak penerapan Notifikasinya di sini.

Dapatkah saya menghapus notifikasi setelah jangka waktu tertentu?

Saat ini hal ini tidak memungkinkan, tetapi kami berencana menambahkan dukungan untuk mendapatkan daftar notifikasi yang saat ini terlihat. Jika Anda memiliki kasus penggunaan untuk kedaluwarsa untuk notifikasi setelah ditampilkan dibuat, kami ingin tahu apa itu, jadi tambahkan komentar dan kami akan meneruskannya kembali ke tim Chrome.

Jika Anda hanya perlu menghentikan pengiriman notifikasi push ke pengguna setelah jangka waktu tertentu, dan tidak peduli berapa lama notifikasi tetap muncul Anda bisa menggunakan parameter time to live (ttl) FCM, pelajari lebih lanjut di sini.

Apa saja batasan pesan push di Chrome?

Ada beberapa batasan yang diuraikan dalam postingan ini:

  • Penggunaan CCM oleh Chrome sebagai layanan push menciptakan sejumlah lainnya. Kami sedang bekerja sama untuk melihat apakah beberapa masalah ini dapat dicabut dalam masa depan.
  • Anda harus menampilkan notifikasi saat menerima pesan push.
  • Chrome di desktop memiliki peringatan bahwa jika Chrome tidak berjalan, pesan push tidak akan diterima. Hal ini berbeda dengan ChromeOS dan Android karena pesan push akan selalu diterima.

Bukankah kita harus menggunakan Permissions API?

Tujuan Permission API diimplementasikan di Chrome, tetapi belum tentu tersedia di semua {i>browser<i}. Anda dapat mempelajarinya lebih lanjut di sini.

Mengapa Chrome tidak membuka tab sebelumnya saat saya mengklik notifikasi?

Masalah ini hanya memengaruhi halaman yang saat ini tidak dikontrol oleh layanan pekerja. Anda dapat mempelajarinya lebih lanjut di sini.

Bagaimana jika notifikasi sudah tidak berlaku saat perangkat pengguna menerima push?

Anda harus selalu menampilkan notifikasi saat menerima pesan push. Dalam skenario di mana Anda ingin mengirim notifikasi tetapi hanya berguna selama jangka waktu tertentu, Anda dapat menggunakan parameter 'time_to_live' parameter di CCM agar FCM tidak mengirim pesan push jika sudah lewat waktu masa berakhir.

Detail selengkapnya dapat ditemukan di sini.

Apa yang terjadi jika saya mengirim 10 pesan push, tetapi hanya ingin perangkat menerimanya?

FCM memiliki 'ciutkan_key' yang dapat Anda gunakan untuk memberi tahu FCM agar mengganti setiap parameter pesan yang memiliki 'ciutkan_key' yang sama, dengan pesan baru.

Detail selengkapnya dapat ditemukan di sini.