如何向Azure托管的渐进式Web应用（PWA）推送通知？

完全可以通过FCM向Azure托管的PWA推送通知，FCM并不强制要求Web应用必须托管在Firebase平台，只要你的PWA满足Web推送的基础条件（比如处于HTTPS环境，Azure托管默认支持HTTPS），就能正常集成FCM实现推送功能。

具体实现步骤： #

• 在Firebase控制台创建项目，为Web应用添加配置（无需将应用托管到Firebase，只需要获取项目的firebaseConfig配置信息即可）
• 在Azure托管的PWA中集成FCM SDK，完成以下操作：
  1. 引入FCM SDK并初始化：

     import { initializeApp } from "firebase/app";
     import { getMessaging, getToken } from "firebase/messaging";
     
     const firebaseConfig = {
       // 你的Firebase项目配置
     };
     
     const app = initializeApp(firebaseConfig);
     const messaging = getMessaging(app);
     

  2. 请求用户的通知权限，成功后获取设备令牌：

     async function requestPermissionAndGetToken() {
       const permission = await Notification.requestPermission();
       if (permission === "granted") {
         const token = await getToken(messaging, { vapidKey: "你的VAPID密钥" });
         // 将token发送到你的后端服务存储
         console.log("设备令牌：", token);
       }
     }
     

  3. 编写Service Worker监听推送事件，处理通知展示：

     // service-worker.js
     import { onBackgroundMessage } from "firebase/messaging/sw";
     
     onBackgroundMessage(messaging, (payload) => {
       console.log("收到后台推送：", payload);
       const notificationTitle = payload.notification.title;
       const notificationOptions = {
         body: payload.notification.body,
         icon: "/icon.png"
       };
     
       self.registration.showNotification(notificationTitle, notificationOptions);
     });
     

• 后端服务（可以是Azure Functions、App Service等）调用FCM的API，传入存储的设备令牌即可发送推送通知，比如通过HTTP POST请求调用FCM的发送接口，或者使用FCM的服务器SDK。

关键说明： #

设备令牌是前端在用户授权后通过FCM SDK生成的，和应用的托管平台完全无关。只要你的PWA能正常访问FCM的服务（网络环境允许），就能获取到令牌，之后将令牌同步到你的后端，后端就可以通过FCM向该设备推送通知。

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