Question

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

使用ng-sw.config.json文件，我设置了要缓存的资产和API以及要使用的策略（性能/新鲜度），即使离线也可以毫无问题地为应用程序提供服务。现在，我想显示一个自定义的脱机页面，但是在教程和指南中，我看不到使用Angular及其服务人员模块实现此目的的方法。

我想知道一种可行的解决方案是否是创建一种检查连接性（联机/脱机）的服务，如果该服务处于脱机状态，则将其重定向到offline.html页面。服务和html页面将采用“预取”策略进行缓存，以确保在安装服务工作者后立即可用。

否则，我将创建一个base service worker来导入默认的Angular服务工作程序，并添加逻辑以在提取调用失败时重定向到脱机页面。

还有其他可能性吗？

Answer 1

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

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

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

接下来在app.component.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 个答案: