如何将service-worker后台同步与 typescript 一起使用

n53p2ov0 于 2023-01-03 发布在 TypeScript

关注(0)|答案(1)|浏览(165)

我用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
    }
});

类型“ServiceWorkerRegistration”上不存在属性“sync”
类型“Event”上不存在属性“tag”
类型“Event”上不存在属性“waitUntil”

似乎缺少定义（lib.dom.d.ts）

typescript

来源：https://stackoverflow.com/questions/69786676/how-to-use-service-worker-background-sync-with-typescript

1条答案

按热度按时间

x8diyxa71#

如this issue中所述，在TypeScript v4.4.0的标准类型库中删除了许多类型。这些类型主要与尚未广泛实现的Web平台功能相关（例如，目前仅支持Chrome的功能）。后台同步福尔斯这一类。
从TypeScript v4.5.0开始，长期计划显然是使用@types/web和@types/serviceworker这样的独立库，而不是每个TypeScript版本都会更新的标准库，这意味着将来升级TypeScript依赖项时可以独立于类型定义依赖项。

然而 *，这些库也有一个政策，不包括接口，只有在一个单一的浏览器可用。所以我不认为后台同步是暴露在他们也。可能有另一个@types/...库确实有他们，但我还没有能够找到他们。

因此，就目前的实际解决方案而言，我发现的最佳方法是将旧定义的本地副本添加到TypeScript项目中。以下是我们在Workbox项目中如何为后台同步定义添加此副本的片段：

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

赞(0）回复(0）举报 2023-01-03

我来回答

如何将service-worker后台同步与 typescript 一起使用

1条答案

相关问题

热门标签

最新问答