API des notifications Web: Faites des notifications de site Web sur les restrictions du navigateur

Nous sommes habitués aux notifications mobiles des sites Web ou applications préférés, mais maintenant il devient plus courant pour les navigateurs de pousser directement les notifications. Par exemple, Facebook enverra des notifications lorsque vous avez une nouvelle demande d'ami ou que quelqu'un commente un message auquel vous participez; Slack enverra des notifications dans les conversations que vous êtes mentionné.

En tant que développeur frontal, je suis curieux de savoir comment utiliser les notifications de navigateur pour servir des sites Web qui ne gèrent pas beaucoup de flux d'informations. Comment ajouter des notifications de navigateur pertinentes basées sur l'intérêt des visiteurs pour le site Web?

Cet article montrera comment implémenter un système de notification sur le site Web concis CSS pour alerter les visiteurs chaque fois qu'une nouvelle version du cadre est publiée. Je vais montrer comment utiliser l'API LocalStorage et Navigateur pour y parvenir.

Notification API Basics

Tout d'abord, nous devons déterminer si le navigateur du visiteur prend en charge les notifications. La plupart des travaux de ce tutoriel seront effectués par l'objet de notification.

(function() {
  if ("Notification" in window) {
    // 代碼在此處
  }
})();

à l'heure actuelle, nous déterminons seulement si le navigateur prend en charge les notifications. Après avoir confirmé, nous devons savoir si nous pouvons afficher les demandes d'autorisation aux visiteurs.

Nous stockons la sortie de la propriété d'autorisation dans une variable. Si l'autorisation a été accordée ou refusée, rien n'est retourné. Si nous n'avons pas demandé d'autorisations auparavant, nous utilisons la méthode RequestPermission pour demander des autorisations.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

Vous devriez voir des invites similaires à l'image ci-dessus dans votre navigateur.

Maintenant que nous avons demandé des autorisations, modifions le code afin que la notification soit affichée si les autorisations sont autorisées:

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

Bien que simple, il a une fonction efficace.

Nous utilisons ici la syntaxe basée sur les promesses de la méthode RequestPermission () pour afficher les notifications après l'autorisation. Nous utilisons le constructeur de notification pour afficher les notifications. Ce constructeur prend deux arguments, l'un pour le titre de notification et l'autre pour les options. Veuillez vous référer au lien de documentation pour une liste complète des options qui peuvent être adoptées.

Version du framework de stockage

ci-dessus, nous utiliserons LocalStorage pour aider à afficher les notifications. L'utilisation de LocalStorage est un moyen recommandé de stocker les informations persistantes du client en JavaScript. Nous allons créer une clé localStorage appelée concisionversion qui contient la version actuelle du framework (par exemple 1.0.0). Nous pouvons ensuite utiliser cette clé pour vérifier une nouvelle version du framework.

Comment mettre à jour la valeur de la touche Concisionion en utilisant la dernière version du framework? Nous avons besoin d'un moyen de définir la version actuelle lorsque quelqu'un visite un site Web. Nous devons également mettre à jour la valeur lorsqu'une nouvelle version est publiée. Chaque fois que la valeur ConcisionVersion change, une notification doit être affichée aux visiteurs pour annoncer une nouvelle version du cadre.

Nous résoudrons ce problème en ajoutant un élément caché à la page. Cet élément aura une classe nommée JS-CurrentVersion et ne contiendra que la version actuelle du cadre. étant donné que cet élément existe dans le DOM, nous pouvons facilement interagir avec lui en utilisant JavaScript.

Cet élément caché sera utilisé pour stocker la version Framework dans notre touche Concisionion. Nous utiliserons également cet élément pour mettre à jour la clé lorsqu'une nouvelle version du framework sera publiée.

(function() {
  if ("Notification" in window) {
    // 代碼在此處
  }
})();

Nous pouvons utiliser une petite quantité de CSS pour cacher cet élément:

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

Remarque: comme cet élément ne contient rien de significatif, les lecteurs d'écran n'ont pas besoin d'accéder à cet élément. C'est pourquoi j'ai défini la propriété hidden Aria sur true et j'utilise l'affichage: aucune comme méthode pour masquer les éléments. Pour plus d'informations sur le contenu caché, consultez cet article Webaim.

Maintenant, nous pouvons obtenir cet élément et interagir avec lui dans JavaScript. Nous devons écrire une fonction pour retourner le texte à l'intérieur de l'élément caché que nous venons de créer.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

Cette fonction utilise la propriété TextContent pour stocker le contenu de l'élément .js-Currention. Ajoutons une autre variable pour stocker le contenu de la touche LocalStorage Conceseversion.

<span class="js-currentVersion" aria-hidden="true">3.4.0</span>

Maintenant, nous avons la dernière version du framework dans une variable et nous stockons la clé LocalStorage en une variable. Il est temps d'ajouter une logique pour déterminer s'il existe une nouvelle version du cadre disponible.

Nous vérifions d'abord si la clé de concision existe. S'il n'existe pas, nous montrerons la notification à l'utilisateur car il peut s'agir de leur première visite. Si la clé existe, nous vérifions si sa valeur (stockée dans la variable CurrentVersion) est supérieure à la valeur de la version actuelle (stockée dans la variable de VERVERSION). Si la dernière version du cadre est plus grande que la dernière version vue par le visiteur, nous savons que la nouvelle version a été publiée.

Remarque: nous utilisons la bibliothèque Semver-Compare pour gérer la comparaison de deux cha?nes de version.

Après avoir su cela, nous montrerons la notification aux visiteurs et mettrons à jour notre clé de concision de manière appropriée.

[aria-hidden="true"] {
  display: none;
  visibility: hidden;
}

Pour utiliser cette fonction, nous devons modifier le code d'autorisation suivant.

function checkVersion() {
  var latestVersion = document.querySelector(".js-currentVersion").textContent;
}

Cela nous permet d'afficher les notifications lorsque l'utilisateur a accordé des autorisations avant ou simplement les autorisations.

Afficher la notification

Jusqu'à présent, nous n'avons montré que des notifications simples des utilisateurs qui ne contiennent pas beaucoup d'informations. écrivons une fonction qui nous permet de créer dynamiquement les notifications de navigateur et de contr?ler de nombreux aspects différents des notifications.

Cette fonction a des paramètres pour le texte du corps, l'ic?ne, le titre et la durée de liaison et de notification facultative. En interne, nous créons un objet d'option pour stocker notre texte et nos ic?nes de notification. Nous créons également une nouvelle instance de l'objet de notification, passant dans notre titre de notification ainsi que l'objet Option.

Ensuite, si nous voulons créer un lien vers nos notifications, nous ajouterons un gestionnaire OnClick. Nous utilisons SetTimeout () pour désactiver les notifications après une heure spécifiée. Si l'heure n'est pas spécifiée lorsque cette fonction est appelée, les cinq secondes par défaut sont utilisées.

(function() {
  if ("Notification" in window) {
    // 代碼在此處
  }
})();

Maintenant, modifions CheckVersion () pour afficher les notifications de plus d'informations à l'utilisateur.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

Nous utilisons la fonction DisplayNotification pour fournir une description, une image, un titre et un lien vers nos notifications.

Remarque: nous utilisons des littéraux de modèle ES6 pour intégrer des expressions dans notre texte.

Code complet et test

Ce qui suit est le code complet écrit dans ce tutoriel.

(Lien Codepen ou le bloc de code complet doit être inséré ici)

L'exécution de ce code devrait générer la notification suivante dans votre navigateur.

Pour effectuer des tests, vous devez vous familiariser avec les autorisations de notification de votre navigateur. Voici quelques références rapides à la gestion des notifications dans Google Chrome, Safari, Firefox et Microsoft Edge. De plus, vous devez être familiarisé avec l'utilisation de la console du développeur pour supprimer et modifier les valeurs locales pour les tests faciles.

Vous pouvez tester l'exemple en exécutant le script une fois et en modifiant la valeur de l'élément HTML JS-CurrentSion vers le script pour voir la différence. Vous pouvez également relancer avec la même version pour confirmer que vous ne recevrez pas de notifications inutiles.

aller un peu plus loin

C'est tout ce dont nous avons besoin pour avoir des notifications de navigateur dynamique! Si vous recherchez des notifications de navigateur plus flexibles, il est recommandé de comprendre l'API des travailleurs de service. Le travailleur des services peut être utilisé pour répondre aux notifications push, permettant aux utilisateurs de recevoir des notifications, qu'ils visitent actuellement votre site Web, permettant ainsi des mises à jour plus opportunes.

API de notification du navigateur FAQ

Qu'est-ce que l'API de notification du navigateur et comment cela fonctionne-t-il?

L'API de notification du navigateur permet aux applications Web d'afficher les notifications système aux utilisateurs. Ces notifications sont similaires aux notifications push sur les appareils mobiles et peuvent être affichées même si la page Web n'est pas au point. L'API fonctionne en demandant des autorisations utilisateur pour afficher les notifications. Une fois l'autorisation obtenue, les applications Web peuvent créer et afficher des notifications à l'aide d'objets de notification.

Comment demander l'autorisation d'afficher les notifications?

Pour demander l'autorisation, vous pouvez utiliser la méthode notification.requestPermission (). Cette méthode affichera à l'utilisateur une bo?te de dialogue lui demandant s'il permettra de s'afficher des notifications. Cette méthode renvoie une promesse, qui se résout en un statut d'autorisation, qui peut être "accordé", "refusé" ou "par défaut".

Comment créer et afficher des notifications?

Une fois l'autorisation obtenue, des notifications peuvent être créées et affichées à l'aide du constructeur de notification. Ce constructeur accepte deux paramètres: le titre de la notification et un objet d'option. L'objet d'option peut contenir des propriétés telles que le corps (le texte de la notification), l'ic?ne (l'ic?ne à afficher) et la balise (l'identifiant de la notification).

Puis-je afficher les notifications même si la page Web n'est pas au point?

Oui, l'API de notification du navigateur vous permet d'afficher les notifications même si la page Web n'est pas au point. Ceci est très utile pour les applications Web qui doivent informer les utilisateurs d'événements importants, même s'ils n'utilisent pas activement l'application.

Comment gérer les événements de clic sur les notifications?

Vous pouvez gérer les événements de clic sur les notifications en ajoutant un écouteur d'événements à l'objet de notification. Lorsque l'utilisateur clique sur la notification, la fonction d'écoute d'événements est appelée.

Puis-je désactiver les notifications par programme?

Oui, vous pouvez fermer par programme les notifications en appelant la méthode close () sur l'objet de notification. Ceci est utile si vous souhaitez désactiver automatiquement les notifications après un certain temps.

Tous les navigateurs prennent-ils en charge les notifications du navigateur?

La plupart des navigateurs modernes prennent en charge les notifications du navigateur, notamment Chrome, Firefox, Safari et Edge. Cependant, le support peut varier entre différentes versions de ces navigateurs, et certains navigateurs plus agés peuvent ne pas prendre en charge les notifications.

Puis-je personnaliser l'apparence des notifications?

L'apparition des notifications dépend fortement du système d'exploitation et du navigateur. Cependant, vous pouvez personnaliser certains aspects de la notification en utilisant l'objet Option transmis au constructeur de notification, tels que le titre, le texte du corps et les ic?nes.

Comment vérifier si l'utilisateur a accordé la permission d'afficher les notifications?

Vous pouvez vérifier l'état actuel de l'autorisation en accédant à la propriété Notification.Permission. Cette propriété sera "accordée" si l'utilisateur a accordé des autorisations; "refusée" si elle a refusé les autorisations, et "par défaut" s'il n'a pas répondu aux demandes d'autorisation.

Puis-je utiliser l'API de notification du navigateur dans mon script de travail?

Oui, l'API de notification du navigateur peut être utilisée dans le script de travail. Cela vous permet d'afficher les notifications à partir des taches d'arrière-plan, même si la page principale n'est pas au point.

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!