利用 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代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

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。

See all articles