Push Notifications
There are different ways to keep your user engaged and up to date such as by email, in-app notifications, and push notifications! Native mobile apps have been engaging their users by push notifications for a long time. This feature was not supported on th
- PDF / 689,643 Bytes
- 27 Pages / 504 x 720 pts Page_size
- 98 Downloads / 208 Views
Push Notifications There are different ways to keep your user engaged and up to date such as by email, in- app notifications, and push notifications! Native mobile apps have been engaging their users by push notifications for a long time. This feature was not supported on the web until PWAs were born. Thanks to new standard APIs such as Notification API and Push API, which are built on top of Service Worker, it’s possible to send push notifications to web users. In this chapter, you’ll discover the basics of push notifications and will build a working example for the existing application, PWA Note. You’ll see how we write a Firebase Cloud Function in order to send push notifications from a server. All in all, after this chapter, you should be able to run your own server for sending push notifications and implement this feature in Angular in no time.
Introduction to Push Notifications Most modern web applications will keep their users updated and communicate through different channels such as their social medias, emails, and in-app notifications. While all of these channels are great, they don’t always grab their users’ attention, especially when the user navigates away from the app. Traditionally, native applications had this amazing ability, push notification, until PWAs were born. That’s why PWAs are a game changer. A notification is a message that can be shown on the user’s device and is triggered either locally by Web Notifications API1 or can be pushed from the server to the user when the app is not even running, thanks to Service Worker.
https://www.w3.org/TR/notifications/
1
© Majid Hajian 2019 M. Hajian, Progressive Web Apps with Angular, https://doi.org/10.1007/978-1-4842-4448-7_8
201
Chapter 8
Push Notifications
Web Notifications The notification API allows a web page to control the display of system notifications to the user. Since this message is shown outside of the top-level browsing context viewport, it can be displayed to the user even if the user switches tabs. The best part is that this API is designed to be compatible with existing notification systems across different platforms. On supported platforms, the user needs to grant the current origin permission to display system notifications. Generally, it can be done by calling the Notification. requestPermission() method (Figure 8-1).
Figure 8-1. Permission popup for web notifications in different browsers Once permission is granted, on the web page, we just need to instantiate Notification constructor with an appropriate title and options (see Figure 8-2). new Notification("New Email Received", { icon: "mail.png" })
Figure 8-2. Simple notification received in Chrome browser 202
Chapter 8
Push Notifications
This is pretty great. It would be nice if we can involve Service Worker, too. When showing a notification is handled by Service Worker, it’s called “Persistent notifications,” since Service Worker remains persistent in the background of the app whether it’s running or not. Almost all of the code is going to be the same as be
Data Loading...
