iOS端PWA推送通知交互按钮不显示，求可行替代方案

方案1：点击通知跳转至决策页面（最可靠） #

由于iOS PWA不支持通知操作按钮，最直接的替代方式是将用户引导至应用内的决策页面，在页面中提供Yes/No交互选项。

修改后端推送Payload

移除actions字段，调整通知文案引导用户点击进入操作页面：

use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;
$webPush = new WebPush($auth);

$payload = json_encode([
    'title' => 'Booking Reminder',
    'body' => '点击进入确认是否要预订',
    'icon' => 'at.png',
    'url' => '[你的决策页面URL]' // 直接指向带Yes/No按钮的页面
]);
$webPush->queueNotification($subscription, $payload);

修改Service Worker逻辑

点击通知时直接打开决策页面：

self.addEventListener('notificationclick', function (event) {
  event.notification.close();
  const targetUrl = event.notification.data?.url || '[默认决策页面URL]';
  
  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true }).then(windowClients => {
      for (const client of windowClients) {
        if (client.url === targetUrl && 'focus' in client) {
          return client.focus();
        }
      }
      if (clients.openWindow) {
        return clients.openWindow(targetUrl);
      }
    })
  );
});

方案2：利用本地通知补充（有限制） #

iOS允许PWA在前台时创建带有操作按钮的本地通知，但后台静默通知触发本地通知的权限受限（需要用户频繁互动，否则系统会限制）。如果你的应用经常在用户前台运行，可以尝试：

1. 发送静默推送（无标题/内容），Service Worker接收后触发本地通知
2. 本地通知可添加操作按钮，但仅当应用处于活跃状态或最近被使用时才能正常显示

示例Service Worker代码：

self.addEventListener('push', function(event) {
  const payload = event.data?.json() || {};
  
  // 仅在支持本地通知操作的环境下触发
  if ('Notification' in window && Notification.prototype.hasOwnProperty('actions')) {
    const options = {
      body: 'Do you want to book now?',
      icon: 'at.png',
      actions: [
        {action: 'yes', title: 'Yes', icon: 'yes.png'},
        {action: 'no', title: 'No', icon: 'no.png'}
      ]
    };
    event.waitUntil(self.registration.showNotification(payload.title, options));
  } else {
    //  fallback到方案1，打开决策页面
    const targetUrl = payload.url || '[默认决策页面URL]';
    event.waitUntil(clients.openWindow(targetUrl));
  }
});

注意事项 #

• iOS仅支持独立模式（添加到主屏幕）的PWA接收推送通知，需确保用户已将应用添加到主屏幕并启用通知权限
• 后台静默推送的触发频率受iOS系统限制，无法保证100%触发本地通知

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