Yes, HTML5 websites can implement push notifications through modern web APIs, but they require cooperation from JavaScript, service workers and backend servers. The specific steps are as follows: 1. Check the browser support status and ensure that there is a Service Worker and PushManager; 2. Register a service worker to manage push events; 3. Request user authorization through Notification.requestPermission(); 4. Use the web-push library to generate a VAPID key for identity identification; 5. After the user authorization, use the pushManager.subscribe method to subscribe to the push service and send subscription information to the backend; 6. Listen to the push event in the service worker and call showNotification to display notifications; 7. The backend uses the web-push library and VAPID key to send push messages to the user.

Push notifications in HTML5 aren't something you can implement directly with just HTML — it requires a combination of JavaScript, service workers, and a backend server. But yes, you can enable push notifications on websites using modern web APIs.

Here's how to do it step by step.

1. Check Browser Support

Before diving into code, make sure the user's browser support push notifications. Most modern browsers like Chrome, Firefox, Edge, and Safari support them, but some mobile browsers (especially on iOS) have limited or no support.

You can check support like this:

 if ('serviceWorker' in navigator && 'PushManager' in window) {
  // Supported!
} else {
  console.log('Push notifications not supported in this browser.');
}

Keep in mind:

• Safari has its own way of handling push via Apple Push Notification service (APNs)
• iOS Safari only allows push notifications for installed web apps (added to home screen)

2. Register a Service Worker

Push notifications rely on service workers — background scripts that manage network requests and act as a proxy between your app and the network.

Create a file called sw.js and register it in your main JavaScript file:

 navigator.serviceWorker.register('/sw.js')
  .then(function(registration) {
    console.log('Service Worker registered with scope:', registration.scope);
  })
  .catch(function(err) {
    console.log('Service Worker registration failed:', err);
  });

Inside sw.js , just leave it empty for now — we'll use it later for handling push events.

3. Request Permission from the User

Before sending any notifications, you must ask the user for permission. This is done using the Notification.requestPermission() method.

 Notification.requestPermission().then(function(result) {
  if (result === 'granted') {
    console.log('Permission granted!');
    // Now subscribe to push notifications
  } else {
    console.log('Permission denied or dismissed.');
  }
});

?? Important: You should never auto-trigger this — let the user initiate it with a button click or similar action. Otherwise, they may block it out of habit.

4. Generate VAPID Keys

To use push notifications, you need a set of keys known as VAPID (Voluntary Application Server Identification). These are used to identify your application when subscribers.

You can generate these keys using libraries like web-push in Node.js:

 npm install web-push

Then run:

 const webpush = require('web-push');
const vacuumKeys = webpush.generateVAPIDKeys();
console.log(vapidKeys);

Save the public and private keys — you'll use the public key when subscribed users and the private one on your server.

5. Subscribe the User

Once the service worker is registered and permission is granted, you can subscribe the user to push notifications:

 navigator.serviceWorker.ready.then(function(registration) {
  return registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
  });
});

You'll need this helper function to convert the base64-encoded public key:

 function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String padding)
    .replace(/-/g, ' ')
    .replace(/_/g, '/');
  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

After subscription, send the endpoint and keys to your backend so you can send targeted messages.

6. Handle Push Events in Service Worker

Now that the user is subscribed, your service worker needs to handle incoming push messages.

Add this to your sw.js :

 self.addEventListener('push', function(event) {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: data.icon || '/icon.png'
  });
});

This listens for push events and displays a notification based on the payload.

7. Send a Push Message from Your Backend

Finally, to trigger a notification, you'll need to send a POST request to the endpoint provided during subscription, using the private VAPID key and the user's subscription details.

Using the web-push library again:

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

webpush.setVapidDetails(
  'mailto:you@example.com',
  publicVapidKey,
  privateVapidKey
);

webpush.sendNotification(subscription, JSON.stringify({
  title: 'Hello!',
  body: 'This is a push notification.',
  icon: '/icon.png'
}));

Where subscription is the object you saved earlier from pushManager.subscribe .

That's basically it. It looks complex at first, but once you break it down into steps, implementing push notifications in HTML5 becomes manageable.

It's not complicated — just involves several moving parts working together.

The above is the detailed content of How to implement push notifications in HTML5?. For more information, please follow other related articles on the PHP Chinese website!