Notifications push sur le Web ouvert

Demandez à des développeurs de citer les fonctionnalités des appareils mobiles qui manquent les notifications push figurent toujours en haut de la liste.

Les notifications push permettent à vos utilisateurs de s'abonner aux mises à jour en temps réel des sites qu'ils et vous permettent de susciter de nouveau leur intérêt grâce à des contenus personnalisés et attrayants.

À partir de la version 42 de Chrome, l'API Push et L'API Notification est disponible pour développeurs.

L'API Push dans Chrome repose sur différents éléments technologiques, dont les suivants : Fichiers manifestes d'application Web et Service workers. Dans cet article, nous allons nous intéresser à chacune de ces technologies, mais seulement au strict minimum pour pouvoir utiliser les messages push. Pour mieux comprendre certaines les autres fonctionnalités des fichiers manifestes et les capacités hors connexion des service workers, consultez les liens ci-dessus.

Nous verrons aussi les fonctionnalités qui seront ajoutées à l'API dans les futures versions de Chrome, et enfin nous aurons une FAQ.

Implémenter le message push pour Chrome

Cette section décrit chaque étape à effectuer pour permettre la transmission dans votre application Web.

Enregistrer un service worker

Il existe une dépendance liée à l'implémentation des messages push par un service worker sur le Web. En effet, lorsqu'un message push est reçu, le navigateur peut démarrer un service worker, qui s'exécute en arrière-plan une page ouverte et d'envoyer un événement afin que vous puissiez décider de la manière push message.

L'exemple ci-dessous montre comment enregistrer un service worker dans votre application Web. Quand ? l'enregistrement s'est déroulé correctement. Nous appelons initialiseState(), que nous aborderons d’ici peu.

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.');
    }
});

Le gestionnaire de clics sur les boutons abonne ou désabonne l'utilisateur pour envoyer des messages. isPushEnabled est une variable globale qui vérifie simplement si les transferts messagerie est actuellement abonnée ou non. Celles-ci seront référencées tout au long les extraits de code.

Nous vérifions ensuite que les service workers sont compatibles avant d'enregistrer le service-worker.js. contenant la logique pour gérer un message push. Ici, nous indiquent simplement au navigateur que ce fichier JavaScript est le service worker pour notre site.

Configurer l'état initial

Une fois le service worker enregistré, nous devons configurer l'état de l'UI.

Les utilisateurs s'attendront à une interface utilisateur simple pour activer ou désactiver les messages push pour votre site, et il s'attendra à ce qu'il soit à jour avec tout changement qui se produit. Dans d'autres s'ils activent les messages push pour votre site, ils quittent et reviennent semaine plus tard, votre interface utilisateur devrait indiquer que les messages push sont déjà activés.

Vous trouverez quelques consignes relatives à l'expérience utilisateur dans ce document, Dans cet article, nous allons nous concentrer sur les aspects techniques.

À ce stade, vous pensez peut-être qu'il n'y a que deux États à gérer : est activé ou désactivé. Cependant, il existe d'autres États qui entourent notifications dont vous devez prendre en compte.

Nous devons vérifier un certain nombre d'API avant d'activer le bouton. Si tout est pris en charge, nous pouvons activer notre UI et définir l'état initial sur indiquent si les messages push sont abonnés ou non.

Étant donné que la majorité de ces vérifications entraînent la désactivation de notre interface utilisateur, vous devez définissez l'état initial sur "Désactivé". Cela permet également d'éviter toute confusion peut rencontrer un problème avec le code JavaScript de votre page. Par exemple, le fichier JS ne peut pas être téléchargée ou l'utilisateur a désactivé JavaScript.

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

Avec cet état initial, nous pouvons effectuer les vérifications décrites ci-dessus dans le initialiseState(), c'est-à-dire après l'enregistrement de notre service worker.

// 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);
        });
    });
}

Voici un aperçu de ces étapes:

• Nous vérifions que showNotification est disponible dans ServiceWorkerRegistration un prototype. Sans cela, nous ne pourrons pas afficher de notification de notre service worker lorsqu'un message push est reçu.
• Nous vérifions ce qu'est la Notification.permission actuelle pour nous assurer qu'elle n'est pas "denied" Une autorisation refusée signifie que vous ne pouvez pas afficher de notifications jusqu'à ce que l'utilisateur modifie manuellement l'autorisation dans le navigateur.
• Pour vérifier si les messages push sont pris en charge, nous vérifions que PushManager est disponible dans l'objet "window".
• Enfin, nous avons utilisé pushManager.getSubscription() pour vérifier si nous avions déjà si vous n'avez pas d'abonnement. Dans ce cas, nous envoyons les détails de l'abonnement à notre pour nous assurer que nous disposons des informations appropriées et que l'interface utilisateur indique que la messagerie push est déjà activée ou non. Nous verrons quels détails dans l'objet "subscription" plus loin dans cet article.

Nous attendons que navigator.serviceWorker.ready soit résolu pour rechercher une et d'activer le bouton push, car c'est uniquement après que le service que le nœud de calcul est actif et que vous pouvez vous abonner aux messages push.

L'étape suivante consiste à gérer les cas où l'utilisateur souhaite activer les messages push, mais Avant cela, nous devons configurer un projet Google Developers Console. et nous ajoutons des paramètres à notre fichier manifeste pour utilisez Firebase Cloud Messaging (FCM). auparavant connu sous le nom de Google Cloud Messaging (GCM).

Créer un projet dans la console de développement Firebase

Chrome utilise FCM pour gérer l'envoi et la distribution des messages push. Toutefois, pour utiliser l'API FCM, vous devez configurer un projet dans la console de développement Firebase.

Les étapes suivantes sont spécifiques à Chrome, Opera pour Android et Samsung Navigateur utilisé par FCM Nous verrons dans la suite de cet article comment cela fonctionne dans d'autres navigateurs.

Créer un projet de développeur Firebase

Pour commencer, vous devez créer un projet sur https://console.firebase.google.com/. en cliquant sur "Créer un projet".

Ajoutez un nom de projet, puis créez-le. Vous êtes alors redirigé vers celui-ci. tableau de bord:

Dans ce tableau de bord, cliquez sur la roue dentée à côté du nom de votre projet en haut dans le coin gauche et cliquez sur "Paramètres du projet".

Sur la page des paramètres, cliquez sur "Cloud Messaging". .

Cette page contient la clé API pour les messages push, que nous utiliserons plus tard. et l'ID de l'expéditeur, que nous devons placer dans le fichier manifeste de l'application Web .

Ajouter un fichier manifeste d'application Web

Pour la méthode push, nous devons ajouter un fichier manifeste avec un champ gcm_sender_id, pour que l'abonnement push aboutisse. Ce paramètre n'est requis que par Chrome, Opera pour Android et le navigateur Samsung afin qu'ils puissent utiliser FCM / GCM.

Le champ gcm_sender_id est utilisé par ces navigateurs lorsqu'il abonne un utilisateur. appareil avec FCM. Cela signifie que FCM peut identifier l'appareil de l'utilisateur et assurez-vous que votre ID d'expéditeur correspond à la clé API correspondante et que l'utilisateur a autorisé votre serveur à lui envoyer des messages push.

Voici un fichier manifeste super simple:

{
    "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>"
}

Vous devez remplacer la valeur gcm_sender_id par l'ID de l'expéditeur du votre projet Firebase.

Une fois le fichier manifeste enregistré dans votre projet, du code), faites-le référence à partir de votre code HTML en ajoutant la balise suivante dans l'en-tête de votre .

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

Si vous n'ajoutez pas de fichier manifeste Web avec ces paramètres, vous obtiendrez une exception lorsque vous tentez d'abonner l'utilisateur aux messages push, avec l'erreur "Registration failed - no sender id provided" ou "Registration failed - permission denied".

S'abonner aux messages push

Maintenant que vous avez configuré un fichier manifeste, vous pouvez retourner dans le code JavaScript de votre site.

Pour vous abonner, vous devez appeler la méthode subscribe() sur la l'objet PushManager, auquel vous accédez via ServiceWorkerRegistration.

Cela demandera à l'utilisateur d'autoriser votre origine à envoyer des données push les notifications. Sans cette autorisation, vous ne pourrez pas s'abonner.

Si la promesse renvoie via la méthode subscribe(), vous recevez une PushSubscription qui contiendra un point de terminaison.

Le point de terminaison doit être enregistré sur votre serveur pour chaque car vous en aurez besoin pour envoyer des messages push à une date ultérieure.

Le code suivant abonne l'utilisateur aux messages 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';
        }
        });
    });
}

À ce stade, votre application Web est prête à recevoir un message push, bien que rien ne se produira jusqu'à ce que nous ajoutions un écouteur d'événements push à notre fichier de service worker.

Écouteur d'événements push de service worker

Lorsqu'un message push est reçu (nous verrons comment envoyer un message push dans la section suivante), un événement push est envoyé dans votre service worker. À ce stade, vous devez pour afficher une notification.

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
    })
    );
});

Ce code enregistre un écouteur d'événements push et affiche une notification avec une un titre prédéfini, un corps de texte, une icône et une balise de notification. Dans cet exemple, une subtilité à mettre en avant est la event.waitUntil(). . Cette méthode utilise promesse et prolonge durée de vie d'un gestionnaire d'événements (on peut considérer que le service ou un nœud de calcul vivant), tant que la promesse n'est pas settled; Dans ce cas, la promesse transmise à event.waitUntil est la promesse renvoyée à partir de showNotification().

La balise de notification sert de pour les notifications uniques. Si nous envoyions deux messages push au même le point de terminaison, avec un court délai entre eux, et affiche les notifications ayant le même tag, le navigateur affiche la première notification et la remplace par la deuxième notification lors de la réception du message push.

Si vous souhaitez afficher plusieurs notifications à la fois, utilisez une autre balise. aucun tag. Nous étudierons ultérieurement un exemple plus complet d'affichage d'une notification post. Pour l'instant, restons simples et voyons si l'envoi d'un message push cette notification.

Envoyer un message push

Nous nous sommes abonnés aux messages push et notre service worker est prêt à afficher un Il est donc temps d'envoyer un message push via FCM.

Cela ne s'applique qu'aux navigateurs utilisant FCM.

Lorsque vous envoyez la variable PushSubscription.endpoint à votre serveur, pour FCM est un point de terminaison spécial. Il comporte un paramètre à la fin de l'URL qui a le statut registration_id.

Voici un exemple de point de terminaison:

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

L'URL FCM est la suivante:

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

Le registration_id serait:

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

Cette règle est spécifique aux navigateurs utilisant FCM. Dans un navigateur classique, Il suffit d'obtenir un point de terminaison et de l'appeler de manière standard quelle que soit l'URL.

Cela signifie que sur votre serveur, vous devrez vérifier si le point de terminaison pour FCM et, si tel est le cas, extrayez l'identifiant "Registration_id". Pour ce faire, dans Python, pourrait faire quelque chose comme:

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

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

Une fois que vous disposez de l'ID d'enregistrement, vous pouvez appeler l'API FCM. Toi Pour accéder à la documentation de référence sur l'API FCM, cliquez ici.

Voici les principaux aspects à prendre en compte lorsque vous appelez FCM:

• Un en-tête Authorization avec la valeur key=<YOUR_API_KEY> doit être défini lorsque vous appelez l'API, où <YOUR_API_KEY> est le Clé API du projet Firebase.
  • FCM utilise la clé API pour trouver l'ID d'expéditeur approprié. Assurez-vous que l'utilisateur a donné son autorisation pour votre projet, et enfin en vous assurant que l’adresse IP du serveur est sur la liste d’autorisation pour ce projet.
• Un en-tête Content-Type approprié de application/json ou application/x-www-form-urlencoded;charset=UTF-8 selon que vous envoient les données au format JSON ou données de formulaire.
• Tableau de registration_ids. Il s'agit des identifiants d'enregistrement que vous souhaitez à extraire des points de terminaison de vos utilisateurs.

N'hésitez pas à consulter la documentation sur la façon d'envoyer des messages push depuis votre serveur, mais pour une vérification rapide de votre service worker, vous pouvez utiliser cURL pour envoyer un message push à votre navigateur.

Intervertir <YOUR_API_KEY> et <YOUR_REGISTRATION_ID> dans cette commande cURL avec votre propre commande et l'exécuter à partir d'un terminal.

Vous devriez voir une bonne notification:

    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\"]}"

Lorsque vous développez votre logique de backend, n'oubliez pas que les en-têtes Authorization et du corps POST est spécifique au point de terminaison FCM. Par conséquent, détectez quand le est destiné à FCM et ajoute l'en-tête et la mise en forme du corps POST de manière conditionnelle. Pour les autres navigateurs (et, espérons-le, Chrome à l'avenir), vous devrez implémenter le protocole push Web.

L'inconvénient de l'implémentation actuelle de l'API Push dans Chrome est que vous ne peut pas envoyer de données via un message push. Non, rien. Cela s'explique par le fait que que, dans une prochaine implémentation, les données de charge utile devront être chiffrées avant qu'elles ne soient envoyées à un point de terminaison de messagerie push. De cette façon, le point de terminaison, quel que soit le fournisseur push, ne pourra pas afficher facilement le contenu du push message. Cela offre une protection contre d'autres vulnérabilités telles que des certificats HTTPS et des attaques MITM ("man in the middle") entre vos et le fournisseur push. Cependant, ce chiffrement n’est pas encore pris en charge, donc En attendant, vous devez effectuer une extraction pour obtenir les informations nécessaires afficher une notification.

Exemple d'événement push plus complet

La notification que nous avons vue jusqu'à présent est assez basique et pour les exemples, il est assez difficile de couvrir un cas d'utilisation réel.

En réalité, la plupart des gens voudront obtenir certaines informations de leur serveur avant d'afficher la notification. Il peut s'agir de données permettant de renseigner titre de la notification et message contenant un élément spécifique, ou aller plus loin et mettre en cache des pages ou des données de sorte que lorsque l'utilisateur clique sur la notification, tout est immédiatement disponible lorsque le navigateur est ouvert, même si le réseau n'est pas disponible à ce moment-là.

Dans le code suivant, nous récupérons des données à partir d'une API, nous convertissons la réponse en un et l'utiliser pour remplir notre notification.

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
        });
    })
    );
});

Il convient, une fois encore, de souligner que event.waitUntil() prend une promesse ce qui entraîne la promesse renvoyée par showNotification(), ce qui signifie Notre écouteur d'événements ne se fermera pas tant que l'appel asynchrone fetch() ne sera pas terminé. la notification s'affiche.

Vous remarquerez qu'une notification s'affiche même en cas d'erreur. C'est car si nous ne le faisons pas, Chrome affichera sa propre notification générique.

Ouverture d'une URL lorsque l'utilisateur clique sur une notification

Lorsque l'utilisateur clique sur une notification, un événement notificationclick est envoyé. dans votre service worker. Dans votre gestionnaire, vous pouvez prendre les mesures appropriées, comme sélectionner un onglet ou ouvrir une fenêtre avec une URL spécifique:

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('/');
        }
    })
    );
});

Cet exemple ouvre le navigateur à la racine de l'origine du site, en sélectionnant onglet de même origine existant, le cas échéant, et ouverture d'un nouvel onglet.

Un article détaille ce que vous pouvez faire avec l'API Notification.

Se désabonner de l'appareil d'un utilisateur

Vous vous êtes abonné à l'appareil d'un utilisateur et celui-ci reçoit des messages push. Comment pouvez-vous les désabonner ?

Pour se désabonner de l'appareil d'un utilisateur, il faut principalement appeler le unsubscribe() sur la PushSubscription et supprimer le point de terminaison de vos serveurs (afin de ne pas en envoyant des messages push dont vous savez qu'ils ne seront pas reçus). Le code ci-dessous fait exactement comme ceci:

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);
        });
    });
}

Maintenir l'abonnement à jour

Il est possible que les abonnements ne soient pas synchronisés entre FCM et votre serveur. Assurez-vous que votre serveur analyse le corps de la réponse de la requête POST d'envoi de l'API FCM, en recherchant Résultats error:NotRegistered et canonical_id, comme expliqué dans la documentation FCM.

Il se peut également que les abonnements ne soient pas synchronisés entre le service worker et votre Google Cloud. Par exemple, après un abonnement ou un désabonnement réussi, la connexion réseau peut vous empêcher de mettre à jour votre serveur ; ou un utilisateur pourrait révoquer l'autorisation de notification, ce qui déclenche un désabonnement automatique. Identifiant ce genre de cas en vérifiant le résultat serviceWorkerRegistration.pushManager.getSubscription() régulièrement (par exemple, lors du chargement de la page) et le synchroniser avec le serveur. Vous pouvez également vous réabonner automatiquement si vous n'avez plus d'abonnement et Notification.permission == "accordée".

Dans sendSubscriptionToServer(), vous devrez réfléchir à la façon dont vous gérez requêtes réseau ayant échoué lors de la mise à jour de endpoint. Une solution est pour suivre l'état du endpoint dans un cookie pour déterminer si votre serveur a besoin des informations les plus récentes ou non.

Toutes les étapes ci-dessus permettent d'implémenter intégralement les messages push Web dans Chrome 46. Il existe toujours des fonctionnalités spécifiées qui faciliteront (comme une API standard permettant de déclencher des messages push), mais cette version vous permet commencez à intégrer des messages push à vos applications Web dès aujourd'hui.

Déboguer votre application Web

Lors de l'implémentation de messages push, les bugs seront visibles dans l'un des deux emplacements suivants: votre page. ou votre service worker.

Les bugs de la page peuvent être débogués à l'aide de DevTools Pour déboguer un service worker deux options s'offrent à vous:

1. Accédez à chrome://inspect > Service workers : Cette vue ne fournit en dehors des service workers en cours d'exécution.
2. Accédez à chrome://serviceworker-internals. Vous y trouverez les l'état des service workers et voir les éventuelles erreurs. Cette page est temporaire jusqu'à ce que les outils de développent un ensemble de fonctionnalités similaire.

L'un des meilleurs conseils que je peux donner aux personnes qui débutent avec les service workers est de prendre cochez la case "Ouvrir la fenêtre des outils de développement et suspendre l'exécution de JavaScript". au démarrage d'un service worker pour le débogage. Cette case à cocher ajoute un point d'arrêt le démarrage du service worker et l'interruption de l'exécution. Ainsi, vous pouvez ou reprenez votre script de service worker et voyez si vous rencontrez des problèmes.

S'il semble y avoir un problème entre FCM et l'événement push de votre service worker, il n’y a pas grand-chose à faire pour déboguer le problème, car il n’y a aucun moyen pour vérifier si Chrome a reçu quelque chose. Il est essentiel de s'assurer de FCM aboutit lorsque votre serveur effectue un appel d'API. Votre quelque chose comme:

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

Notez la réponse "success": 1. Si vous constatez un échec, suggère qu'un problème est survenu avec l'identifiant d'enregistrement FCM et le transfert message n'est pas envoyé à Chrome.

Déboguer les service workers dans Chrome pour Android

Pour le moment, le débogage des service workers sur Chrome pour Android n'est pas évident. Vous devez accéder à chrome://inspect, trouver votre appareil et rechercher un élément de liste nommé "Worker pid:...." qui contient l'URL de votre service ou un nœud de calcul.

Expérience utilisateur pour les notifications push

L'équipe Chrome a préparé un document présentant les bonnes pratiques pour l'expérience utilisateur des notifications push, ainsi qu'un document couvrant certaines des cas limites lorsque vous travaillez avec des notifications push.

• Bonnes pratiques concernant l'expérience utilisateur pour les autorisations de notifications push
• Cas limites et solutions d'atténuation des notifications push

L'avenir des messages push sur Chrome et sur le Web ouvert

Cette section aborde en détail certains des composants parties spécifiques de cette implémentation que vous devez connaître et comment elle diffère de celle des autres implémentations de navigateur.

Protocole Web Push et points de terminaison

L'avantage de la norme de l'API Push est que vous devez être en mesure de endpoint, transmettez-les à votre serveur et envoyez des messages vos messages en implémentant le protocole Web Push.

Le protocole Web Push est une nouvelle norme que les fournisseurs push peuvent implémenter, ce qui permet aux développeurs de ne pas avoir à se soucier de qui est le fournisseur push. La cela évite d'avoir à s'inscrire pour des clés API et d'envoyer des données formatées, comme c'est le cas avec FCM.

Chrome a été le premier navigateur à implémenter l'API Push, contrairement à FCM. sont compatibles avec le protocole Web Push. C'est pourquoi Chrome exige que gcm_sender_id et vous devez utiliser l'API RESTful pour FCM.

L'objectif final de Chrome est d'adopter le protocole Web Push avec Chrome et FCM.

En attendant, vous devez détecter le point de terminaison "https://fcm.googleapis.com/fcm/send" et les traiter séparément des autres points de terminaison, c'est-à-dire formater les données de charge utile dans un méthode spécifique et ajoutez la clé d'autorisation.

Comment mettre en œuvre le protocole Web Push ?

Firefox Nightly est actuellement en mode Push et sera probablement le premier navigateur utilisé. pour implémenter le protocole Web push.

Questions fréquentes

Où sont les caractéristiques ?

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

Puis-je éviter les notifications en double si ma présence sur le Web a plusieurs origines ou si je suis présente à la fois sur le Web et dans un format natif ?

Il n'existe pas de solution pour le moment, mais vous pouvez suivre la progression dans Chromium.

Le scénario idéal serait d'avoir une sorte d'identifiant pour l'appareil d'un utilisateur, puis côté serveur, faites correspondre les ID d'abonnement à l'application native et à l'application Web à laquelle envoyer un message push. Vous pouvez le faire via la taille de l'écran, modèle d'appareil, en partageant une clé générée entre l'application Web et l'application native, mais chaque approche a des avantages et des inconvénients.

Pourquoi ai-je besoin d'un gcm_sender_id ?

Cela est nécessaire pour que Chrome, Opera pour Android et le navigateur Samsung utiliser l'API Firebase Cloud Messaging (FCM) ; L'objectif est d'utiliser protocole Web push lorsque la norme est finalisée et que FCM la prend en charge.

Pourquoi ne pas utiliser WebSockets ou les événements envoyés par le serveur (EventSource) ?

L'avantage d'utiliser les messages push est que même si votre page est fermée, service worker est activé et peut afficher une notification. Web Sockets et EventSource ont leur connexion fermée lorsque la page ou le navigateur est fermé.

Que faire si je n'ai pas besoin d'envoyer des événements en arrière-plan ?

Si vous n'avez pas besoin de la diffusion en arrière-plan, les WebSockets constituent une excellente option.

Quand puis-je utiliser le mode push sans afficher les notifications (par exemple, push silencieuse en arrière-plan) ?

Nous n'avons pas encore défini de date de disponibilité, mais Intent d'implémenter la synchronisation en arrière-plan Bien que cela ne soit ni décidé, ni spécifié, il est question de permettre push silencieuse avec synchronisation en arrière-plan.

Pourquoi le protocole HTTPS est-il requis ? Comment contourner ce problème pendant le développement ?

Les service workers exigent des origines sécurisées pour garantir que leur script provient de l'origine visée et ne provient pas d'une entité de type "homme du milieu" l'attaque. Actuellement, cela signifie utiliser HTTPS sur les sites en ligne, même si localhost pendant le développement.

Comment fonctionne la compatibilité avec les navigateurs ?

Chrome prend en charge sa version stable et Mozilla a été en cours d'élaboration dans Firefox Nightly. Pour en savoir plus, reportez-vous au bug implémentant l'API Push. Vous pouvez suivre l'implémentation des notifications ici.

Puis-je supprimer une notification passé un certain délai ?

Pour le moment, cela n'est pas possible, mais nous prévoyons d'ajouter cette fonctionnalité afin d'obtenir liste des notifications actuellement visibles. Si vous avez un cas d'utilisation d'expiration de la notification après son affichage, nous aimerions en savoir plus Ajoutez un commentaire et nous le transmettrons à l'équipe Chrome.

Si vous devez uniquement arrêter l'envoi d'une notification push à l'utilisateur après un certain délai, sans tenir compte de la durée d'affichage de la notification. vous pouvez utiliser le paramètre TTL (Time To Live) de FCM, En savoir plus

Quelles sont les limites des messages push dans Chrome ?

Quelques limites sont décrites dans cet article:

• L'utilisation de CCM dans Chrome en tant que service push crée un certain nombre exigences. Nous travaillons ensemble pour déterminer si certaines de ces améliorations peuvent être appliquées à l'avenir.
• Vous devez afficher une notification lorsque vous recevez un message push.
• Chrome pour ordinateur propose une mise en garde : si Chrome n'est pas en cours d'exécution, les messages ne seront pas reçues. Cela diffère de ChromeOS et Android, où les messages push sera toujours reçue.

Ne devrions-nous pas utiliser l'API Permissions ?

La L'API Permission est implémentée dans Chrome. mais il ne sera pas nécessairement disponible dans tous les navigateurs. En savoir plus

Pourquoi Chrome n'ouvre-t-il pas l'onglet précédent lorsque je clique sur une notification ?

Ce problème ne concerne que les pages qui ne sont actuellement pas contrôlées par un service. ou un nœud de calcul. Pour en savoir plus, consultez cet article du blog.

Que se passe-t-il si une notification est obsolète au moment où l'appareil de l'utilisateur a reçu l'envoi ?

Vous devez toujours afficher une notification lorsque vous recevez un message push. Si vous souhaitez envoyer une notification, mais que celle-ci n'est utile pendant une certaine période, vous pouvez utiliser la valeur sur CCM afin que FCM n'envoie pas le message push après expiration du délai d'expiration.

Pour en savoir plus, cliquez ici.

Que se passe-t-il si j'envoie 10 messages Push, mais que je souhaite que l'appareil n'en reçoive qu'un ?

FCM possède une clé "Réduire_clé" que vous pouvez utiliser pour indiquer à FCM de remplacer contenant la même clé de réduction, avec le nouveau message.

Pour en savoir plus, cliquez ici.