How to use service-worker background sync with typescript - reactjs

Question

I created a react project with TS (npx create-react-app my-app --template cra-template-pwa-typescript).
I followed the documentation : https://developers.google.com/web/updates/2015/12/background-sync). The following code is producing TS errors (even if it works):
// 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
}
});
Property 'sync' does not exist on type 'ServiceWorkerRegistration'
Property 'tag' does not exist on type 'Event'
Property 'waitUntil' does not exist on type 'Event'
Looks like definitions are missing (lib.dom.d.ts)

Answer 1

There are a number of types that were removed from the standard type libraries in TypeScript v4.4.0, as described in this issue. Primarily, these are types related to web platform features that are not widely implemented (e.g. features that are Chrome-only at the moment). Background sync falls into that category.
The long-term plan is apparently, starting with TypeScript v4.5.0, to use standalone libraries like #types/web and #types/serviceworker, instead of the standard libraries that are updated with each TypeScript release. This means that in the future, upgrading your TypeScript dependency can be done independently from your type definition dependencies.
However, those libraries also have a policy of not including interfaces that are only available in a single browser. So I don't think that background sync is exposed in them either. There might be another #types/... library that does have them, but I have no been able to find them yet.
So, in terms of an actual solution today, the best approach I've found is to add a local copy of the old definitions to your TypeScript project. Here's a snippet of how we did this in the Workbox project for the background sync defintions:
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;
}
}