解决WebView中集成的第三方Web应用推送通知接收问题

核心问题分析 #

第三方Web应用的推送通知依赖浏览器生态的Push API和Service Worker，但WebView（无论Android还是iOS）默认对这类API的支持存在限制，尤其是跨域/iframe场景下的权限隔离、Service Worker生命周期管理问题，导致Chrome的推送方案无法直接复用。

Android端实现步骤 #

1. 启用WebView的基础支持 #

首先确保WebView开启JavaScript、DOM存储、第三方Cookie及Service Worker支持，这是推送API运行的基础：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setAllowThirdPartyCookies(true);

// Android 7.0+ 启用Service Worker
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
    webSettings.setServiceWorkerEnabled(true);
}

2. 拦截Web Push订阅请求 #

通过注入JavaScript拦截PushManager.subscribe()调用，将订阅所需的applicationServerKey、userVisibleOnly等参数传递给原生应用，由原生统一管理推送通道：

// 注入到WebView的JS代码
navigator.serviceWorker.register('/sw.js').then(registration => {
    const originalSubscribe = registration.pushManager.subscribe.bind(registration.pushManager);
    registration.pushManager.subscribe = function(options) {
        // 将订阅参数发送给原生
        window.android.receivePushSubscriptionOptions(JSON.stringify(options));
        // 返回模拟的订阅对象（或根据原生返回的endpoint构造）
        return Promise.resolve({
            endpoint: 'native-push-endpoint',
            unsubscribe: () => Promise.resolve(true)
        });
    };
});

原生端通过addJavascriptInterface接收参数，后续用FCM完成订阅和推送接收。

3. 原生推送集成 #

使用Firebase Cloud Messaging（FCM）作为推送中转层：

• 原生应用集成FCM，获取设备令牌
• 后端接收第三方Web应用的推送通知请求，将内容转为FCM格式，推送到对应设备
• 原生收到FCM通知后，系统级展示通知，点击时打开目标WebView页面并加载对应应用

iOS端实现步骤 #

1. 配置WKWebView的权限与Service Worker #

iOS 14.0+开始支持WebView中的Service Worker，需在WKWebViewConfiguration中开启相关配置：

let configuration = WKWebViewConfiguration()
configuration.websiteDataStore = WKWebsiteDataStore.default()
configuration.preferences.javaScriptEnabled = true
configuration.preferences.javaScriptCanOpenWindowsAutomatically = true

// iOS 14.0+ 允许Service Worker注册
if #available(iOS 14.0, *) {
    configuration.defaultWebpagePreferences.allowsContentJavaScript = true
    configuration.serviceWorkerRegistrationHandler = { registration, completion in
        completion(.allow)
    }
}

let webView = WKWebView(frame: view.bounds, configuration: configuration)

2. 拦截Web Push订阅 #

通过WKUserScript注入JS代码，拦截PushManager的订阅请求，将参数传递给原生：

let scriptSource = """
navigator.serviceWorker.register('/sw.js').then(registration => {
    const originalSubscribe = registration.pushManager.subscribe.bind(registration.pushManager);
    registration.pushManager.subscribe = function(options) {
        window.webkit.messageHandlers.pushSubscription.postMessage(options);
        return Promise.resolve({
            endpoint: 'native-apns-endpoint',
            unsubscribe: () => Promise.resolve(true)
        });
    };
});
"""
let userScript = WKUserScript(source: scriptSource, injectionTime: .atDocumentStart, forMainFrameOnly: false)
configuration.userContentController.addUserScript(userScript)
// 接收JS传递的参数
configuration.userContentController.add(self, name: "pushSubscription")

3. 原生APNs集成 #

• 应用开启APNs权限，获取设备令牌
• 后端接收第三方Web应用的推送请求，转为APNs格式推送
• 原生收到通知后展示系统级弹窗，点击跳转至对应WebView页面

通用优化建议 #

• 对接第三方Webhook：如果能与第三方Web应用协商，让其提供推送通知的Webhook接口，直接将通知推送到你的后端，再由原生分发，这是最稳定的方案。
• 统一通知管理：原生应用维护通知中心，所有第三方Web应用的通知都通过原生展示，确保样式统一，且用户可在系统设置中统一管理权限。
• 订阅状态同步：当用户在WebView中修改通知权限时，同步更新原生应用的权限设置，避免权限冲突。

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