AngularJS + TypeScript：用Typescript编写服务工作者

扎卡里亚（Zakaria Sahmane）

我正在为我的应用程序使用AngularJS 1.6和Typescript，我想知道是否可以使用TypeScript编写Service Worker？

当我用google搜索时，我几乎发现了很多在Angular2中编写它的技巧，但是我对Angular2没有任何经验。

我之前已经写过服务工作者，但是它是用纯js语言编写的，我应该创建服务还是考虑我正在使用打字稿的事实？我知道纯Java脚本可以工作，但是我不认为这是个好方法，因为我在其余的应用程序中大多使用打字稿。

我想在类等中重写这样的内容：

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

samuelj90

TypeScript是JavaScript的超集。这意味着所有有效的JavaScript代码也是有效的Type Script代码。以下是我将JS代码转换为TS的步骤

查找适当的类型

您可以在此处找到服务工作者API的类型
为所有变量添加正确的类型，以避免错误的类型冲突。
向函数添加封装并将其导出为类。
如有必要，使用构建工具（Webpack）将TypeScript转换为JavaScript

例如，假设我们有一个叫Greeter的模块，它有一个实例变量greeting和一个向greeting追加问候的greet方法，该模块的代码如下所示

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());

上面的js函数在typescript中的对应表示如下

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

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

迁移的官方文档可以在这里找到

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。