pushbell/index.html at master · webpush-channels/pushbell · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
</head>
<body>
    <button id="bell">Ring!</button>

    <script type="text/javascript">
        if (!('serviceWorker' in navigator && 'PushManager' in window)) {
          throw new Error("Push not supported.");
        }

        const SERVER = "http://10.243.33.126:9999/v0";
        const CHANNEL = "bell";

        const bell = document.getElementById("bell");
        const audio = new Audio("bell.ogg");

        bell.onclick = () => {
          sendJson(`${SERVER}/channels/${CHANNEL}`);  // No body for this use case.
        };
        navigator.serviceWorker.onmessage = function(event) {
          console.log("Message received", event);
          audio.play();
        };

        navigator.serviceWorker.register('service-worker.js')
          .then((registration) => {
            return registration.pushManager.getSubscription()
              .then((subscription) => {
                if (subscription) {
                  return;  // Returning user, nothing to do.
                }
                return registration.pushManager.subscribe({ userVisibleOnly: true })
                  .then((subscription) => {
                    subscription = subscription.toJSON();
                    // Send the subscription to webpush-channels.
                    sendJson(`${SERVER}/subscriptions`, {body: {data: subscription}})
                      .then(() => {
                        // Register to a channel (e.g. "bell")
                        return sendJson(`${SERVER}/channels/${CHANNEL}/registration`, {
                          method: "PUT"
                        });
                      });
                  });
              });
          });

          function sendJson(url, options = {method: "POST"}) {
            return fetch(url, {
              method: options.method || "POST",
              headers: {
                'Content-type': 'application/json',
                'Authorization': 'Basic bWF0Og=='
              },
              body: JSON.stringify(options.body)
            });
          }
    </script>
</body>
</html>