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
## Step 1 - Request the user's permission to receive push notifications
29
29
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, when the user clicks a button, for example:
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
32
```javascript
33
33
button.addEventListener("click", () => {
@@ -55,7 +55,7 @@ To receive push events from your server, subscribe to push notifications by usin
55
55
56
56
Before a new push subscription is created, Microsoft Edge checks whether the user has granted the PWA permission to receive notifications.
57
57
58
-
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`.
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`.
59
59
60
60
The following code snippet shows how to subscribe to push notifications in your PWA:
61
61
@@ -99,23 +99,23 @@ function urlBase64ToUint8Array(base64String) {
99
99
}
100
100
```
101
101
102
-
The VAPID key mentioned in the previous code snippet is a public key that is 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.
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.
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)).
109
109
110
-
Once you have a VAPID key, you can send push messages to your PWA clients by using the Web Push Protocol. To learn more about the protocol, see [The Web Push Protocol](https://web.dev/push-notifications-web-push-protocol/).
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/).
111
111
112
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/).
## Step 4 - Display notifications when push messages are received
117
117
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 sent by your server.
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.
119
119
120
120
The following code snippet shows how to display a notification when a push message is received:
0 commit comments