web-dev-qa-db-ja.com

HTML5通知がモバイルで機能しないChrome

ChromeまたはFirefoxでユーザーに通知するために、 HTML5通知API を使用しています。デスクトップブラウザでは、動作します。ただし、AndroidのChrome 42では、許可が要求されますが、通知自体は表示されません。

要求コードは、すべてのデバイスで機能します。

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

送信コードは、デスクトップブラウザーでは機能しますが、モバイルでは機能しません。

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

以下を試してください：

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

これはAndroid ChromeとFirefox（およびiOSのSafariも）の両方で動作します。

（sw.jsファイルは、ゼロバイトのファイルにすることができます。

1つの注意点は、安全なOrigin（https URLではなく、http URL）から実行する必要があることです。

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification を参照してください。

39
sideshowbarker

このコードの実行：

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

Chrome DevToolsのコンソールにこのエラーが表示されます。

不明なTypeError：「通知」の構築に失敗しました：不正なコンストラクター。代わりにServiceWorkerRegistration.showNotification（）を使用してください

より良いアプローチは次のとおりです。

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

関数ソース： HTML5Rocks

3
Kalimah Apps

Service Workerがすでに登録されている場合は、これを使用します：

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

私は、Windowsデスクトップの通知APIに問題はありませんでした。モバイルFFでも問題なく機能しました。 Chrome for Androidもサポートされていましたが、うまくいきませんでした。APIが機能することを証明したかったのです。私の現在の（2019）バージョンのChrome（70）for Android。多くの調査を行った結果、多くの人が結果を混在させた理由を簡単に確認できます。上記の答えはうまくいきませんでした。 Chromeデバッガーによると、通知APIはユーザージェスチャへの応答でのみ許可されます。つまり、できることを意味します。 tは、ドキュメントが読み込まれたときに通知を呼び出すだけで、クリックなどのユーザーの対話性に応じてコードを呼び出す必要があります。

したがって、ここでは、現在の（2019）Chrome for Android（注：単純にjQueryを使用しました。簡潔にするため）：

<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>

要約すると、現在の（2019）Chrome Androidの場合の通知に関する重要な注意事項：

  1. HTTPSを使用する必要があります
  2. ユーザーの対話性に応じて通知APIを使用する必要があります
  3. Notification APIを使用して通知の許可を要求する必要があります
  4. ServiceWorker APIを使用して実際の通知をトリガーする必要があります
2
Jeff Bruce