如何实现非活跃状态网站通知？Angular+Express-Node.js方案及多端兼容咨询

Great question! Let's break down how these background notifications work, how to implement them with your Angular + Express stack, and what to expect for device/browser support.

The magic behind these persistent notifications relies on three core web technologies working together:

Core Components #

• Service Workers: These are lightweight, background scripts that run independently of your browser tab. They can listen for push events, cache assets, and perform actions even when the tab is closed or the browser is minimized.
• Web Push API: This API lets your backend send messages to the service worker via a browser-managed push service (more on that below).
• Push Service: A third-party service (e.g., Google's Firebase Cloud Messaging for Chrome, Apple's Push Notification Service for Safari) that handles routing push messages from your server to the user's device. It acts as a middleman to ensure messages reach the user even if their IP changes.

Step-by-Step Workflow #

1. User Grants Permission: Your Angular app first asks the user for permission to send notifications using the browser's Notification API.
2. Subscribe to Push: If permission is granted, the app generates a subscription object containing an endpoint URL (from the push service) and encryption keys. This object uniquely identifies the user's device/browser combo.
3. Store the Subscription: Send this subscription data to your Express backend and save it in a database (linked to the user's account for targeted notifications).
4. Trigger a Notification: When an event (like a new message or update) occurs, your backend uses the stored subscription to send a push message to the push service.
5. Service Worker Displays the Notification: The push service delivers the message to the user's device, waking up the service worker. The service worker then uses the Notification API to show the alert to the user.

Absolutely—this functionality is fully achievable with your tech stack. Here's a high-level guide to get you started:

Frontend (Angular) #

1. Set Up the Angular Service Worker: Angular has built-in support for PWAs (Progressive Web Apps) and service workers. Run ng add @angular/pwa to automatically set up the service worker, manifest file, and required configurations.
2. Request Permission & Subscribe: In your Angular component, use the SwPush service to handle subscription:

   import { SwPush } from '@angular/service-worker';
   import { HttpClient } from '@angular/common/http';
   
   constructor(private swPush: SwPush, private http: HttpClient) {}
   
   subscribeToNotifications() {
     if (this.swPush.isEnabled) {
       // Replace with your VAPID public key (generated in backend step)
       const vapidPublicKey = 'YOUR_VAPID_PUBLIC_KEY';
       
       this.swPush.requestSubscription({ serverPublicKey: vapidPublicKey })
         .then(subscription => {
           // Send subscription to your Express backend for storage
           this.http.post('/api/subscribe', subscription).subscribe({
             next: () => console.log('Subscription saved successfully'),
             error: err => console.error('Failed to save subscription', err)
           });
         })
         .catch(err => console.error('Could not subscribe to notifications', err));
     }
   }
   

3. Handle Push Events: Customize how notifications are displayed by modifying your Angular service worker configuration (ngsw-config.json) or adding a custom service worker script to listen for push events and show tailored alerts.

Backend (Express/Node.js) #

1. Generate VAPID Keys: VAPID (Voluntary Application Server Identification) keys authenticate your server with push services. Use the web-push library to generate them:

   npx web-push generate-vapid-keys
   

2. Configure Web Push: Store the public/private keys in environment variables, then set up the web-push library in your Express app:

   const webpush = require('web-push');
   const express = require('express');
   const app = express();
   app.use(express.json());
   
   // Configure VAPID keys
   webpush.setVapidDetails(
     'mailto:your-support-email@example.com',
     process.env.VAPID_PUBLIC_KEY,
     process.env.VAPID_PRIVATE_KEY
   );
   
   // Endpoint to send notifications
   app.post('/api/send-notification', (req, res) => {
     const { subscription, title, body } = req.body;
     const payload = JSON.stringify({ title, body });
   
     webpush.sendNotification(subscription, payload)
       .then(() => res.status(200).json({ message: 'Notification sent successfully' }))
       .catch(err => {
         console.error('Error sending notification', err);
         res.status(500).json({ error: 'Failed to send notification' });
       });
   });
   
   // Endpoint to save subscriptions
   app.post('/api/subscribe', (req, res) => {
     const subscription = req.body;
     // Save subscription to your database (e.g., MongoDB, PostgreSQL)
     res.status(201).json({ message: 'Subscription saved' });
   });
   
   app.listen(3000, () => console.log('Backend running on port 3000'));
   

Android Devices #

• Supported Browsers: Chrome, Firefox, Edge, Brave (all modern versions).
• Functionality: Notifications work even when the browser is closed (as long as the device is online). No need for PWA installation, though it’s recommended for a better user experience.
• Requirement: Your app must be served over HTTPS (localhost is exempt for development).

iPhone/iOS #

• Supported: iOS 16.4+ and macOS 13.4+ (Safari browser only).
• Key Requirements:
  • The web app must be added to the home screen as a PWA (requires a valid manifest.json with display: standalone or fullscreen).
  • Users must explicitly allow notifications for the PWA (iOS asks for permission when the app is added to the home screen).
• Functionality: Notifications are delivered even when Safari is closed, but the device must have an active internet connection.

Browser Compatibility Summary #

• Subscription Management: Handle subscription updates (e.g., when a user clears browser data) and unsubscribe requests to avoid sending notifications to invalid endpoints.
• Payload Size: Push message payloads are limited to ~4KB, so keep notification content concise.
• Testing: Use browser dev tools (Chrome’s Application tab) to test service workers and push notifications during development.

内容的提问来源于stack exchange，提问作者HelloWorld