跳到内容

iPhone 和 iPad 上的 Web 推送

使用 iOS 和 iPadOS 16.4 或更高版本的 iPhone 和 iPad 用户,在将您的网站添加到主屏幕后,即可接收来自该网站的 Web 推送通知。

iPhone 和 iPad 上的 Web 推送何时生效

Anchor link to

iOS 和 iPadOS 上的 Web 推送仅适用于从主屏幕图标打开的网站。在普通的 Safari 标签页中,浏览器完全不提供推送功能,因此 Web SDK 会在不启用推送的情况下初始化,访问者无法订阅。

要接收通知,用户需要:

  • 一台运行 iOS 或 iPadOS 16.4 或更高版本的 iPhone 或 iPad。
  • 已将您的网站添加到主屏幕,并从该图标打开。
  • 在点击您网站上的元素后允许通知。

您的网站需要什么

Anchor link to

按照与桌面浏览器相同的方式集成 Web SDK,然后添加 Web 应用清单(manifest):

  1. 按照 Web push SDK 3.0 集成 SDK 和 Service Worker。如果您的网站已有自己的 Service Worker,请按照渐进式 Web 应用支持操作。

  2. 添加一个 Web 应用清单,将 display 设置为 standalone 或 fullscreen,并在每个页面中链接该清单:

    manifest.json
    {
    "name": "Example Store",
    "short_name": "Store",
    "start_url": "/",
    "display": "standalone",
    "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
    ]
    }
    <link rel="manifest" href="/manifest.json">
  3. 在用户点击时请求通知权限。iOS 和 iPadOS 仅在响应用户的直接操作时才会显示权限对话框,因此请使用订阅小组件或调用 Pushwoosh.subscribe() 的按钮:

    <button onclick="Pushwoosh.subscribe()">Get notifications</button>

如何在 Pushwoosh 中找到 iPhone 和 iPad 订阅者

Anchor link to

Pushwoosh 会将 iPhone 和 iPad Web 订阅者注册在 Chrome 平台下,因此统计数据不会单独显示他们,也没有任何默认标签能够可靠地识别此类设备。

要定位这些订阅者,请从网站设置您自己的标签:

  1. 在网站发送标签之前,先在 Control Panel 中创建自定义标签,例如一个名为 Web App Platform 的 String 标签。取消勾选默认选中的用户特定复选框。这样会创建一个按设备存储的通用标签。

    如果跳过此步骤,setTags 会自动将该标签创建为用户特定标签。其值由具有相同 User ID 的所有设备共享,因此一旦网站调用 registerUser,该用户的桌面浏览器也会获得 ios 值,并收到您通过此标签定位到 iPhone 和 iPad 订阅者的消息。

  2. 当网站在 iPhone 或 iPad 上从主屏幕运行时设置该标签:

    Pushwoosh.push((api) => {
    // iPadOS Safari reports a Mac user agent, so a touch screen marks an iPad
    const isIos = /iPhone|iPad/.test(navigator.userAgent)
    || (/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1);
    const isIosHomeScreen = isIos && (window.navigator.standalone === true
    || window.matchMedia('(display-mode: standalone)').matches);
    if (isIosHomeScreen) {
    api.setTags({ 'Web App Platform': 'ios' });
    }
    });
  3. 使用一台测试 iPhone 或 iPad 进行订阅。

  4. 在用户探索器中检查该设备上的标签值。即使 Pushwoosh 没有保存该值(例如账户关闭了标签自动创建),setTags 也会返回成功,因此仅凭代码无法确认值已保存。

  5. 基于此标签构建细分,仅向 iPhone 和 iPad 订阅者发送消息。