Angular: The type '"periodic-background-sync"' cannot be assigned to type 'PermissionName'

I am trying to enable background sync, but I keep encountering an error when I try to enter the code. Why can't it be found?

Do I need to update something?

This is my code:

if ('periodicSync' in worker) {
    const status = await navigator.permissions.query({
       name: 'periodic-background-sync', //ERROR
    });
    // Periodic background sync can be used.
    if (status.state === 'granted') {
       const tags = await worker.periodicSync.getTags(); //ERROR
       if (!tags.includes('sendDbDatas')) {
          worker.periodicSync.register('sendDbDatas'); //ERROR
       }
    } else {
       // Periodic background sync cannot be used.
    }
}

Answer №1

It seems that typings do not recognize the value 'periodic-background-sync'.

interface DevicePermissionDescriptor extends PermissionDescriptor {
    deviceId?: string;
    name: "camera" | "microphone" | "speaker";
}

One way to work around this is by using casting to any.

const status = await navigator.permissions.query({
   name: <any>'periodic-background-sync'
});

After reviewing Web Periodic Background Synchronization draft, it appears that periodic sync is a modern feature that is still in development. It's no surprise that typings are not familiar with it yet.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

``Implementing a method to save the output of an asynchronous request in a global variable for future manipulation

It's been a week and I still can't figure this out. Being new to front-end development, I'm struggling with storing the response from subscribe in a global variable for future use. ngOnInit(): void { this.http.get<APIResponse>('ur ...

Why is my Typescript event preventDefault function ineffective?

Despite all my efforts, I am still unable to prevent the following a tag from refreshing the page every time it's clicked. <p> <a onClick={(e) => handleClick} href="&qu ...

Typescript error: Cannot assign type to argument

Exploring the world of typescript (2.5.2) and looking for clarity on why the first call works but the second one encounters an error: function printPerson(person: {firstName: string; lastName: string}): void{ console.log(person.firstName + " " + per ...

Encountering issues with Angular 4 dynamic routerlinks on server/localhost, while they work perfectly when the routerlink is

My goal is to create a dynamic navigation menu using a navigation menu service and component. To start, I built a prototype of the navigation menu with hardcoded HTML code like this: <nav> <md-list> <md-list-item rout ...

The process of expanding a nested node in the Angular Material tree with deeply nested data

Within my Angular 7 application, I am utilizing a mat tree structure that contains nested array objects. The goal is to automatically expand specific nested sections after users make changes to the data within those sections. While I have successfully exp ...

Transferring Complex Data Structures from the Realtime Database to Firestore

I am currently in the process of migrating data from Firebase Realtime Database to Firestore, specifically dealing with nested data that I would like to organize into a collection. For example: "data" : { "-LYBzlXPoN0137KRLovk" : { "-LYC-HHqDFgL9Po ...

Could someone assist me in identifying the issue with this logfile and guiding me in the correct direction?

Can someone help me troubleshoot the ng e2e issue in my code? Here's a screenshot of the log file: https://i.sstatic.net/PCrab.png I apologize for the formatting of the package.json file. `package.json` file: { "name": "planning", "version": "0. ...

Angular HighCharts - Retrieving chart data via API

My goal is to populate the data property of my chart with values obtained from an external API: . I've defined an Interface that matches the structure of the data: export interface ChartData{ item1: number; item2: number; ...

Determine the consistent type for numerous properties

Is it feasible to have Typescript automatically infer the type of multiple properties to be the same, or even infer the types based on a specific property? For example, consider the following code snippet -> interface Test<T> { value1: T; val ...

Sending data from child components to parent components in Angular

I'm facing an issue with retrieving data from a child array named store within user data returned by an API. When trying to access this child array in my view, it keeps returning undefined. Code export class TokoPage implements OnInit { store= nu ...

Is there a way to automate downloading a file in Angular using the browser's built-in download feature?

When I make a request to my webservice to download a zip file, the file content is downloaded secretly and suddenly appears in the download task bar as already fully downloaded (100%). I am using the following method in Angular: const endpoint = "http:// ...

Using Angular JS for Traditional Multi-page Websites

Lately, I've been diving into Angular 2 and I have to admit, it's an impressive framework for building single-page applications. But here's the thing - how would one go about integrating Angular with a traditional website (maybe using codei ...

Unable to simulate the navigator.language

I'm currently in the process of writing unit tests for some of my shared utility functions. As someone who is relatively new to unit testing, I am encountering difficulties when trying to mock certain global objects. Specifically, I am struggling to f ...

Adjusting image dynamically based on conditions

I need to dynamically display images on my HTML based on specific conditions using TypeScript. In my TypeScript file: styleArray = ["Solitary", "Visual","Auditory","Logical","Physical","Social","Verbal",]; constructor(){ for (var i = 0; this.sty ...

Problem: Unable to locate the TypeScript declaration file

I am facing an issue with my TypeScript configuration. I have two files in /src/models/: User.ts and User.d.ts. In User.ts, I am building a class and trying to use an interface declaration for an object defined in User.d.ts. However, User.ts is unable to a ...

Differences between Pipe and Tap when working with ngxsWhen working with

While experimenting with pipe and subscribe methods, I encountered an issue. When using pipe with tap, nothing gets logged in the console. However, when I switch to using subscribe, it works perfectly. Can you help me figure out what I'm doing wrong? ...

Setting a dynamic routerLink in Angular 2 based on a component's property-value

Recently, I developed a component with a <a> element and a routerLink property that I intended to set from the template in which the component is used. However, when attempting to do so, I encountered an error message stating 'Cannot read proper ...

Troubleshooting problem with fetching data from Angular API

Looking to use Angular to extract a specific value from the following API: Current code snippet being utilized: app.controller("api", function($scope, $http) { $scope.home = "This is the homepage"; $scope.getRequest = function() { console. ...

Showing the AngularFireList data on the HTML page following successful retrieval

Does anyone know how to display an AngularFireList on an HTML page? import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import {AngularFireAuth} from 'angularfire2/auth'; import {AngularF ...

TypeScript types for d3 version 4

I am currently working on a d3 project and to simplify the development process and reduce errors, I decided to implement TypeScript. Using d3 v4, I initially faced issues with incorrect type definitions which led to errors like d3 not having a definition ...