2017-02-13 85 views
1

我無法讓HTML5推送通知在所有網絡瀏覽器和移動瀏覽器上都能正常工作。目前,我有以下代碼:讓HTML5推送通知可以跨所有網頁瀏覽器和移動瀏覽器使用?

<html> 
<head> 
<script> 
document.addEventListener('DOMContentLoaded', function() { 
    if (Notification.permission !== "granted") 
    Notification.requestPermission(); 
}); 

function notifyMe() { 
    if (!Notification) { 
    alert('Desktop notifications not available in your browser.'); 
    return; 
    } 

    if (Notification.permission !== "granted") 
    Notification.requestPermission(); 
    else { 
    var notification = new Notification('Notification title', { 
     icon: 'https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png', 
     body: "Hey there! You've been notified!", 
    }); 

    notification.onclick = function() { 
     window.open("https://www.google.com");  
    }; 

    } 

} 
</script> 
</head> 
<body> 

<a href="javascript://" onclick="setTimeout(function(){ notifyMe(); }, 1500);" style="font-size:50px;background:#000;color:#fff;">Test nofitications (Will load in 1.5 seconds)</a> 

</body> 
</html> 

當我嘗試使用的代碼我使用Chrome的Android手機上,它要求的權限,但實際的通知不起作用。

任何想法?

編輯:

試過沒有成功如下:

http://www.girliemac.com/html5-notifications-webOS-style/ 
http://elfoxero.github.io/html5notifications/ 
http://codepen.io/imprakash/pen/ZYLayY 
https://www.daftlogic.com/sandbox-using-html5-notifications.htm 
https://davidwalsh.name/demo/notifications-api.php 
http://ttsvetko.github.io/HTML5-Desktop-Notifications/ 
http://jsfiddle.net/Semmel/kY3Cq/ 
https://gauntface.github.io/simple-push-demo/ 
https://github.com/alexgibson/notify.js/blob/master/example/index.html 
+0

你可以試試通過使用Chrome開發工具在桌面上調試手機上的行爲,並且可能會檢查您是否在控制檯上收到任何錯誤。 –

回答

1

通知改爲只能是通過推送事件Android上的服務人員使用。

從推送事件,你無法通過new Notification()的通知,而不是你需要做的維護工作人員如下:

self.addEventListener('push', (event) => { 
    event.waitUntil(self.registration.showNotification('Title', { 
    body: 'Hello, World' 
    })); 
}); 

更多關於推送通知:https://web-push-book.gauntface.com/