能否通过服务器参数为PWA的showNotification方法添加自定义标题、内容？

当然可以实现！你只需要在服务器端推送消息时把自定义的标题、内容等数据打包进推送 payload，然后在前端的 Service Worker 里解析这些数据，传给 showNotification 方法就行。下面是具体的实现步骤：

1. 服务器端：推送时携带文章相关的自定义数据 #

当你发布新文章时，调用 Firebase Cloud Messaging（FCM）的 API 发送推送，把文章标题、内容等信息放进推送的 data 字段里（推荐用 data 字段，能确保 Service Worker 可以接收并处理这些数据，避免浏览器直接显示默认通知）。

举个 Node.js 端的示例：

const admin = require('firebase-admin');

// 发布新文章时触发推送的函数
function sendArticlePushNotification(userToken, articleTitle, articleContent) {
  const message = {
    token: userToken, // 你存储的目标用户令牌
    data: {
      title: articleTitle,
      body: articleContent,
      icon: 'images/icon.png',
      tag: 'new-article-tag'
    }
  };

  admin.messaging().send(message)
    .then((response) => {
      console.log('文章推送发送成功:', response);
    })
    .catch((error) => {
      console.log('文章推送发送失败:', error);
    });
}

2. 前端 Service Worker：解析数据并显示自定义通知 #

修改你现有的 Service Worker 代码，从推送事件中提取服务器传来的自定义数据，替换原来固定的标题和内容：

self.addEventListener('push', function(event) {
  // 解析服务器传来的 payload 数据
  const payload = event.data ? event.data.json() : {};
  
  // 提取自定义信息，同时设置默认值防止数据为空
  const notificationTitle = payload.title || '新文章通知';
  const notificationOptions = {
    body: payload.body || '有一篇新文章发布啦！',
    icon: payload.icon || 'images/icon.png',
    tag: payload.tag || 'article-notification'
  };

  // 显示通知，用 waitUntil 确保 Service Worker 存活到通知显示完成
  event.waitUntil(
    self.registration.showNotification(notificationTitle, notificationOptions)
  );
});

额外优化：处理通知点击事件 #

如果需要用户点击通知后跳转到对应的文章页面，可以在 Service Worker 里添加 notificationclick 监听器：

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  // 假设你在 payload 里还传了文章的链接
  event.waitUntil(
    clients.openWindow(payload.articleUrl || '/')
  );
});

这样一来，每次发布新文章时，服务器就会把对应的文章标题和内容推送给目标用户，前端 Service Worker 接收后就会显示完全自定义的通知啦！

内容的提问来源于stack exchange，提问作者s-leg3ndz