ブラウザ間で通知を表示する方法

イベントが発生したときに通知を表示するWebサイトを作成しようとしています。私はthe MDN page for Notificationsをチェックして、Firefox Developer Edition 58.0b7で動作する例を書いたが、Edge 40.15063.674.0とChrome 62.0.3202.94（Windows 10の場合）で奇妙な動作をしている。お使いのコンピュータ内のファイルにそのコードの保存ブラウザ間で通知を表示する方法

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>test</title> 
</head> 
<body> 
    <script> 
    function notify(str) { 
    if(!("Notification" in window) || Notification.permission === "deneided") { 
    return alert(str); 
    } 
    if (Notification.permission === "granted") { 
    return new Notification("TITLE", {body: str}); 
    } 
    Notification.requestPermission().then(perm => { 
    console.log("request result", perm); 
    console.log("Notification.permission", Notification.permission); 
    if (perm === "granted") { 
     return new Notification("TITLE", {body: str}); 
    } 
    }); 
} 

notify("test"); 
    </script> 
</body> 
</html>

し、ブラウザでそれを開きます。ここでは

は最小完全な検証例です。

Firefoxでは、尋ねられるたびに許可を与えて、通知が表示されるときはいつでも許可します。
Chromeでは、権限を付与すると、権限要求が"granted"を返しましたが、Notification.permissionは依然として「デフォルト」であり、通知は表示されません。 notifyを再度実行すると、通知を表示する権限を求める別のダイアログが表示されます。
エッジでは、アクセス許可を付与した後、Notification.permissionはgrantedですが、新しい通知を作成しようとするとUnknownErrorになります。

Firefoxで動作しているのにEdgeやChromeで動作していないのはなぜですか？少なくともChromeでうまく動作させるにはどうすればいいですか？

出典

2017-11-28 Hawkings

MDN notification API Docsで提供されている例に従うことができます。「代替例：ページの読み込み」では、オーバーヘッドの少ない通知を表示できます。

あなたはページを更新後に更新Notification.permission変数が表示されますChromeで

（ここでは、スニペットが通知の試行を拒否します）ローカルファイルで次のコードを試してみてください。私のコードと同じ結果でクロム結果にあなたのコードを使用して

Notification.requestPermission().then(function(result) { 
 
    console.log(result); 
 
}); 
 

 
document.querySelector('#notifyButton').addEventListener('click', showNotification) 
 

 
function showNotification(){ 
 
\t console.log('Clicked!!') 
 
\t var options = { 
 
\t  body: 'this is the body!' 
 
\t } 
 
\t var n = new Notification('this is the title', options); 
 
}

<input id="notifyButton" type="button" name="notify" value="click for notification">

出典

2017-11-28 21:22:06 randomguy04

。通知は表示されず、 'Notification.permission'はページをリロードした後でも' 'default''です。 – Hawkings

ブラウザ間で通知を表示する方法

答えて

関連する問題