javascript - AngularJS + TypeScript : Skriv en Service Worker i TypeScript

Jag använder AngularJS 1.6 och Typescript för min app och jag undrar om det finns ett sätt att skriva en Service Worker i TypeScript?

När jag googlade hittade jag mest en massa tips för att skriva det i Angular2, men jag har ingen erfarenhet av Angular2 alls.

Jag har redan skrivit service workers tidigare men det var i ren JS, borde jag skapa en service eller något med tanke på att jag använder TypeScript? Jag vet att ren JavaScript kommer att fungera men jag tror inte att det är ett bra sätt att göra detta på eftersom jag mest använder TypeScript för resten av appen.

Jag vill skriva om något sådant här i klasser osv :

var cacheWhiteList = [];
cacheWhiteList.push(cacheName);
cacheWhiteList.push(dataCacheName);

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache.map(url => new Request(url, {
        credentials: 'same-origin'
      })));
    })
  );
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        console.log('[ServiceWorker] Removing old cache', key);
        if (cacheWhiteList.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );

});

self.addEventListener('push', function(event) {
  console.log('Push message received', event);
  var notificationBody = "";
  event.waitUntil(
    fetch('/api/Deploy/LastReleases', {
      method: 'get',
      credentials: 'same-origin'
    }).then(function(response) {
      return response.text();
    }).then(function(text) {
      notificationBody = text;
      console.log("body1:" + notificationBody);
      var title = 'UDD DELIVERY';
      self.registration.showNotification(title, {
        body: notificationBody,
        icon: '/Content/images/icons/icon-120x120.png',
        vibrate: [300, 100, 300],
        tag: 'Release-tag',
        requireInteraction: true
      })
    })
  );
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(clients.matchAll({
    includeUncontrolled: true,
    type: 'window'
  }).then(activeClients => {
    if (activeClients.length > 0) {
      activeClients[0].navigate('/');
      activeClients[0].focus();
    } else {
      clients.openWindow('/');
    }
  }));
});

self.addEventListener('fetch', function(e) {
  var dataUrl = '/api/';
  var dataUrl2 = '/api/Deploy/LastReleases';
  var dataUrl3 = '/api/deploy/Register';
  if (e.request.url.indexOf(dataUrl) > 0) {
    if (e.request.url.indexOf(dataUrl2) > 0 || e.request.url.indexOf(dataUrl3) > 0) {
      e.respondWith(
        fetch(e.request)
        .then(function(response) {
          return response;
        })
      );
    } else {
      e.respondWith(
        fetch(e.request)
        .then(function(response) {
          return caches.open(dataCacheName).then(function(cache) {
            cache.put(e.request.url, response.clone());
            return response;
          });
        })
      );
    }
  } else {
    e.respondWith(
      caches.match(e.request).then(function(response) {
        return response || fetch(e.request);
      })
    )
  };
});

Svar #1

TypeScript är en övermängd av JavaScript. Detta innebär att all giltig JavaScript-kod också är giltig TypeScript-kod. Följande är mina steg för att konvertera JS-kod till TS

1. Hitta lämpliga typningar

   Du kan hitta Typings för service worker API här

2. Lägg till korrekta typer för alla variabler för att undvika fel typkollision.

3. Lägga till kapslingar till funktioner och exportera det som en klass.

4. Använd byggverktyg (Webpack) som omvandlar TypeScript till JavaScript om det behövs

Till exempel, anta att vi har ett modul, låt oss säga Greeter, den har en instansvariabel greeting och en metod greet som lägger till hello till greeting. Och koden för modulen visas nedan

var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());
alert(new Greeter("samuel").greet());

Den motsvarande representationen av ovanstående js-funktion i typescript är som följer

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

alert(new Greeter("samuel").greet());

Den officiella dokumentationen för migration kan hittas här