如何在iOS设备实现Web Push通知的动态图标？

问题说明 #

在iOS设备上实现PWA的Web Push通知时，调用showNotification传入的动态图标会被manifest.json中指定的图标替换，无法实现基于API实时数据显示动态图标的需求。

问题原因 #

iOS Safari（含PWA主屏幕模式）的Web Push通知存在设计限制：当应用被添加到主屏幕后，通知会强制使用manifest.json中配置的图标，忽略showNotification参数里的icon值，这是苹果的规范约束导致的。

可行解决方案/变通方法 #

1. 严格符合iOS图标要求 #

先确保动态图标满足iOS的显示标准，部分场景下可触发动态图标生效：

• 图标必须为正方形，建议尺寸128x128或256x256（iOS会自动缩放适配）
• 图标背景需为透明（iOS会自动添加圆角和阴影，非透明背景会导致显示异常）
• 图标路径使用绝对URL（避免相对路径加载失败，例如https://your-domain.com/dynamic-icon.png）

2. 尝试使用image字段补充 #

在通知配置中同时设置icon和image字段，iOS可能优先显示image作为通知大图标：

registration.showNotification(obj.title, {
  lang: 'en-US',
  body: obj.desc,
  icon: obj.icon, // 小图标，可能被manifest覆盖
  image: obj.icon // 大图标，iOS可能优先渲染该字段
})

3. 会话内动态更新manifest图标（临时生效） #

如果用户当前处于应用活跃会话中，可以动态修改manifest的图标配置，仅当前会话有效：

async function updateManifestIcon(newIconUrl) {
  const registration = await navigator.serviceWorker.ready;
  // 获取原manifest内容
  const manifest = await fetch('/manifest.json').then(res => res.json());
  // 替换图标配置
  manifest.icons = [{ src: newIconUrl, sizes: '128x128', type: 'image/png' }];
  // 生成临时manifest URL并重新注册Service Worker
  const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
  const newManifestUrl = URL.createObjectURL(blob);
  await navigator.serviceWorker.register('/service-worker.js', {
    scope: '/',
    manifest: newManifestUrl
  });
}

注意：关闭应用后会恢复原manifest图标，仅适用于临时动态切换场景。

4. 变通方案：使用通知操作按钮图标 #

如果必须显示动态图标，可以将其放在通知的操作按钮上，iOS会正常渲染按钮图标：

registration.showNotification(obj.title, {
  lang: 'en-US',
  body: obj.desc,
  actions: [
    {
      action: 'view',
      title: '查看详情',
      icon: obj.icon // 此处图标会显示在按钮上
    }
  ]
})

现有代码整理 #

前端脚本 #

async function run() {
  console.log('run called');
  if ('serviceWorker' in navigator) {
    console.log('Service Worker supported');

    const button = document.getElementById("subscribe");
    button.addEventListener("click", async () => {
      const result = await window.Notification.requestPermission();
      console.log(result);
      if (result === "granted") {
        navigator.serviceWorker.register("service-worker.js")
          .then((registration) => {
            console.log(registration);
            var url = '(api_call)';
            fetch(url)
              .then(r => r.json().then(data => ({ status: r.status, body: data })))
              .then(obj1 => {
                if (obj1.body != null) {
                  var obj = obj1.body;
                  registration.showNotification(obj.title, {
                    lang: 'en-US',
                    body: obj.desc,
                    icon: obj.icon,
                  }).then((output) => {
                    console.log('notified', output);
                  }).catch((error) => {
                    console.log('showNotification error', error);
                  })
                } else {
                  console.log('no data', obj1.body);
                }
              });
          })
          .catch((error) => {
            console.log('service worker registration failed', error);
          });
      } else {
        console.log('Notification permission denied');
        alert('Please enable notifications');
      }
    });
  } else {
    console.warn('Service Worker not supported');
  }
}

run();

manifest.json #

{
  "name": "TestNotification",
  "short_name": "Notification",
  "display": "browser",
  "background_color": "#ffffff",
  "theme_color": "#db4938",
  "icons": [
    {
      "src": "test1.png",
      "sizes": "48x48",
      "type": "image/png"
    }
  ]
}

service-worker.js #

self.addEventListener('notificationclick', function (event) {
  event.notification.close(); // Close the notification
  event.waitUntil(clients.openWindow(event.notification.data.url));
});

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