TypeScript ServiceWorker类型定义

Question

我正在使用TypeScript为我的Range2应用程序编写一个服务。该服务使用chrome的ServiceWorker侦听推送通知(请参阅教程)。代码(javascript)首先使用navigator查看是否支持serviceWorker，然后继续完成注册等。

if ('serviceWorker' in navigator) {
  console.log('Service Worker is supported');
  navigator.serviceWorker.register('sw.js').then(function() {
    return navigator.serviceWorker.ready;
  }).then(function(reg) {
    console.log('Service Worker is ready :^)', reg);
      // TODO
  }).catch(function(error) {
    console.log('Service Worker error :^(', error);
  });
}

我想使用TypeScript实现上面的内容。但是，当前lib.d.ts编译器使用的TypeScript编译器(见下文)似乎没有为serviceWorker或其相关方法(如serviceWorker.register )定义Navigator (我猜，因为它是一个特定于铬的实现)。

interface Navigator extends Object, NavigatorID, NavigatorOnLine, NavigatorContentUtils, NavigatorStorageUtils, NavigatorGeolocation, MSNavigatorDoNotTrack, MSFileSaver, NavigatorUserMedia {
    readonly appCodeName: string;
    readonly cookieEnabled: boolean;
    readonly language: string;
    readonly maxTouchPoints: number;
    readonly mimeTypes: MimeTypeArray;
    readonly msManipulationViewsEnabled: boolean;
    readonly msMaxTouchPoints: number;
    readonly msPointerEnabled: boolean;
    readonly plugins: PluginArray;
    readonly pointerEnabled: boolean;
    readonly webdriver: boolean;
    getGamepads(): Gamepad[];
    javaEnabled(): boolean;
    msLaunchUri(uri: string, successCallback?: MSLaunchUriCallback, noHandlerCallback?: MSLaunchUriCallback): void;
    requestMediaKeySystemAccess(keySystem: string, supportedConfigurations: MediaKeySystemConfiguration[]): PromiseLike<MediaKeySystemAccess>;
    vibrate(pattern: number | number[]): boolean;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}

结果是我面临编译错误，因为编译器找不到相关的serviceWorker类型。考虑到我对JavaScript和TypeScript还不熟悉，我正在尝试确定最佳的处理方式。据我所知，备选方案如下：

1. 保留js代码，简单地忽略编译错误(不理想)。
2. 保留js代码，并在编译期间以某种方式抑制类型错误。
3. 找到一个已定义serviceWorker的现有类型记录定义库，并在编译期间包含该库。
4. 为导航器编写自己的类型记录定义文件，或者以某种方式扩展现有的lib.d.ts

明智的建议，最好的选择，非常感谢。

更新

尝试转换为任意类型以删除编译错误，即，

var nav = <any> navigator;

    if ('serviceWorker' in nav) {
       nav.serviceWorker.register('sw.js')
           .then(function(reg) {
                    console.log('yey!', <any> reg);
           }).catch(function(err) {
                console.log('boo!', <any> err);
    });

但现在面临新的错误，

error TS7006: Parameter 'reg' implicitly has an 'any' type.
error TS7006: Parameter 'error' implicitly has an 'any' type.

此外，还想使用这些ServiceWorker为详细信息编写定义。但是从来没有这样做过，所以需要一些练习！

Answer 1

ServiceWorker和朋友们的类型定义现在可以从api接口中获得

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

用法示例：

// 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/' });
    }
}

根据需要调整路径。

Answer 2

您可以添加到TypeScript文件中的接口中，当lib.d.ts更新时，编译器会告诉您不再需要它。

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

或

与更改定义不同，您可以将带有仲裁参数的调用转换为any对象，例如：

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

Answer 3

ServiceWorker不是特定于铬的扩展。

OP应该参考杰克·阿奇博尔德的isSERVICEWORKERready？页面，了解流行浏览器中ServiceWorker的当前状态。

我在tsd.d.ts中添加了基于OP的接口信息连系的类型定义，它们似乎正在工作。

请注意，我从angular.d.ts引用了IPromise接口。

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

在home-controller.ts中引用

///<reference path='../../typings/tsd.d.ts' />
...
// dependencies are injected via AngularJS $injector
constructor() {
  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.');
  }
}

在chrome中构建并加载应用程序

​

​

记录以下控制台消息：

​

​

希望这能有所帮助。