navigator.serviceWorker 属性“sync”在“ServiceWorkerRegistration”类型上不存在

Question

我有一个为渐进式 Web 应用程序配置的 Angular 14.1.1 应用程序。使用以下代码时，我收到错误“ServiceWorkerRegistration”类型上不存在属性“sync”。

navigator.serviceWorker.ready.then(registration => {
    if (registration.sync) { //Error: Property 'sync' does not exist on type 'ServiceWorkerRegistration'.
        // Background Sync is supported.
    } else {
        // Background Sync isn't supported.
    }
});

Answer 1

由于 background-sync 目前是草案，因此打字内容尚未备份到打字稿中。

您必须创建自己的定义：

interface SyncManager {
  getTags(): Promise<string[]>;
  register(tag: string): Promise<void>;
}

declare global {
  interface ServiceWorkerRegistration {
    readonly sync: SyncManager;
  }

  interface SyncEvent extends ExtendableEvent {
    readonly lastChance: boolean;
    readonly tag: string;
  }

  interface ServiceWorkerGlobalScopeEventMap {
    sync: SyncEvent;
  }
}

Answer 2

现在尝试声明它any。

  backgroundSync(tagName: string) {
    navigator.serviceWorker.ready
      .then((swRegistration: any) => swRegistration.sync.register(tagName))
      .catch(console.log);
  }