You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Push messages are a useful communication channel that lets applications update their users with relevant and timely content. Push messages can be used to re-engage users with your app.
14
14
15
15
One of the most significant advantages of push messages is that they can be delivered by your app's server even when the user isn't actively using your app.
16
16
17
-
Push message notifications are useful for apps to take part in the system's notification center and display images and text information. Notifications are useful to alert the user about an important updates in your app. However, notifications should be used rarely, because they tend to be disruptive to the user's workflow.
17
+
Push message notifications take part in the system's notification center, and they can display images and text information. Notifications are useful to alert the user about an important updates in your app. However, notifications should be used rarely, because they tend to be disruptive to the user's workflow.
18
18
19
19
To create a PWA that supports push notifications:
20
20
21
-
1.Subscribe to a messaging service using the [Push API](https://developer.mozilla.org/docs/Web/API/Push_API).
22
-
1.Display a toast message when a message is received from the service, by using the [Notifications API](https://developer.mozilla.org/docs/Web/API/Notifications_API).
23
-
24
-
Like Service Workers, the push notification APIs are standards-based APIs. The push notification APIs work across browsers, so your code should work everywhere that PWAs are supported. For more information about delivering push messages to different browsers on your server, see [Web-Push](https://www.npmjs.com/package/web-push).
21
+
1.Request the user's permission to receive push notifications in the client-side code of your PWA.
22
+
1.Subscribe to your server's push messages.
23
+
1. Send push messages from the server-side code of your PWA.
24
+
1.Display notifications when push messages are received.
## Step 1 - Request the user's permission to receive push notifications
29
29
30
-
Push notifications require VAPID (Voluntary Application Server Identification) keys in order to send push messages to the PWA client. There are several VAPID key generators available online (for example, [vapidkeys.com](https://vapidkeys.com)).
30
+
Before you can send push notifications to your PWA, you must request permission from the user to receive messages. To request permission, use the [Notification.requestPermission API](https://developer.mozilla.org/docs/Web/API/Notification/requestPermission_static) in your client-side code, such as when the user clicks a button:
31
31
32
-
After the keys are generated, you'll receive a JSON object that contains a public and private key. Save the VAPID keys for later use in the tutorial below.
console.log("The user accepted to receive notifications");
37
+
}
38
+
});
39
+
});
40
+
```
33
41
34
-
For information about VAPID and WebPush, see [Sending VAPID identified WebPush Notifications using the Mozilla Push Service](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service).
Service workers handle push events and toast notification interactions in your PWA. To subscribe the PWA to server push notifications:
41
-
42
-
* Make sure your service worker is installed, active, and registered.
43
-
* Make sure your code for completing the subscription task is on the main UI thread of the PWA.
44
-
* Make sure you have network connectivity.
54
+
To receive push events from your server, subscribe to push notifications by using the [Push API](https://developer.mozilla.org/docs/Web/API/Push_API).
45
55
46
56
Before a new push subscription is created, Microsoft Edge checks whether the user has granted the PWA permission to receive notifications.
47
57
48
-
If the user has not granted the PWA permission to receive notifications, the user is prompted by the browser for permission. If the user doesn't grant permission to the browser, the request to `registration.pushManager.subscribe` throws a `DOMException`, which must be handled. For more on permission management, go to [Push Notifications in Microsoft Edge](https://blogs.windows.com/msedgedev/2016/05/16/web-notifications-microsoft-edge#UAbvU2ymUlHO8EUV.97).
58
+
If the user hasn't granted the PWA permission to receive notifications, the user is prompted by the browser for permission. If the user doesn't grant permission to the browser, the request to `registration.pushManager.subscribe` throws a `DOMException`.
49
59
50
-
In your `pwabuilder-sw-register.js` file, append the following code:
60
+
The following code snippet shows how to subscribe to push notifications in your PWA:
51
61
52
62
```javascript
53
-
// Ask the user for permission to send push notifications.
54
-
navigator.serviceWorker.ready
55
-
.then(function (registration) {
56
-
// Check if the user has an existing subscription
57
-
returnregistration.pushManager.getSubscription()
58
-
.then(function (subscription) {
59
-
if (subscription) {
60
-
return subscription;
61
-
}
62
-
63
-
constvapidPublicKey="PASTE YOUR PUBLIC VAPID KEY HERE";
applicationServerKey:urlBase64ToUint8Array("YOUR PUBLIC VAPID KEY HERE")
69
78
});
79
+
} catch (err) {
80
+
// The subscription wasn't successful.
81
+
console.log("Error", err);
82
+
}
83
+
}
70
84
71
85
// Utility function for browser interoperability
72
86
functionurlBase64ToUint8Array(base64String) {
73
-
var padding ='='.repeat((4-base64String.length%4) %4);
74
-
var base64 = (base64String + padding)
75
-
.replace(/\-/g, '+')
76
-
.replace(/_/g, '/');
77
-
78
-
var rawData =window.atob(base64);
79
-
var outputArray =newUint8Array(rawData.length);
80
-
81
-
for (var i =0; i <rawData.length; ++i) {
82
-
outputArray[i] =rawData.charCodeAt(i);
83
-
}
84
-
return outputArray;
87
+
var padding ='='.repeat((4-base64String.length%4) %4);
88
+
var base64 = (base64String + padding)
89
+
.replace(/\-/g, '+')
90
+
.replace(/_/g, '/');
91
+
92
+
var rawData =window.atob(base64);
93
+
var outputArray =newUint8Array(rawData.length);
94
+
95
+
for (var i =0; i <rawData.length; ++i) {
96
+
outputArray[i] =rawData.charCodeAt(i);
97
+
}
98
+
return outputArray;
85
99
}
86
100
```
87
101
88
-
See also [PushManager](https://developer.mozilla.org/docs/Web/API/PushManager)and [Web-Push](https://www.npmjs.com/package/web-push#usage).
102
+
The VAPID key that's mentioned in the previous code snippet is a public key that's used to identify the server that sends the push messages and encrypt the push message payload. See [Step 3 - Send push messages from your server](#step-3---send-push-messages-from-your-server) for more information about VAPID keys.
After a subscription is created in your PWA, add handlers to the service worker to respond to push events. Push event are sent from the server to display toast notifications. Toast notifications display data for a received message. To do any of the following tasks, you must add a `click` handler:
108
+
Your application needs VAPID (Voluntary Application Server Identification) keys in order to send push messages from your server to your PWA clients. There are several VAPID key generators available online (for example, [Vapidkeys.com](https://vapidkeys.com)).
95
109
96
-
* Dismissing the toast notification.
97
-
* Opening a window.
98
-
* Putting focus on a window.
99
-
* Opening and putting focus on a new window to display a PWA client page.
110
+
Once you have a VAPID key, you can send push messages to your PWA clients by using [the Web Push Protocol](https://web.dev/push-notifications-web-push-protocol/).
100
111
101
-
To add a `click` handler, in your `pwabuilder-sw.js` file, add the following handlers for the `push` event and the `notificationclick` event:
112
+
You can use a library to send push messages from your server, depending on the programming language you use. For example, you can use the [web-push](https://github.com/web-push-libs/web-push) library if your server uses Node.js. Other libraries are available on the [WebPush libraries repo](https://github.com/web-push-libs/).
102
113
103
-
```javascript
104
-
// Respond to a server push with a user notification.
1. Go to your PWA at `http://localhost:3000`. When your service worker activates and attempts to subscribe your PWA to push notifications, Microsoft Edge prompts you to allow your PWA to show notifications. Select **Allow**.
116
+
## Step 4 - Display notifications when push messages are received
143
117
144
-
118
+
After a subscription is created in your PWA (as shown in [Step 2 - Subscribe to push notifications](#step-2---subscribe-to-push-notifications)), add a `push` event handler in your service worker to handle push messages that are sent by your server.
145
119
146
-
1. Simulate a server-side push notification, as follows. With your PWA opened at `http://localhost:3000` in your browser, select **F12**to open DevTools. Select **Application** > **Service Worker** > **Push** to send a test push notification to your PWA.
120
+
The following code snippet shows how to display a notification when a push message is received:
147
121
148
-
The push notification is displayed near the taskbar.
149
-
150
-
151
-
152
-
If you don't select (or _activate_) a toast notification, the system automatically dismisses it after several seconds and queues it in your Windows Action Center.
153
-
154
-
122
+
```javascript
123
+
// Listen to push events.
124
+
self.addEventListener('push', event=> {
125
+
// Check if the user has granted permission to display notifications.
*[How to make PWAs re-engageable using Notifications and Push](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Re-engageable_Notifications_Push).
0 commit comments