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

问题描述 投票:3回答:1

我正在为我的应用程序使用AngularJS 1.6和Typescript,我想知道是否有办法在TypeScript中编写Service Worker?

当我用Google搜索时,我发现很多提示要在Angular2中编写它,但我没有任何Angular2的经验。

我之前已经写过服务工作者,但它是纯粹的js,我应该创建服务还是考虑到我正在使用打字稿的事实?我知道纯java脚本可以工作但我不认为这是一个很好的方法,因为我主要使用typescript作为应用程序的其余部分。

我想在类等中重写这样的东西:

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);
      })
    )
  };
});
javascript angularjs typescript service-worker progressive-web-apps
1个回答
-2
投票

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

  1. 找到合适的打字 您可以找到服务工作者API here的类型
  2. 为所有变量添加适当的类型以避免错误的键入冲突。
  3. 将封装添加到函数并将其作为类导出。
  4. 如有必要,使用构建工具(Webpack)将TypeScript转换为JavaScript

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

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找到

© www.soinside.com 2019 - 2024. All rights reserved.