Typoskript Typ-Definitionen für ServiceWorker
Schreibe ich einen service für meine eckige 2-app mit Typoskript. Der Dienst nutzt chrome ServiceWorker
zu hören, für push-Benachrichtigungen (siehe tutorial). Der code (javascript) nutzt navigator
erst sehen, wenn serviceWorker
unterstützt wird, dann fährt Fort, um die Registrierung abzuschließen etc., d.h.,
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);
});
}
Möchte ich implemenet die oben mit Hilfe von TypeScript. Jedoch, die aktuelle lib.d.ts
verwendet, die von der TypeScript-compiler (siehe unten) wird angezeigt, keine Definitionen festgelegt, die auf Navigator
für die serviceWorker
oder der mit Ihr verbundenen Methoden wie serviceWorker.register
(ich denke, da es ein chrome-spezifische Implementierung).
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;
}
Das Ergebnis ist, dass ich konfrontiert bin mit der Zusammenstellung von Fehlern, da der compiler nicht finden können, die damit verbundenen serviceWorker
Arten. Gegeben, ich bin neu in JavaScript und TypeScript, ich bin versucht zu bestimmen, der beste Weg zu gehen. Ich verstehe die Optionen:
- Halten Sie den js-code und Sie einfach ignorieren Sie den Kompilierungsfehler (nicht
ideal). - Halten Sie den js-code und irgendwie unterdrücken die Art von Fehlern während der
Zusammenstellung. - Eine bereits vorhandene Typoskript Definitionen Bibliothek,
hatserviceWorker
definiert und beinhalten, dass während der Kompilierung. - Schreibe meine eigenen Typoskript-definitions-Datei für den navigator oder irgendwie
Erweiterung der bestehendenlib.d.ts
Salbei Beratung über die beste option sehr geschätzt.
Update
Versucht zu werfen, um alle zu entfernen, die Zusammenstellung von Fehlern, d.h.,
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);
});
aber jetzt vor neuen Fehler, d.h.,
error TS7006: Parameter 'reg' implicitly has an 'any' type.
error TS7006: Parameter 'error' implicitly has an 'any' type.
Auch, der Versuchung zu schreiben, die Definitionen für die ServiceWorker mit diesen details. Allerdings noch nie gemacht, daher braucht es einige übung!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Typ-Definitionen für ServiceWorker und Freunde sind ab sofort DefinitelyTyped/service_worker_api:
Beispiel:
Passen Sie die Pfade als notwendig.
npm install --save @types/service_worker_api
funktioniert auch.Ursprüngliche Antwort
Hier sind die Testungen, die ich erstellt, um mit WebStorm: Gist.
Dann in meinem service-Arbeiter.ts Datei, die ich einen Verweis:
///<reference path="YOUR_PATH_HERE/service-worker.d.ts" />
.Passen Sie Ihren Pfad entsprechend, oder stellen Sie global, und Sie sollte Recht gesetzt werden. Es ist ziemlich komplett, aber ich bin sicher, es fehlen einige Dinge. Wie auch immer, ich hoffe, das hilft.
2018 Update:
Veröffentlichte ich eine neue Ausgabe dieser Definitionen um die Arbeit mit der lib.webworker.d....ts-zusammen mit es5+ - Bibliothek (lib.es5.d....ts, lib.es2015.d....ts, etc) hier: Dienst-Arbeiter-Testungen zu ergänzen, zu lib.webworker.d....ts. Dieser Satz sollte viel mehr relevant heute.
Können Sie hinzufügen, um die Schnittstelle in Ihrem Typoskript-Datei und, wenn die lib.d....ts aktualisiert wird, wird der compiler dir sagen, dass du es nicht mehr benötigst.
oder
Anstatt Sie zu verändern die definition, die Sie werfen kann, um ein
any
Objekt ein Aufruf mit beliebigen Parameter-e.g:<any>
Fehler gibtTS7006: Parameter 'reg' implicitly has an 'any' type
. - siehe update.ServiceWorker ist nicht ein chrome-spezifische Erweiterung.
OP sollte sich auf Jake archibalds isSERVICEWORKERready? Seite für einen überblick über den aktuellen Stand der ServiceWorker in den gängigen Browsern.
Habe ich noch die type-Definitionen in
tsd.d.ts
basierend auf der Schnittstellen-Informationen verbunden OP und Sie scheinen zu funktionieren.Bitte beachten Sie, dass ich verwiesen
IPromise
Schnittstelle von eckig.d....ts.Definiert in
tsd.d.ts
Bezeichnet in
home-controller.ts
Aufbau und das laden der app im chrome
protokolliert die folgende konsolenmeldung:
Hoffe, das hilft.