Comment créer des notifications push pour les applications Web

Améliorer la participation des utilisateurs à l'application Web: Explication détaillée des notifications pushs Web

Cet article explorera comment améliorer l'expérience utilisateur des applications Web existantes en ajoutant des fonctions de notification similaires aux applications natives. Nous expliquerons en profondeur le concept de notifications push Web et démontrerons progressivement comment intégrer cette fonctionnalité dans les applications Web existantes, couvrant les spécifications actuelles et la prise en charge du navigateur. L'article a été initialement publié à Sencha. Merci aux partenaires qui soutiennent SitePoint.

Points de base:

• Comprendre les bases: Les notifications push Web permettent aux applications Web d'envoyer des messages directement aux appareils utilisateur, même si l'application est inactive.
• Enregistrement des travailleurs du service: Le travailleur des services est responsable de la gestion des messages poussants, doit s'inscrire lorsque la page est chargée et effectuer des vérifications appropriées de support du navigateur.
• Processus d'abonnement utilisateur: Les étapes de clé de la réception des notifications push incluent l'obtention du consentement de l'utilisateur, la génération d'abonnements push via un navigateur et l'envoi de ces données au serveur d'applications.
• Envoyer des messages push: Les messages poussés doivent être chiffrés et envoyés via les demandes de post HTTP, et utiliser des paramètres tels que TTL et urgence pour gérer les détails de livraison.
• Traitement du message et de l'interaction utilisateur: Les travailleurs du service traitent les messages poussés entrants et gérent les interactions utilisateur, telles que les clics de notification et les fermetures.
• Désibilisation et abonnement Expiration: Fournit des méthodes aux utilisateurs pour innover les abonnements et gérer les événements de cycle de vie d'abonnement, y compris l'expiration et le renouvellement.

protocole de notification de push web

Le protocole de notification de push Web est relativement nouveau. Il donne aux applications Web une fonctionnalité de type application native, leur permettant de recevoir des messages push du serveur à tout moment, même si l'application Web n'est pas active ou chargée dans le navigateur. Cela vous permet d'interagir avec les utilisateurs à tout moment, ce qui les incite à revenir à l'application même s'ils n'utilisent pas votre application.

La valeur commerciale des notifications push Web est évidente: elle peut augmenter l'engagement des utilisateurs, augmentant ainsi la valeur globale de l'application, car les notifications push rendent votre application plus utile aux utilisateurs, améliore la convivialité des applications Web, et nous rendre plus utiles.

Comparaison des pushs Web et des Websockets

Avant d'entrer dans les détails techniques, comprenons d'abord la différence entre Web Push et WebSockets. Tout d'abord, ils ont des choses courantes: Web Push et WebSockets sont conçus pour permettre une communication en temps réel entre les applications Web et les serveurs d'applications, et envoyer des données et des mises à jour en temps réel des serveurs d'applications aux applications Web.

Voici leurs différences:

• WebSockets Utiliser uniquement lorsque la page Web est chargée et active. Les notifications push Web peuvent être utilisées à tout moment, y compris lorsque l'application est active, inactive ou déchargée, et lorsque le navigateur n'est pas actif ou même fermé.
• Les données envoyées à l'aide de push Web doivent être cryptées et la taille de chaque message est limitée (pas supérieure à 4KB). Il existe également des limites sur le nombre de messages envoyés (la valeur limite exacte dépend du navigateur). Certains navigateurs (tels que Chrome) peuvent également nécessiter des notifications pour être affichées à l'utilisateur chaque fois qu'ils reçoivent un message. Lorsque vous utilisez les WebSockets, vous n'avez aucune de ces restrictions: vous pouvez envoyer un certain nombre de messages non cryptés de toute taille et les traiter selon les besoins;
• Les règles générales sont les suivantes: lorsque l'utilisateur interagit avec l'application, utilisez WebSockets pour envoyer des mises à jour de données ordinaires à votre application Web; votre application à l'époque.

Concept technique

Jetons un coup d'œil aux détails techniques de cette technologie. J'utiliserai un jeu avec des règles spéciales, des participants et me tournerai pour expliquer ces détails. Je vais d'abord décrire les participants à ce jeu appelé "Webs push notifications":

• Application Web
• Les travailleurs du service
• navigateur
• Application Server
• push server

Push Server est un service implémenté par les fabricants de navigateurs; il s'agit d'un pont de communication entre le serveur d'applications et le navigateur. Il est responsable de la livraison des messages de votre serveur d'applications à votre navigateur.

Utilisez des notifications de push de démonstration de jeu de jeu

J'utiliserai un jeu pour montrer comment ajouter des notifications push Web à votre application. Les règles de ce jeu sont définies par plusieurs spécifications fournies par la World Wide Web Alliance et le Force de travail d'ingénierie Internet:

• La communication entre le navigateur et l'application Web ou le travailleur de service associé est décrite dans la spécification de l'API push.
• L'affichage de différents types de notifications et de traitement de notification est décrit dans la spécification API de notifications.
• La communication entre le serveur d'applications et le serveur push est définie dans la spécification du protocole de push Web.
• Il existe également des spécifications supplémentaires qui décrivent le chiffrement des messages push et l'authentification du serveur d'applications, permettant à votre serveur d'applications de prouver qu'il est autorisé à envoyer des messages à vos utilisateurs.

jeu rond

Je divise le jeu en quatre tours et explique le concept et les objectifs de chaque tour. Je vais ensuite vous montrer comment implémenter chaque virage dans votre application.

Round 1: Enregistrement des travailleurs du service

Les notifications push Web nécessitent qu'un travailleur de service traite les messages push, donc le premier tour consiste à enregistrer votre agent de service. Seule votre application Web et votre navigateur participent à ce tour. Ce tour se produit lorsque la page se charge.

L'application Web envoie une demande pour enregistrer un travailleur de service au navigateur.

Pour implémenter ce tour, vous devez ajouter le code suivant à votre application Web:

if ('serviceWorker' in navigator) {
  if ('PushManager' in window) {
    navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) {
      // 状态初始化
    }).catch(function() {
      // 错误处理
    });
  } else {
    // 错误处理
  }
} else {
  // 错误处理
}

Tout d'abord, nous devons vérifier si le navigateur prend en charge les travailleurs du service. Ensuite, nous devons vérifier si le navigateur prend en charge les notifications de push Web. Avec l'augmentation du support du navigateur, l'ajout de ces deux chèques est toujours une bonne idée.

Si les deux sont pris en charge, nous nous inscrireons à nos employés de service. Pour ce faire, nous appelons la méthode Navigator.ServiceWorker.Register () et passons le chemin d'accès du fichier du travailleur de service en tant que paramètre. Après cette étape, le navigateur télécharge le fichier et l'exécute dans l'environnement des travailleurs de service. Un fichier de travailleur de service est un fichier JavaScript standard, mais le navigateur "donnera à lui accès" l'API des travailleurs du service, y compris Push.

Si tout se passe bien et qu'il n'y a pas d'erreurs, la promesse renvoyée par registre () sera analysée. Si un type d'erreur se produit, la promesse sera rejetée, nous devons faire face à cette situation et à la situation où le navigateur ne soutient pas le travailleur des services. Lorsque Register () analyse, il renvoie un objet de travail de service de service qui sera utilisé dans le prochain virage.

(Les instructions pour les rondes suivantes suivront une structure similaire à celle mentionnée ci-dessus, y compris des exemples de code, des images et des explications, et réécrire et polir le texte d'origine pour maintenir l'intégrité et la lisibilité de l'information. En raison des limitations de l'espace, ici Les descriptions plus détaillées de tous les cycles sont élargies.

Résumé

La technologie de notification de push Web est prête pour une utilisation généralisée. Il vous aide à communiquer plus efficacement avec les utilisateurs, à engager les utilisateurs en fournissant des notifications urgentes et pertinentes, et il améliore généralement les applications Web.

Essayez de l'utiliser dans votre application. Sencha CMD 6.5 prend en charge les fonctionnalités de l'application Web progressive suivantes: Ajoutez aux bannières d'écran d'accueil et utilisez le cache des travailleurs de service. Lisez la documentation Sencha CMD pour plus d'informations, ou téléchargez l'essai gratuit de Sencha ext JS, où vous aurez accès à plus de 115 composants et outils, y compris Sencha CMD.

(La section FAQ nécessite également une réécriture et un polissage similaires, et ne sera pas élargi ici.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!