FAQ
最新更新:2023-03-02

哪些平台支持 WebPush?

按操作系统分类的浏览器支持

Browser Windows PC macOS Android iOS (iPhone, iPad)
Chrome Yes Yes Yes NO
Firefox Yes Yes Yes NO
Safari No Yes No Yes
Microsoft Edge Yes Yes No NO
Opera Yes Yes Yes NO

注 1:Microsoft Edge(2019 年更新)、Opera、三星浏览器、Yandex 和 UC 浏览器等都是基于 Chromium 的浏览器。
注 2:Internet Explorer 不再接受功能更新。微软已将浏览器开发转向 Edge 平台。
注 3:隐身模式、私人浏览模式和访客浏览器模式不支持网络推送。

按浏览器版本支持

Browser Windows PC macOS Android iOS (iPhone, iPad)
Chrome Chrome 42+. Chrome 42+. Chrome 105+. /
Firefox Firefox v44+ Firefox v44+ Firefox v104+ /
Apple Safari / Safari V11.1+ / macOS 上的 Safari 10+
iOS 和 iPadOS 16.4+ 上的 Safari 16.4+
Opera Opera v29+ Opera v29+ Opera mobile v64+ /
Microsoft Edge Edge v17+ Edge v17+ / /

Safari 浏览器的 Web 推送通知相关问题

Safari 浏览器上的 Web 推送通知支持 macOS(V11.1+)以及 iOS / iPadOS 16.4+。

Safari 推送支持哪些功能特征?

功能 macOS (15-) macOS (16+) iOS/iPadOS 16.4+
图片
操作按钮
启动 URL
自定义站点图标

iOS 和 iPadOS 上的用户如何收到 Safari 网络推送通知?

1. 为了让用户订阅并接收移动 Safari Web 推送通知,他们必须将 Web 应用添加到主屏幕

发送移动 Safari Web 推送通知(适用于 iOS 和 iPadOS 16.4+)需要通知接收者执行以下操作:

  • 在 16.4+ 的移动 Apple 设备上使用 Safari 浏览器访问您的网站。
  • 点击移动设备上 Safari 浏览器的分享按钮。
  • 点击“添加到主屏幕”选项。
  • 保存设备上的应用程序。
  • 从主屏幕打开应用程序。
  • 订阅通知(在显示原生权限提示之前,他们必须点击订阅按钮)。 这些步骤是接收移动 Web 推送通知所必需的。 由于这个交互体验对于终端用户来说是比较复杂的,因此您需要帮助您的终端用户了解订阅通知的好处。

2. 在您的网站上添加横幅通知引导用户将应用“添加到主屏幕”

可以在您的网站上添加横幅,以告知您的终端用户移动 Web 推送通知的价值以及如何教他们如何订阅。
我们建议在您的网站上添加横幅,该横幅在移动 Apple 设备上显示,引导访问者点击分享按钮和“添加到主屏幕”选项。
还有一个热门的开源项目可以帮助您为用户提供这些指引:
底部横幅示例 Github 链接:https://github.com/rajatsehgal/add-to-home-screen

如果关闭浏览器,用户能收到通知吗?

  • 走 engagelab 通道时,需要打开网站时才可以收到通知。
  • 走系统通道时,可以在关闭浏览器时收到通知,其中不同平台上的行为不同,详情参见下表:
浏览器 Windows macOS
Chrome 是,需浏览器进程在后台 是,需浏览器进程在后台
Firefox 是,需浏览器进程在后台 是,需浏览器进程在后台
Safari /
Opera 是,需浏览器进程在后台 是,需浏览器进程在后台
Microsoft Edge 是,需浏览器进程在后台 是,需浏览器进程在后台

在 Windows 上,所有窗口都关闭,浏览器若仍在后台运行,即可以收到系统通知,若浏览器进程已经被关闭,则不会收到系统通知。
在 Mac OS X 上,即使所有窗口都被关闭,大部分浏览器进程仍会在后台运行,即可以收到系统通知,若浏览器进程被强制退出,则不会收到系统通知。Safari 无需运行即可接收通知,因为它们会直接发送到操作系统,用户需要先注册 Safari 通知,后续即使 Safari 完全关闭也能收到通知。

通知授权提示相关问题

在用户关闭网页推送提示后,何时再次显示提示?

如果用户在原生权限提示上点击"Block"(Chrome)、"Don't Allow"(Safari)或"Never Allow"(Firefox),则该网站将无法再次向他们发送提示,除非用户通过浏览器设置进行多步骤操作来订阅或重置权限。这就是为什么建议使用 EngageLab 提示(前往设置)的原因。

原生权限提示

Web 推送订阅需要本机浏览器权限提示,并且原生权限提示不可自定义。它使用用户浏览器设置中设置的语言。只有 HTTPS 网站可以显示本机浏览器原生提示。

Chrome :您有 3 次机会让用户订阅,当用户在原生权限提示上点击第 3 次“X”后,用户将在一周内不再收到提示。有关这个 Chrome 功能的更多信息,请参阅此处
Firefox :从 Firefox 70 开始,当用户点击“关闭”按钮后,他们需要点击浏览器中的小通知图标才能再次收到提示。此外,对于 Firefox 72+,原生浏览器提示已被阻止显示,有关详细信息,请参阅此处
Safari :跟firefox一样,添加了一个更安静的 UI,用于提示通常拒绝权限的用户,并自动提示被拒绝推送的网站,Safari 12.1+

EngageLab软提示

因为原生弹窗只有一次机会,如果被用户拒绝了,网站将无法再次向用户获取授权,因此EngageLab推荐您使用「软提示」的方式来获得用户授权:
如果用户在 EngageLab 提示 (前往设置Guide to apply)上点击“允许”或“取消”,并且仍未通过原生提示弹窗订阅, EngageLab 提示 可以再次弹出。

  • 用户在EngageLab 提示上点击"允许Allow"后,原生弹窗会被调出,但若用户此时在原生提示上点击"取消",用户下次进入网站时EngageLab 提示仍然会弹窗询问用户是否允许授权该网站通知。
  • 用户在EngageLab 提示上点击"允许Allow"后,原生弹窗会被调出,若用户此时在原生提示上点击“允许”,用户就授权了该网站进行web通知的权限;若用户此时在原生提示上点击“拒绝”,网站将无法再次向用户获得授权。
  • 用户在EngageLab 提示上点击“取消”时,则可以判断为用户此时没有接收该网站通知的意愿,如果此时询问用户是否接收网站通知消息很可能被拒绝,所以我们此时不会调出原生弹窗,待下次用户访问的时候可再次通过EngageLab 提示询问用户接收通知的意愿。

通知收不到排查方式

1. 检查网页通知栏权限开启情况
image.png
2. 检查浏览器应用通知权限开启情况
Windows 通知设置:

  • 关闭焦点辅助,详情参考 微软官方文档
  • 检查设置>通知和操作> 打开从应用程序和其他发件人获取通知。确保您的站点和浏览器也已启用。本文中的更多詳細信息参考 微软官方文档



macOS 通知设置:

  • 在“系统偏好设置”>“通知”>“Chrome”或所选浏览器中,确保“允许通知”已打开。
  • 在“系统偏好设置”>“通知”>“焦点”>“请勿打扰和睡眠”中,确保此模式未打开或您在允许通知的时间内。
  • macOS 在右上角菜单 > 向上滚动中也有临时的“请勿打扰”通知设置。


3. 浏览器厂商不稳定,切换 Engagelab 通道优先下发
image.png

{ "from":"web_push", "to":{ "registration_id":[ "xxx" ] }, "body":{ "platform":"web", "notification":{ "web":{ "title":"web_push", "alert":"Hi,MTPush !", "url":"http://www.google.com", "extras":{ "web-key1":"web-value1" } } }, "options":{ "time_to_live":30, "third_party_channel":{ "w3push":{ "distribution":"mtpush" } } }, "request_id":"12345678", "custom_args":"business info" } }
          {
    "from":"web_push",
    "to":{
        "registration_id":[
            "xxx"
        ]
    },
    "body":{
        "platform":"web",
        "notification":{
            "web":{
                "title":"web_push",
                "alert":"Hi,MTPush !",
                "url":"http://www.google.com",
                "extras":{
                    "web-key1":"web-value1"
                }
            }
        },
        "options":{
            "time_to_live":30,
            "third_party_channel":{
                "w3push":{
                    "distribution":"mtpush"
                }
            }
        },
        "request_id":"12345678",
        "custom_args":"business info"
    }
}

        
此代码块在浮窗中显示

safari 浏览器无法弹出通知?

第一步:请检查 Safari 浏览器权限,注意允许开关是否开启,正常情况如图:
9004867709_96109683317_0631CB28-AA8C-4DAE-9E31-64DFAD260D96.png
第二步:点击检查推送服务状态与浏览器通知权限,正常情况如图:
image.png
第三步:点击 Safari 浏览器 - 偏好设置
image.png
点击网站-点击通知,查看通知中心网站是否允许,正常情况如图:
9004867709_96109614465_4CFFC6A4-8426-4B27-8EB1-6DDC4DB66B3E.png

特别注意: 1、点击停止推送,将会收不到极光推送消息,需要刷新页面 2、一个域名配置了多个 html 页面,请不要移除通知中心的网站权限,移除后 html 页面都将收不到通知(需用户找到主页面,重新获取网站通知权限)

如果同一个用户同时使用多个浏览器,给该用户下发一条消息,用户设备会如何展示?

如果选择是下发策略是系统通道优先,则这条消息只会通过该用户最近一次使用的浏览器厂商通道下发。如果选择仅通过极光通道下发,则会下发多条。

如果用户清除浏览器缓存和 Cookie了,还能接收到这个网站的WebPush吗?

用户在线的时候,极光通道仍然可以收到推送。
对于浏览器厂商通道来说,当用户清除浏览器的 Cookie 和缓存时,他们将取消订阅通知。这是因为订阅用户数据存储在浏览器的 IndexedDB 存储中。移除该数据会使浏览器“忘记”订阅者。但是清除这些数据并不会移除用户已经授权在该浏览器中接收通知的权限,这个时候需要进行初始化SDK的操作,让用户在返回网站时自动重新订阅。
但如果用户将浏览器的通知权限更改为“询问”或“阻止”,他们将不会被自动重新订阅。
如果用户从浏览器的通知设置中清除通知,他们也不会被自动重新订阅。

各浏览器清除通知的方式:

  • Chrome:chrome://settings/content/notifications


  • Firefox:about:preferences#privacy > 权限 > 通知


  • Safari:首选项 > 网站 > 通知 > 删除


当用户重新订阅时,他们将获得一个新的Registration ID 记录。您可以使用window.MTpushInterface.getRegistrationID() 来获得rid。

同一时间给同一个用户发送多条消息,消息都会展示吗?

不同推送通道消息展示机制会有所差别:
EngageLab通道:无覆盖机制,同一时间给同一用户发送多条消息,多条消息会同时展示给用户。通知中心会保留多条消息,除最近一条消息,其他消息会折叠。
safari:无覆盖机制,同一时间给同一用户发送多条消息,多条消息会同时展示给用户。通知中心会保留多条消息,除最近一条消息,其他消息会折叠。
Chrome:有覆盖机制,同一时间给同一用户发送多条消息,每个通知将被更新的通知替换,仅会展示最后一条发出的消息。
edge:有覆盖机制,同一时间给同一用户发送多条消息,每个通知将被更新的通知替换,仅会展示最后一条发出的消息。
firefox:有覆盖机制,同一时间给同一用户发送多条消息,每个通知将被更新的通知替换,仅会展示最后一条发出的消息。

EngageLab WebPush支持更换域名吗?

浏览器已经以一种将订阅者绑定到特定源(域名/网站URL)的方式设置了Web Push。
出于安全原因和浏览器的同源策略,浏览器不允许将订阅者移动到其他源。这不是EngageLab的限制,任何声称可以将订阅者从一个网站移动到另一个网站的服务商,请务必确认他们正在订阅的是您的网站。
如果您更改了网站,最好的解决方案是为新网站设置一个新的WebPush应用,并让您的用户在此新应用下订阅网站,您无法将订阅者从一个源导入到另一个源。
您可以继续向旧网站(旧WebPush应用)的订阅者发送推送通知,但您的用户需要重新订阅新网站才能从新域名接收推送。迁移的推荐步骤如下:

  • 为新站点域名设置一个新的WebPush应用。
  • 使用旧站点域名继续从旧WebPush应用发送推送。在通知的“启动URL”中,使用新站点域名。
  • 在2周到2个月之后(具体取决于您每天发送多少通知以及在新网站上获得多少订阅者),您可以停止使用旧的WebPush应用,仅使用新的WebPush应用。
  • 如果您从旧的WebPush应用和新的WebPush应用发送相同的消息,那么在两者之下的订阅者将收到重复的消息。这就是为什么我们建议遵循这些时间框架。
  • 您可以发送几条“我们已经搬迁,点击这里访问我们的新网站并重新订阅以保持更新”的消息。这将有助于提醒用户,如果他们不返回重新订阅,可能无法从您的网站收到推送。建议在搬迁开始时和从应用发送的最后一条消息时发送此类通知。
  • 不幸的是,所有网站和用户群都有所不同。请做好短期内可能会失去订阅者的准备。
    在执行上述迁移步骤时,请务必注意用户体验,以免给用户带来不便。

EngageLab WebPush支持PWA推送吗?

1.什么是PWA?

PWA推送是指在渐进式Web应用程序(Progressive Web App,简称PWA)中使用Web Push技术向用户推送通知的过程。PWA是一种使用Web技术构建的应用程序,具有类似原生应用程序的功能和用户体验,同时可以通过浏览器进行访问,无需安装。
PWA推送是通过浏览器提供的Web Push技术实现的。Web Push技术使得Web应用程序可以像原生应用程序一样发送推送通知,即使应用程序不在活动状态或完全关闭。
与传统的应用程序不同,PWA不需要从应用商店下载和安装,可以通过URL在浏览器中直接访问。同时,PWA推送可以向用户提供及时的消息提醒,增强用户体验和参与度。
总之,PWA推送是一种使用Web Push技术向渐进式Web应用程序用户发送通知的方法,可以提高用户参与度和互动性,为Web应用程序提供更接近原生应用程序的用户体验。

2.EngageLab WebPush支持PWA推送吗?

EngageLab WebPush服务支持PWA推送,您需要使用EngageLab WebPush提供的Web SDK将Web Push功能集成到您的PWA应用程序中,并按照文档中提供的示例代码来注册Service Worker并初始化Web Push功能。一旦集成完成,您就可以使用EngageLab WebPush的API来向您的PWA应用程序用户发送推送通知了。

注:websdk支持PWA的两个必要条件:
1程序运行在在浏览器中,且浏览器支持w3c notifications;2.有一个具体的域名,且是https协议

为什么不同浏览器,regid 会相同?

答:同一个应用配置的集成域名,同一个用户 userStr,就会生成同一个 rid,与是否同一个浏览器无关 检查是否是同一个用户的方法如下:查看 html 源码,找到初始化函数查看。 image.png

关于 user_str 用户唯一标识 说明

  1. 初始化时必须填写唯一的字串用来生成唯一的 UID,该 UID 是推送的身份识别码,与设备无关。
  2. 当用户使用同一 user_str 会被识别为同一用户,在不同浏览器或设备上订阅,会被替换为最 新订阅信息作为消息发送。例如 用户 A 先后在浏览器 a1 a2 a3 用同一 user_str 订阅,理论上只有最 后订阅的 a3 能收到消息,防止同一用户收到多条消息及消息多发。后台对同一 UID 永远只保存最新订阅 信息。
  3. 消息订阅可以被取消,SDK 有提供取消订阅接口。该取消订阅接口,只会取消 UID 与订阅信息的绑定关系,不会修改浏览器的通知权限。
  4. 理论上 user_str 应与实际用户一一对应,在某些特定情况,用户可能是访客模式,开发者需要显式根据自身实际情况生成唯一的 user_str, SDK 不会自动做默认处理,避免开发者在未处理好 user_str 与用户实际关系时,流程上未出现报错,导致统计数据与预期情况不符。当用户是 以访客模式时,开发者可以参考以下函数生成唯一 user_str,该函数以用户浏览器为维度作为唯一身份识别码,注意该处理方式会导致, 同一用户换浏览器,换设备或清除缓存时,会重新生成新 user_str。 示例函数
    function randomUid() { const keyStr = 'mtWebPushRandomUid'; let uid = window.localStorage.getItem(keyStr); if (!uid) { uid = new Date().getTime().toString(36) + Math.floor(Math.random() * 10000000).toString(36); window.localStorage.setItem(keyStr, uid); } return uid; } var user_str = randomUid();
              function randomUid() {
     const keyStr = 'mtWebPushRandomUid';
     let uid = window.localStorage.getItem(keyStr);
     if (!uid) {
         uid = new Date().getTime().toString(36) + Math.floor(Math.random() * 10000000).toString(36);
         window.localStorage.setItem(keyStr, uid);
     }
     return uid;
    }
    var user_str = randomUid();
    
            
    此代码块在浮窗中显示
在文档中心打开