时间戳

首页 > 解决方案 > Angular 中的手动 Service Worker

angular - Angular 中的手动 Service Worker

问题描述

是否可以添加Service Worker在 Angular 中手动创建的而不是配置 JSON？

我想实现我自己的自定义代码

标签： angularangular7

解决方案

您可以像这样创建 sw.js 文件

var cacheName = "your cache name";

self.addEventListener("install", event => {
  event.waitUntil(
    caches
    .open(cacheName)
    .then(cache =>
      cache.addAll([

      ])
    ).then(() => self.skipWaiting())
  );
});

//Removing outdated caches
self.addEventListener("activate", function (event) {
  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames
        .filter(function (cacheName) {
          return true;
        })
        .map(function (cacheName) {
          return caches.delete(cacheName);
        })
      );
    }).then(() => self.clients.claim())
  );
});

// Cache any new resources as they are fetched
self.addEventListener("fetch", function (event) {

});

然后在您的 app.component.ts 中放入这些代码

 public ngOnInit() {
     if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("./sw.js")
        .then(registration => {
          // Registration was successful
          console.log(
            "ServiceWorker registration successful with scope: ",
            registration.scope
          );
        })
        .catch(err => {
          // registration failed :(
          console.log("ServiceWorker registration failed: ", err);
        });
    }

如果您有任何问题，请告诉我

推荐阅读