Improving user participation in web application: Detailed explanation of web push notifications

This article will explore how to improve the user experience of existing web applications by adding notification functions similar to native applications. We will explain in-depth the concept of web push notifications and gradually demonstrate how to integrate this feature in existing web applications, covering the current specification and browser support. The article was originally published in Sencha. Thanks to the partners who support SitePoint.

Core points:

• Understanding the basics: Web push notifications allow web applications to send messages directly to user devices, even if the application is inactive.
• Service worker registration: Service worker is responsible for handling push messages, must register when the page is loaded, and conduct appropriate browser support checks.
• User subscription process: Key steps in receiving push notifications include obtaining user consent, generating push subscriptions through a browser, and sending this data to the application server.
• Send push messages: Push messages should be encrypted and sent via HTTP POST requests, and use parameters such as TTL and urgency to manage delivery details.
• Processing message and user interaction: Service workers process incoming push messages and manage user interactions, such as notification clicks and closings.
• Unsubscription and subscription expiration: Provides methods for users to unnotify subscriptions and handles subscription lifecycle events, including expiration and renewal.

Web push notification protocol

The web push notification protocol is relatively new. It gives web applications a native application-like functionality, allowing them to receive push messages from the server at any time, even if the web application is not active or loaded into the browser. This allows you to interact with users at any time, prompting them to return to the app even if they are not using your app.

The commercial value of web push notifications is obvious: it can increase user engagement, thereby increasing the overall value of the application, because push notifications make your application more useful to users, improve the usability of web applications, and make us more useful to us. It's closer to developing a single web application for all platforms, rather than developing native applications for each platform.

Comparison of Web Push and WebSockets

Before getting into the technical details, let's first understand the difference between Web push and WebSockets. First, they have some common things: Web push and WebSockets are designed to enable real-time communication between web applications and application servers, and send real-time data and updates from application servers to web applications.

The following are their differences:

• WebSockets Use only when the web page is loading and active. Web push notifications can be used at any time, including when the app is active, inactive, or unloaded, and when the browser is not active or even closed.
• The data sent using web push must be encrypted, and the size of each message is limited (no greater than 4KB). There are also limits on the number of messages sent (the exact limit value depends on the browser). Some browsers (such as Chrome) may also require notifications to be displayed to the user every time they receive a message. When using WebSockets, you don't have any of these restrictions: you can send any number of unencrypted messages of any size and process them as needed; you can display notifications, silently update data in your app, or do nothing at all.
• The general rules are: when the user interacts with the application, use WebSockets to send ordinary data updates to your web application; use Web push notifications to send important urgent messages that must be received immediately, regardless of whether the user is using your application at the time .

Technical concept

Let's take a look at the technical details of this technology. I will use a game with special rules, participants, and turn to explain these details. I will first describe participants in this game called "Web Push Notifications":

• Web Application
• Service workers
• Browser
• Application Server
• Push server

Push server is a service implemented by browser manufacturers; it is a communication bridge between the application server and the browser. It is responsible for delivering messages from your application server to your browser.

Use game demo web push notifications

I will use a game to demonstrate how to add web push notifications to your app. The rules of this game are defined by multiple specifications provided by the World Wide Web Alliance and the Internet Engineering Task Force:

• Communication between the browser and the web application or service worker associated with it is described in the Push API specification.
• Displaying different types of notifications and notification processing is described in the Notifications API specification.
• The communication between the application server and the push server is defined in the Web push protocol specification.
• There are also some additional specifications that describe push message encryption and application server authentication, allowing your application server to prove that it is allowed to send messages to your users.

Game round

I split the game into four rounds and explain the concept and goals of each round. I'll then show you how to implement each turn in your app.

Round 1: Service Worker Registration

Web push notifications require a service worker to process push messages, so the first round is to register your service worker. Only your web application and browser participate in this round. This round occurs when the page is loading.

The web application sends a request to register a service worker to the browser. If the service worker successfully registers, the browser will reply using the ServiceWorkerRegistration object.

To implement this round, you need to add the following code to your web application:

if ('serviceWorker' in navigator) {
  if ('PushManager' in window) {
    navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) {
      // 狀態(tài)初始化
    }).catch(function() {
      // 錯誤處理
    });
  } else {
    // 錯誤處理
  }
} else {
  // 錯誤處理
}

First of all, we need to check whether the browser supports service workers. Then, we need to check whether the browser supports web push notifications. With browser support increasing, adding these two checks is always a good idea.

If both are supported, we will register for our service workers. To do this, we call the navigator.serviceWorker.register() method and pass the path of the service worker file as a parameter. After this step, the browser downloads the file and runs it in the service worker environment. A service worker file is a standard JavaScript file, but the browser will "give it access" the service worker API, including push.

If everything goes well and there are no errors, the promise returned by register() will be parsed. If any type of error occurs, the promise will be rejected, we need to deal with this situation and the situation where the browser does not support the service worker. When register() parses, it returns a ServiceWorkerRegistration object that will be used in the next turn.

(The instructions for subsequent rounds will follow a structure similar to those mentioned above, including code examples, pictures and explanations, and rewrite and polish the original text to maintain information integrity and readability. Due to space limitations, here No more detailed descriptions of all rounds are expanded. )

Summary

Web push notification technology is ready for widespread use. It helps you communicate with users more effectively, engage users by providing urgent and relevant notifications, and it generally makes web applications better.

Try using it in your app. Sencha Cmd 6.5 supports the following progressive web application features: add to home screen banners and use service workers' cache. Read the Sencha Cmd documentation for more information, or download the free trial of Sencha Ext JS, where you will have access to over 115 components and tools, including Sencha Cmd.

(The FAQs section also requires similar rewriting and polishing, and will not be expanded here.)

The above is the detailed content of How to Build Push Notifications for Web Applications. For more information, please follow other related articles on the PHP Chinese website!