WordPress中如何从外部JS阻止SuperPWA的Service Worker注册

核心思路 #

因为SuperPWA的JS脚本加载早于自定义脚本，所以需要提前劫持浏览器原生的Service Worker注册API，拦截插件的注册请求，仅当用户完成注册后才允许执行真实的注册逻辑。同时要确保自定义脚本优先于插件脚本加载。

具体实现步骤 #

1. 在WordPress中优先加载自定义脚本 #

通过wp_enqueue_scripts钩子，设置极低的优先级（确保比SuperPWA的脚本先执行），并将脚本放在<head>中同步加载：

add_action('wp_enqueue_scripts', 'enqueue_custom_sw_blocker', 1);
function enqueue_custom_sw_blocker() {
    // 注册自定义脚本
    wp_enqueue_script(
        'custom-sw-blocker',
        get_stylesheet_directory_uri() . '/js/sw-blocker.js',
        array(),
        '1.0',
        false // 设为false，脚本会加载在<head>中，确保早于插件脚本
    );

    // 传递用户注册状态到前端JS
    // 这里根据你的实际注册逻辑调整，比如检查用户是否完成注册流程
    $is_user_registered = is_user_logged_in() && get_user_meta(get_current_user_id(), 'registration_completed', true);
    wp_localize_script('custom-sw-blocker', 'user_data', array(
        'is_registered' => $is_user_registered
    ));
}

2. 编写前端拦截逻辑（sw-blocker.js） #

劫持navigator.serviceWorker.register方法，根据用户状态决定是否允许注册，同时提供手动触发注册的方法（用于用户完成注册后）：

// 保存原生的Service Worker注册方法
const originalSWRegister = navigator.serviceWorker.register;

// 替换原生方法，实现拦截逻辑
navigator.serviceWorker.register = function(url, options) {
    if (user_data.is_registered) {
        // 用户已注册，执行真实的注册
        return originalSWRegister.call(this, url, options);
    } else {
        // 用户未注册，拦截请求并返回失败Promise
        console.log('Service Worker注册已拦截：用户未完成注册');
        return Promise.reject(new Error('Registration blocked: user not registered'));
    }
};

// 用户完成注册后，调用此方法触发Service Worker注册
window.allowSWRegistration = function() {
    // 更新用户状态
    user_data.is_registered = true;
    // 检查SuperPWA的全局变量是否存在，存在则触发注册
    if (typeof superpwa_sw !== 'undefined' && superpwa_sw.url) {
        originalSWRegister.call(navigator.serviceWorker, superpwa_sw.url);
    }
};

3. 用户注册完成后触发注册 #

在你的注册成功回调中（比如AJAX注册成功后），调用window.allowSWRegistration()即可触发Service Worker的注册流程。

注意事项 #

• 确保测试环境满足Service Worker的运行条件（HTTPS协议，localhost/127.0.0.1除外）
• 如果SuperPWA的注册逻辑有其他依赖，可根据实际情况调整触发时机
• 不要修改插件核心代码，避免插件更新后失效

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