enbock / Time-Tracker

export interface ServiceWorkerEventMap {

  'activate': ExtendableEvent;

  'fetch': FetchEvent;

  'install': InstallEvent;

}

export interface ServiceWorkerGlobalScope {

  readonly caches: CacheStorage;

  addEventListener<K extends keyof ServiceWorkerEventMap>(

    type: K,

    listener: (event: ServiceWorkerEventMap[K]) => any,

    useCapture?: boolean

  ): void;

  skipWaiting(): void;

}

export interface InstallEvent extends ExtendableEvent {

  readonly activeWorker: ServiceWorker;

}

export interface ExtendableEvent extends Event {

  waitUntil(promise: Promise<any>): void;

}

export interface FetchEvent extends Event {

  readonly isReload: boolean;

  readonly request: Request;

  readonly clientId: string;

  respondWith(all: any): Response;

}

// https://developers.google.com/web/fundamentals/primers/service-workers

export class ServiceWorkerManager {

  worker: ServiceWorkerGlobalScope;

  caches: CacheStorage;

  version: string;

  fileList: string[];

  constructor(worker: any, caches: CacheStorage, version: string, fileList: string[]) {

    this.worker = worker;

    this.caches = caches;

    this.version = version;

    this.fileList = fileList;

    this.worker.addEventListener('install', this.installCache.bind(this));

    this.worker.addEventListener('activate', this.activateCache.bind(this));

    this.worker.addEventListener('fetch', this.fetchRequest.bind(this));

  }

  installCache(event: InstallEvent) {

    this.worker.skipWaiting(); // Not content immediately active (even partially)

    event.waitUntil(this.cacheFiles());

  }

  activateCache(event: ExtendableEvent) {

    event.waitUntil(this.clearOldCaches());

  }

  fetchRequest(event: FetchEvent) {

    event.respondWith(this.fetch(event.request));

  }

  async cacheFiles() {

    const cache: Cache = await this.caches.open(this.version);

    return cache.addAll(this.fileList);

  }

  async clearOldCaches() {

    const cacheNames = await this.caches.keys();

    return Promise.all(

      cacheNames.map(

        (cacheName: string) => {

          if (cacheName != this.version) {

            return this.caches.delete(cacheName);

          }

        }

      )

    );

  }

  async fetch(request: Request) {

    const response: Response | undefined = await this.caches.match(request);

    if (response) {

      return response;

    }

    const fetchResponse: Response = await fetch(request);

    if (!fetchResponse || fetchResponse.status !== 200 || fetchResponse.type !== 'basic') {

      return fetchResponse;

    }

    // IMPORTANT: Clone the response. A response is a stream

    // and because we want the browser to consume the response

    // as well as the cache consuming the response, we need

    // to clone it so we have two streams.

    const responseToCache: Response = fetchResponse.clone();

    const cache: Cache = await this.caches.open(this.version);

    await cache.put(request, responseToCache);

    return fetchResponse;

  }

}

const version: string = 'VERSION'; // Will be generated by script

const fileList: string[] = []; // Will be generated by script

if (this) {

  new ServiceWorkerManager(this, caches, version, fileList);

}