CODEWITHSUNDEEP
angularprogressive-web-apps
Kestal
Kestal

Reputation: 243

navigator.serviceWorker Property 'sync' does not exist on type 'ServiceWorkerRegistration'

I have an Angular 14.1.1 app configured for Progressive Web Apps. I'm getting an error Property 'sync' does not exist on type 'ServiceWorkerRegistration' when using the following code.

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

Upvotes: 3

Views: 1230

Answers (2)

yoenuts
yoenuts

Reputation: 31

Try declaring it any for now.

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

Upvotes: 0

Matthieu Riegler
Matthieu Riegler

Reputation: 55554

Since background-sync is currently a draft, the typings aren't backed into typescript yet.

You'll have to create your own definitions:

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

Upvotes: 3

Related Questions