使网络通知也可以在智能手机浏览器中使用吗?

时间:2019-05-22 11:33:05

标签: javascript html push-notification

我有这段代码,可以通过一个蔚蓝的http静态站点将Web通知发送到当前页面。

但是我希望通知也可以与智能手机上的移动浏览器一起使用。似乎在那里不工作。是否有任何解决方案或替代方法可以在智能手机浏览器上模拟通知。我想制作一个软件原型,用于接收有关智能音符的通知。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
  <script>
    function ask_for_permission() {
      navigator.serviceWorker.register('sw.js');
      Notification.requestPermission(function (result) {
        if (result === 'granted') {
          navigator.serviceWorker.ready.then(function (registration) {
            registration.showNotification('Notification with ServiceWorker');
          });
        }
      });
    }

    function send() {

      Notification.requestPermission(function (result) {
        if (result === 'granted') {
          navigator.serviceWorker.ready.then(function (registration) {

            var ntitle = document.getElementById('title').value;
            var nbody = document.getElementById('body').value;

            registration.showNotification(ntitle, {
              body: nbody
            });

          });
        }
      });


    }
  </script>
</head>

<body onload="init()">
  <style> body{
    background-image: url("background2.jpg");
  }
  </style>
  <div class="w3-container w3-card">
    <h1>Phone App</h1>

    <button id="ask_permission" onclick="ask_for_permission()">Aktivieren</button>
    <div>
      Titel:
      <input id="title" value="Neue Benachrichtigung" /><br />
      Inhalt:
      <input id="body" value="Ich bin eine Webnotification!" /><br />
      <button onclick="send()">Senden</button>
    </div>
  </div>
</body>

</html>

0 个答案:

没有答案