利用 Service worker 创建一个非常简单的离线页面_html/css

首頁

web前端

html教學

利用 Service worker 创建一个非常简单的离线页面_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:16 AM

让我们想像以下情景：我们此时在一辆通往农村的火车上，用移动设备看着一篇很棒的文章。与此同时，当你点击“查看更多”的链接时，火车忽然进入了隧道，导致移动设备失去了网络，而 web 页面会呈现出类似以下的内容：

这是相当令人沮丧的体验！幸运的是，web 开发者们能通过一些新特性来改善这类的用户体验。我最近一直在折腾 Service Workers，它给 web 带来的无尽可能性总能给我惊喜。Service Workers 的美妙特质之一是允许你检测网络请求的状况，并让你作出相应的响应。

在这篇文章里，我打算用此特性检查用户的当前网络连接状况，如果没连接则返回一个超级简单的离线页面。尽管这是一个非常基础的案例，但它能给你带来启发，让你知道启动并运行该特性是多么的简单！如果你没了解过 Service Worker，我建议你看看此 Github repo，了解更多相关的信息。

在该案例开始前，让我们先简单地看看它的工作流程：

在用户首次访问我们的页面时，我们会安装 Service Worker，并向浏览器的缓存添加我们的离线 HTML 页面
然后，如果用户打算导航到另一个 web 页面（同一个网站下），但此时已断网，那么我们将返回已被缓存的离线 HTML 页面
但是，如果用户打算导航到另外一个 web 页面，而此时网络已连接，则能照常浏览页面

让我们开始吧

假如你有以下 HTML 页面。这虽然非常基础，但能给你总体思路。

<!DOCTYPE html>

接着，让我们在页面里注册 Service Worker，这里仅创建了该对象。向刚刚的 HTML 里添加以下代码。

<script>// Register the service worker// 注册 service workerif ('serviceWorker' in navigator) {    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {    // Registration was successful    // 注册成功    console.log('ServiceWorker registration successful with scope: ', registration.scope);}).catch(function(err) {    // registration failed :(    // 注册失败 :(    console.log('ServiceWorker registration failed: ', err);   });}</script>

然后，我们需要创建 Service Worker 文件并将其命名为 ‘service-worker.js‘。我们打算用这个 Service Worker 拦截全部网络请求，以此检查网络的连接性，并根据检查结果向用户返回最适合的内容。

'use strict';var cacheVersion = 1;var currentCache = {  offline: 'offline-cache' + cacheVersion};const offlineUrl = 'offline-page.html';this.addEventListener('install', event => {  event.waitUntil(    caches.open(currentCache.offline).then(function(cache) {      return cache.addAll([          './img/offline.svg',          offlineUrl      ]);    })  );});

在上面的代码中，我们在安装 Service Worker 时，向缓存添加了离线页面。如果我们将代码分为几小块，可看到前几行代码中，我为离线页面指定了缓存版本和URL。如果你的缓存有不同版本，那么你只需更新版本号即可简单地清除缓存。在大概在第 12 行代码，我向这个离线页面及其资源（如：图片）发出请求。在得到成功的响应后，我们将离线页面和相关资源添加到缓存。

现在，离线页面已存进缓存了，我们可在需要的时候检索它。在同一个 Service Worker 中，我们需要对无网络时返回的离线页面添加相应的逻辑代码。

this.addEventListener('fetch', event => {  // request.mode = navigate isn't supported in all browsers  // request.mode = naivgate 并没有得到所有浏览器的支持  // so include a check for Accept: text/html header.  // 因此对 header 的 Accept：text/html 进行核实  if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {        event.respondWith(          fetch(event.request.url).catch(error => {              // Return the offline page              // 返回离线页面              return caches.match(offlineUrl);          })    );  }  else{        // Respond with everything else if we can        // 返回任何我们能返回的东西        event.respondWith(caches.match(event.request)                        .then(function (response) {                        return response || fetch(event.request);                    })            );      }});

为了测试该功能，你可以使用 Chrome 内置的开发者工具。首先，导航到你的页面，然后一旦安装上了 Service Worker，就打开 Network 标签并将节流（throttling）改为 Offline。（译者注：若将节流设置为 Offline 没效果，则可通过关闭网络或者通过360安全卫士禁止 Chrome 访问网络）

如果你刷新页面，你应该能看到相应的离线页面！

如果你只想简单地测试该功能而不想写任何代码，那么你可以访问我已创建好的 demo。另外，上述全部代码可以在 Github repo 找到。

我知道用在此案例中的页面很简单，但你的离线页面则取决于你自己！如果你想深入该案例的内容，你可以为离线页面添加缓存破坏（ cache busting），如：此案例。

拓展阅读

此外，还有几个很棒的离线功能案例。如：Guardian 构建了一个拥有 crossword puzzle（填字游戏）的离线 web 页面 – 因此，即使等待网络重连时（即已在离线状态下），也能找到一点乐趣。我也推荐看看 Google Chrome Github repo，它包含了很多不同的 Service Worker 案例 – 其中一些应用案例也在这！

然而，如果你想跳过上述代码，只是想简单地通过一个库来处理相关操作，那么我推荐你看看 UpUp。这是一个轻量的脚本，能让你更轻松地使用离线功能。

打赏支持译者翻译更多好文章，谢谢！
打赏译者

打赏支持译者翻译更多好文章，谢谢！

任选一种支付方式

关于作者：刘健超-J.c

前端，在路上...http://jchehe.github.io 个人主页 · 我的文章 · 17 ·

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles