FCM Chrome通知样式求助：如何实现Demo中的大图通知效果

嘿，我帮你搞定这个FCM大图通知的问题！你现在用的是默认通知样式，所以没法展示大图——FCM默认不会自动处理带图片的自定义通知，得在Service Worker里手动接管消息处理才行。

核心思路 #

要实现类似示例页面的大图通知，你需要：

1. 在推送消息的payload中包含图片地址
2. 在firebase-messaging-sw.js中监听后台消息事件，手动构建并展示带图片的通知

修改后的Service Worker代码 #

下面是调整后的完整代码，你可以直接替换现有内容（记得补上你的Firebase配置）：

importScripts("https://www.gstatic.com/firebasejs/4.13.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/4.13.0/firebase-messaging.js");

// 替换成你的Firebase配置
var config = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  messagingSenderId: "YOUR_SENDER_ID"
};
firebase.initializeApp(config);

const messaging = firebase.messaging();

// 监听后台推送消息，手动构建通知
messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] 收到后台消息 ', payload);
  
  // 从消息payload中提取通知内容
  const notificationTitle = payload.notification?.title || '通知标题';
  const notificationOptions = {
    body: payload.notification?.body || '通知内容',
    // 关键：设置大图地址，支持从notification字段或data字段读取
    image: payload.notification?.image || payload.data?.imageUrl,
    // 可选：设置通知小图标
    icon: '/path/to/your/notification-icon.png',
    // 存储点击通知后的跳转链接（可选）
    data: {
      clickUrl: payload.data?.clickUrl || '/'
    }
  };

  // 展示自定义通知
  return self.registration.showNotification(notificationTitle, notificationOptions);
});

// 可选：处理通知点击事件，跳转到指定页面
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  // 打开预设的链接
  event.waitUntil(
    clients.openWindow(event.notification.data.clickUrl)
  );
});

关键注意事项 #

• 图片要求：图片必须是HTTPS协议，且与你的网站同源（或配置了CORS允许跨域访问），否则浏览器会拒绝加载
• 消息payload配置：
  • 如果用Firebase控制台发测试消息，要在「Advanced options」里添加notification.image字段，填入图片URL
  • 如果是后端接口推送，可以把图片地址放在notification.image或者自定义的data.imageUrl字段中
• 浏览器兼容性：确保用户使用的是支持Notification API的现代浏览器（Chrome、Firefox、Edge等主流浏览器都支持）
• Service Worker注册：确认你的Service Worker已经正确注册，没有加载错误

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