Question

我正在为我的应用程序使用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);
      })
    )
  };
});

Answer 1

TypeScript是一套超级JavaScript。这意味着所有有效的JavaScript代码也是有效的类型脚本代码。以下是我将JS代码转换为TS

的步骤

找到合适的打字

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

例如，假设我们有一个模块，比如说Greeter它有一个实例变量问候语和一个方法问候语，它将问候语附加到问候语中。模块的代码如下所示

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函数的相应表示如下

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

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

可以找到迁移的官方文档here

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

1 个答案: