To enable push notifications in the H5 page, firstly, user authorization is required, and permission is obtained through Notification.requestPermission(); secondly, use PushManager.subscribe() to obtain subscription information, including endpoint, publicKey and authToken; finally, send the subscription information to the backend to save. Push messages are sent by the backend calling the Web Push protocol. For example, in Node.js, you can use the web-push library to construct a request and send a POST to the endpoint address. When the message arrives, the Service Worker listens to the push event and displays the notification through showNotification, and also listens to the notificationclick event to achieve click jump. Cross-platform, Chrome and Firefox support is good. Safari is only available for macOS/iOS. iOS Safari does not support silent push in the background. It is recommended to refresh the subscription regularly and detect the permission status.

Want to use H5 to create an experience similar to native app push notifications? In fact, through Web Push and Service Worker, H5 can also realize the ability to "push messages to user devices". The key is to understand the entire process and correctly configure the relevant services.

How to enable push notifications in the H5 page?

To make a web page push messages, several core steps are required:

• User authorization: The browser will pop up a prompt asking whether to allow notifications to be received
• Get Push subscription information: including endpoint, publicKey, authToken and other fields
• Send subscription information to the backend to save for subsequent push

The key to this step is to use the two APIs: Notification.requestPermission() and PushManager.subscribe() . for example:

 if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    return registration.pushManager.getSubscription();
  }).then(function(subscription) {
    if (!subscription) {
      return registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('your public key')
      });
    }
    return subscription;
  }).then(function(subscription) {
    // Send subscription to your server});
}

Note: applicationServerKey is a VAPID public key that is used to verify push permissions.

Where do push messages come from? How to send the backend?

After the front-end gets the subscription information, the back-end can call the Web Push protocol to send messages.

Commonly used libraries are:

• Node.js: web-push
• Python: pywebpush
• PHP: minishlink/web-push

Taking Node.js as an example, the basic process is as follows:

1. Fetch the user's Push subscription information from the database (JSON format)
2. Use the web-push library to construct request headers and encrypted data bodies
3. Initiate a POST request to the endpoint address
4. Processing returns status code (such as 404 means that the subscription has expired)

Sample code:

 const webPush = require('web-push');

webPush.setVapidDetails(
  'mailto:your@email.com',
  process.env.PUBLIC_KEY,
  process.env.PRIVATE_KEY
);

webPush.sendNotification(subscription, JSON.stringify({
  title: 'New news',
  body: 'This is the push content from the server'
}));

If the push fails, remember to clean up the invalid subscription history.

How to display the message after it arrives?

When the push reaches the user device, the Service Worker receives a push event. You need to listen to this event in sw.js and decide whether to display the notification.

For example:

 self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icon.png',
      badge: '/badge.png',
      data: { url: '/' } // Can be used to click to jump})
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

This way users can receive notifications and click to open the page just like a native app.

Cross-platform compatibility considerations

The support for Push varies slightly from different systems and browsers:

• Chrome and Firefox support is better, but Safari can only use Apple Push on macOS/iOS
• The performance is stable on mobile Android, while iOS Safari has many restrictions (if it does not support silent push in the background)
• Users may turn off notification permissions or clear the Service Worker cache, causing the subscription to expire

It is recommended to refresh the subscription information regularly and actively detect the current notification permission status when the user accesses.

Basically that's it. Although the process is a bit long, each step is not complicated. The key is to connect the front-end and back-end cooperation.

The above is the detailed content of Building Progressive Web Apps with H5 Push Notifications. For more information, please follow other related articles on the PHP Chinese website!