使用Web Periodic Background Sync API时如何解决Promise处于pending状态的问题

核心原因 #

调用方法后Promise持续pending的最主要诱因是navigator.serviceWorker.ready未进入就绪状态：该Promise只有在页面成功注册、激活Service Worker后才会resolve，如果你的页面未提前完成Service Worker注册、注册失败、运行环境不满足Service Worker要求，这个await逻辑会一直阻塞，导致整个异步方法无法返回结果。
另外还有两个常见触发场景：

• 你调用异步方法时未使用await或者.then()捕获返回值，误以为Promise未resolve
• 运行环境不支持Periodic Background Sync API，虽不会导致pending，但会出现返回值不符合预期的问题

修复步骤 #

1. 先完成Service Worker注册后再调用相关方法
   在页面初始化逻辑中先完成Service Worker注册，注册成功后再实例化任务类调用方法，示例代码如下：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      // 替换为你实际的Service Worker文件路径
      await navigator.serviceWorker.register('/service-worker.js');
      const updateTask = new Update('content-update');
      // 必须加await获取异步方法返回值
      const subscribeResult = await updateTask.subscribe();
      console.log(subscribeResult);
    } catch (err) {
      console.error('初始化失败', err);
    }
  });
}

2. 给Service Worker就绪逻辑加超时兜底，避免无限阻塞
   修改BackgroundManager类，新增超时逻辑：

class BackgroundManager {
    // 新增获取SW注册实例的方法，加超时兜底
    async #getSWRegistration(timeout = 10000) {
        return Promise.race([
            navigator.serviceWorker.ready,
            new Promise((_, reject) => 
                setTimeout(() => reject(new Error('Service Worker就绪超时')), timeout)
            )
        ]);
    }

    async subscribe() {
        const registration = await this.#getSWRegistration();
        const type = this.type;

        try {
            await registration.periodicSync.register(type, {
                minInterval: this.interval,
            });
        } catch (e) {
            console.log('Periodic Sync 注册失败', e);
        }
        return 'subscribed'
    }

    async unsubscribe() {
        const type = this.type;
        const registration = await this.#getSWRegistration();
        if ('periodicSync' in registration) {
            await registration.periodicSync.unregister(type);
        }
        return 'unsubscribed'
    }

    async getSubscriptions() {
        const registration = await this.#getSWRegistration();
        if ('periodicSync' in registration) {
            return await registration.periodicSync.getTags();
        }
        // 不支持API时返回空数组做兜底
        return [];
    }
}

3. 检查运行环境要求

• 必须在HTTPS环境或者localhost本地开发环境运行
• 仅Chromium内核浏览器（Chrome、Edge等）支持Periodic Background Sync API，Firefox、Safari暂不支持该特性

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