TypeScript type definitions for ServiceWorker

Type definitions for ServiceWorker and friends are now available from DefinitelyTyped/service_worker_api:

$ typings install dt~service_worker_api --global --saveservice_worker_api└── (No dependencies)

Usage example:

// data-access.service.ts/// <reference path="typings/globals/service_worker_api/index.d.ts" />import { Injectable } from '@angular/core';@Injectable()export class DataAccess {    constructor() {        navigator.serviceWorker.register('service-worker.js', { scope: '/api/' });    }}

Adjust the paths as necessary.

You can add to the interface in your TypeScript file and when the lib.d.ts is updated, the compiler will tell you that you no longer need it.

interface Navigator {    getUserMedia(        options: { video?: bool; audio?: bool; },         success: (stream: any) => void,         error?: (error: string) => void        ) : void;}navigator.getUserMedia(    {video: true, audio: true},     function (stream) {  },    function (error) {  });

or

Instead of changing the definition you can cast to an any object an call with arbitray parameters e.g:

 var n = <any>navigator;    n.getUserMedia  = n.getUserMedia || n.webkitGetUserMedia || n.mozGetUserMedia || n.msGetUserMedia;    return  n.getUserMedia({video: true, audio:true}, onSuccess, onFail);

ServiceWorker is not a chrome specific extension.

OP should refer to Jake Archibald's isSERVICEWORKERready? page for a rundown of the current state of ServiceWorker in the popular browsers.

I added the type definitions in tsd.d.ts based on the interface information linked by OP and they seem to be working.

Please note that I referenced IPromise interface from angular.d.ts.

Defined in tsd.d.ts

/// <reference path="angularjs/angular.d.ts" />interface Navigator {    serviceWorker: ServiceWorkerContainer;}interface ServiceWorkerContainer {  register(scriptUrl: string, options?: RegistrationOptions): angular.IPromise<ServiceWorkerRegistration>;}interface RegistrationOptions {  scope: string;}interface ServiceWorkerRegistration {  installing?: ServiceWorker;  waiting?: ServiceWorker;  active?: ServiceWorker;  scope: string;  update(): angular.IPromise<void>;  unregister(): angular.IPromise<boolean>;}interface ServiceWorker {  scriptUrl: string;  state: string;  postMessage(message: any, transfer: Array<any>): void;}

Referred in home-controller.ts

///<reference path='../../typings/tsd.d.ts' />...// dependencies are injected via AngularJS $injectorconstructor() {  var vm = this;  vm.ctrlName = 'HomeCtrl';  if ('serviceWorker' in navigator) {    navigator.serviceWorker.register('/sw.js', { scope: '/' }).then(function(reg) {      // registration worked      console.log('Registration succeeded. Scope is ' + reg.scope);    }).catch(function(error) {      // registration failed      console.log('Registration failed with ' + error);    });  } else {    console.warn('serviceWorker not available in navigator.');  }}

Building and loading the app in the chrome

logs the following console message:

Hope this helps.