title: TypeScript type definitions for ServiceWorker
body: <p>I'm writing a service for my angular 2 app using TypeScript. The service makes use of chrome's <code>ServiceWorker</code> to listen for push notifications (see <a href="https://developers.google.com/web/fundamentals/getting-started/push-notifications/?hl=en" rel="noreferrer" title="tutorial">tutorial</a>). The code (javascript) makes use of <code>navigator</code> first to see if <code>serviceWorker</code> is supported, then continues to complete registration etc., i.e.,</p>
  
  <pre><code>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);
    });
  }
  </code></pre>
  
  <p>I'd like to implemenet the above using TypeScript. However, the current <code>lib.d.ts</code> used by the TypeScript compiler (see below) appears to have no definitions defined on <code>Navigator</code> for the <code>serviceWorker</code> or its associated methods such as <code>serviceWorker.register</code> (I guess since it's a chrome-specific implementation).</p>
  
  <pre><code>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&lt;MediaKeySystemAccess&gt;;
      vibrate(pattern: number | number[]): boolean;
      addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
  }
  </code></pre>
  
  <p>The result is that I'm faced with compilation errors since the compiler can't find the associated <code>serviceWorker</code> types. Given I'm new to JavaScript and TypeScript, I'm trying to determine the best way to proceed. I understand the options to be:</p>
  
  <ol>
  <li>Keep the js code and simply ignore the compilation errors (not
  ideal). </li>
  <li>Keep the js code and somehow suppress the type errors during
      compilation. </li>
  <li>Find an existing typescript definitions library that
      has <code>serviceWorker</code> defined and include that during compilation.</li>
  <li>Write my own typescript definition file for navigator or somehow
      extend the existing <code>lib.d.ts</code></li>
  </ol>
  
  <p>Sage advice on the best option greatly appreciated.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Attempted to cast to any to remove compilation errors, i.e.,</p>
  
  <pre><code>var nav = &lt;any&gt; navigator;
  
      if ('serviceWorker' in nav) {
         nav.serviceWorker.register('sw.js')
             .then(function(reg) {
                      console.log('yey!', &lt;any&gt; reg);
             }).catch(function(err) {
                  console.log('boo!', &lt;any&gt; err);
      });
  </code></pre>
  
  <p>but now facing new errors, i.e.,</p>
  
  <pre><code>error TS7006: Parameter 'reg' implicitly has an 'any' type.
  error TS7006: Parameter 'error' implicitly has an 'any' type.
  </code></pre>
  
  <p>Also, tempted to write definitions for the ServiceWorker using these <a href="https://slightlyoff.github.io/ServiceWorker/spec/service_worker/#navigator-service-worker" rel="noreferrer">details</a>. However never done it before, so will need some practice!</p>