如何使用 service-worker 后台同步与打字稿

Question

我用 TS (npx create-react-app my-app --template cra-template-pwa-typescript) 创建了一个 React 项目。

我遵循了文档：https://developers.google.com/web/updates/2015/12/background-sync)。以下代码产生 TS 错误（即使它有效）：

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync'); // error
});

self.addEventListener('sync', function(event) {
    if (event.tag == 'syncSavedProjects') { // error
        event.waitUntil(doSomeStuff()); // error
    }
});

属性 'sync' 在类型 'ServiceWorkerRegistration'
属性 'tag' 在类型 'Event'
属性 'waitUntil' 在类型 'Event'

似乎缺少定义 (lib.dom.d.ts)

Answer 1

有许多类型已从 TypeScript v4.4.0 的标准类型库中删除，如 this issue 中所述。这些主要是与未广泛实现的网络平台功能相关的类型（例如，目前仅 Chrome 的功能）。后台同步属于该类别。

从 TypeScript v4.5.0 开始，长期计划显然是使用像 @types/web and @types/serviceworker 这样的独立库，而不是随每个 TypeScript 版本更新的标准库。这意味着将来升级 TypeScript 依赖项可以独立于类型定义依赖项完成。

但是，这些库也有不包含仅在单个浏览器中可用的界面的策略。所以我也不认为后台同步在它们中暴露。可能还有另一个 @types/... 图书馆确实有它们，但我还没有找到它们。

因此，就目前的实际解决方案而言，我发现的最佳方法是将旧定义的本地副本添加到您的 TypeScript 项目中。这是 Workbox 项目中后台同步定义的 how we did this 片段：

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;
  }
}

如何使用 service-worker 后台同步与打字稿

How to use service-worker background sync with typescript

typescript

reactjs

service-worker