web-dev-qa-db-fra.com

Notification HTML5 ne fonctionne pas dans Mobile Chrome

J'utilise l'API de notification HTML5 pour notifier l'utilisateur sous Chrome ou Firefox. Sur les navigateurs de bureau, cela fonctionne. Toutefois, dans Chrome 42 pour Android, l'autorisation est demandée mais la notification elle-même n'est pas affichée.

Le code de requête fonctionne sur tous les appareils:

if ('Notification' in window) {
  Notification.requestPermission();
}

Le code d'envoi fonctionne sur le navigateur du bureau mais pas sur le mobile:

if ('Notification' in window) {
  new Notification('Notify you');
}
javascripthtml5google-chromenotificationsweb-notifications
24
Jorn

Essayez ce qui suit:

navigator.serviceWorker.register('sw.js');
Notification.requestPermission(function(result) {
  if (result === 'granted') {
    navigator.serviceWorker.ready.then(function(registration) {
      registration.showNotification('Notification with ServiceWorker');
    });
  }
});

Cela devrait fonctionner sur Android à la fois dans Chrome et dans Firefox Nightly (mais pas encore pour Firefox beta).

(Le fichier sw.js peut simplement être un fichier de zéro octet.)

Un inconvénient est que vous devez l'exécuter à partir d'une origine sécurisée (une URL https, pas une URL http).

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification contient plus d'informations.

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BygptYClroM contient des informations sur les raisons pour lesquelles le constructeur Notification n'est pas pris en charge dans Chrome sous Android alors qu'il l'est toujours Bureau Chrome.

34
sideshowbarker

Lancer ce code:

 if ('Notification' in window) {
  Notification.requestPermission();
}

La console dans Chrome DevTools affiche cette erreur: 

Uncaught TypeError: Impossible de construire ‘Notification’: Illégal. constructeur. Utilisez plutôt ServiceWorkerRegistration.showNotification ()

Une meilleure approche pourrait être:

function isNewNotificationSupported() {  
    if (!window.Notification || !Notification.requestPermission)  
        return false;  
    if (Notification.permission == 'granted')  
        throw new Error('You must only call this \*before\* calling 
Notification.requestPermission(), otherwise this feature detect would bug the 
user with an actual notification!');  
    try {  
        new Notification('');  
    } catch (e) {  
        if (e.name == 'TypeError')  
            return false;  
    }  
    return true;  
}

Source de la fonction: HTML5Rocks

3
Kalimah Apps

Je n'ai eu aucun problème avec l'API de notification sur le bureau Windows. Cela a même fonctionné sans problème sur Mobile FF. J'ai trouvé une documentation qui semblait indiquer que Chrome pour Android était également pris en charge, mais cela ne fonctionnait pas pour moi. Je voulais vraiment prouver que l'API pourrait fonctionner pour moi sur ma version actuelle (2019) de Chrome (70) pour Android. Après beaucoup de recherches, je peux facilement voir pourquoi beaucoup de gens ont eu des résultats mitigés. La réponse ci-dessus n'a tout simplement pas fonctionné pour moi lorsque je l'ai collée dans une page à nu, mais j'ai découvert pourquoi. Selon le débogueur de Chrome, l'API de notification n'est autorisée qu'en réponse à un geste de l'utilisateur. Cela signifie que vous ne pouvez pas simplement appeler la notification lors du chargement du document. Au lieu de cela, vous devez invoquer le code en réponse à l'interactivité de l'utilisateur, par simple clic.

Voici donc une solution complète et nue qui prouve que vous pouvez obtenir des notifications qui fonctionnent sur Chrome (2019) actuel pour Android (Remarque: jQuery s’applique simplement par souci de brièveté):

<html>

<head>
<script type="text/javascript" src="libs/jquery/jquery-1.12.4.min.js"></script>
<script>

$( function()
{
    navigator.serviceWorker.register('sw.js');

    $( "#mynotify" ).click( function()
    {
        Notification.requestPermission().then( function( permission )
        {
            if ( permission != "granted" )
            {
                alert( "Notification failed!" );
                return;
            }

            navigator.serviceWorker.ready.then( function( registration )
            {
                registration.showNotification( "Hello world", { body:"Here is the body!" } );
            } );

        } );
    } );
} );

</script>

</head>

<body>
<input id="mynotify" type="button" value="Trigger Notification" />
</body>

</html>

En résumé, les choses importantes à savoir sur les notifications sur le Chrome (2019) actuel pour Android:

  1. Doit utiliser HTTPS
  2. Doit utiliser l'API de notification en réponse à l'interactivité de l'utilisateur
  3. Doit utiliser l'API de notification pour demander l'autorisation de notification
  4. Doit utiliser l'API ServiceWorker pour déclencher la notification réelle
1
Jeff Bruce

Si vous avez déjà un technicien inscrit, utilisez ceci:

navigator.serviceWorker.getRegistrations().then(function(registrations) {
  registrations[0].showNotification(title, options);
});
0
Ben