服务人员 |如何创建自定义离线页面？

Service Worker允许拦截网络请求并决定加载（获取）什么。此功能可用于在用户断开连接时加载自定义缓存的离线页面，从而改善他们的浏览体验。

了解应用程序生命周期

1. 当用户最初加载页面时， Service Worker被安装并激活。然后自定义离线页面被存储到浏览器缓存中。
2. 当用户触发导致重新加载或导航到另一个页面的事件但同时他不再连接到互联网时，服务工作者拦截网络请求并返回离线缓存页面作为响应。

起始文件

考虑到 ' index.html ' 和 ' style.css ' 在同一个文件夹中更简单。

• 索引.html

  
  
  
    
  
      
      
      
      
      
  
    
  
      
      
  
          
          
          
              Refresh Page
          
      
  
    
  
  

• 样式w.css

  /*   style.css   */
    
  * {
      margin: 0;
      padding: 0;
  }
    
  *,
  *::before,
  *::after {
      box-sizing: inherit;
  }
    
  html {
      box-sizing: border-box;
      font-size: 62.5%;
  }
    
  .wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 80vh;
  }
    
  button {
      padding: .5rem;
      font-size: 1.5rem;
  }
  

输出：

用户失去连接时的默认行为：

连接丢失时的默认页面行为

添加服务工作者：

考虑到 'index.html'、'style.css'、'service-worker.js' 和 'offline-page.html' 在同一个文件夹中更简单。

• 索引.html

    
  
      
      
      
      
      
      
      Service Worker App
  
    
  
      
          
          
          
              Refresh Page
          
      
      
          // Check if browser supports service workers
          if (navigator.serviceWorker) {
              console.log("Service Worker Supported");
              
              // Start registration process on page load
              window.addEventListener("load", () => {
                  navigator.serviceWorker
                                        
                      // The register function takes as argument
                      // the file path to the worker's file
                      .register("./service_worker.js")
                
                      // Gives us registration object
                      .then(reg => console.log("Service Worker Registered"))
                      .catch(swErr => console.log(
                        `Service Worker Error: ${swErr}}`));
              });
          }
      
  
    

• 样式.css

  /*   style.css   */
    
  * {
      margin: 0;
      padding: 0;
  }
    
  *,
  *::before,
  *::after {
      box-sizing: inherit;
  }
    
  html {
      box-sizing: border-box;
      font-size: 62.5%;
  }
    
  .wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 80vh;
  }
    
  button {
      padding: .5rem;
      font-size: 1.5rem;
  }
  

• service_worker.js

  /*  service_worker.js  */
    
  const offlineCache = './offline-page.html';
  // Adding the offline page 
  // when installing the service worker
  self.addEventListener('install', e => {
      // Wait until promise is finished 
      // Until it get rid of the service worker
      e.waitUntil(
          caches.open(offlineCache)
          .then(cache => {
              cache.add(offlineCache)
                  // When everything is set
                  .then(() => self.skipWaiting())
          })
      );
  })
    
  // Call Activate Event
  self.addEventListener('activate', e => {
      console.log('Service Worker - Activated')
      e.waitUntil(
          caches.keys().then(cacheNames => {
              return Promise.all(
                  cacheNames.map(
                      cache => {
                          if (cache !== offlineCache) {
                              console.log(
                                'Service Worker: Clearing Old Cache');
                              return caches.delete(cache);
                          }
                      }
                  )
              )
          })
      );
    
  });
    
  // Call Fetch Event 
  self.addEventListener('fetch', e => {
      console.log('Service Worker: Fetching');
      e.respondWith(
          // If there is no internet
          fetch(e.request).catch((error) =>
              caches.match(offlineCache)
          )
      );
  });
  

• 离线page.html

  
  
  
    
  
      
      
      
      
    
      
      
  
    
  
      
  
          
  Ooops, it looks like you lost connection.
          
  Please check your network and try again!
          
  Sincerely, GeeksForGeeks team!
      
  
    
  
  

添加 Service Worker 后失去连接重新加载行为：

使用服务工作者示例代码的页面行为

如何重新创建丢失的连接

几乎每个浏览器都带有内置的开发者工具。在大多数情况下，打开工具的快捷方式是F12或右键单击网页并选择检查元素。然后，您可以转到网络并将框“在线”更改为“离线”并刷新您的页面。

谷歌浏览器的开发者工具