Node.js 角度PWA-在没有可用连接时路由到自定义脱机页面

在角度PWA中，如果没有可用的internet连接，我想将用户重定向到自定义脱机页面（offline.html）

使用

ng sw.config.json

文件，我设置了要缓存的资产和API以及要使用的策略（性能/新鲜度），并且我可以在离线时为应用程序提供服务，而不会出现任何问题。 现在我想展示一个定制的离线页面，但在教程和指南中，我看不到使用Angular及其service worker模块实现这一点的方法

我想知道一个可能的解决方案是否是创建一个服务来检查连接（在线/离线），如果离线，它会重定向到offline.html页面。服务和html页面将使用“预取”策略进行缓存，以确保在安装服务工作者后立即可用

否则，我将创建一个基本服务工作程序，它导入默认的角度服务工作程序，并添加逻辑以在获取调用失败时重定向到脱机页面

---

还有其他可能性吗？

首先，您需要创建一个脱机html页面并存储在资产文件夹中

然后像这样将脱机页面添加到您的ng-sw.config中

  "resources": {
    "files": [
      "/assets/favicon.ico",
      "/*.css",
      "/*.js",
      "/assets/offline-page.html"  
    ],

ngOnInit() {
  self.addEventListener('fetch', function(event) {
    return event.respondWith(
      caches.match(event.request)
      .then(function(response) {
        let requestToCache = event.request.clone();

        return fetch(requestToCache).then().catch(error => {
          // Check if the user is offline first and is trying to navigate to a web page
          if (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) {
            // Return the offline page
            return caches.match(offlineUrl);
          }
        });
      })
    );
  });
}

接下来在app.component.html中添加如下逻辑

  "resources": {
    "files": [
      "/assets/favicon.ico",
      "/*.css",
      "/*.js",
      "/assets/offline-page.html"  
    ],

ngOnInit() {
  self.addEventListener('fetch', function(event) {
    return event.respondWith(
      caches.match(event.request)
      .then(function(response) {
        let requestToCache = event.request.clone();

        return fetch(requestToCache).then().catch(error => {
          // Check if the user is offline first and is trying to navigate to a web page
          if (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) {
            // Return the offline page
            return caches.match(offlineUrl);
          }
        });
      })
    );
  });
}

---

所以，当用户处于脱机模式，并且用户尝试导航到另一个路由时，他们将看到脱机页面

，所以如果我想用angular构建脱机PWA，我需要自己缓存每个文件！！？我想我会的。这取决于你需要什么。在这种情况下，我只需要1个文件offline-page.html为什么我要缓存资产文件夹中的每个文件？我想缓存整个文件，让这个PWA像本机应用程序一样，所以我需要缓存整个文件，但我不知道如何设置。有什么建议或关键词吗？@LiHao你对整个文件的意思是什么？我想知道，这应该有用吗？首先，可以将代码添加到app.component.ts，而不是app.component.html。然后self.addEventListener（'fetch'…）将只在服务工作者脚本中工作，而不是在app.component中工作，对吗？