如何实现 PWA 全局离线化

面试官：小伙子，你的数组去重方式惊艳到我了

如何实现 PWA 全局离线化

在当今互联网发展日新月异的时代，网页应用程序已成为人们使用电脑和手机时最常用的工具之一。然而，即使在今天，仍然有很多用户会遭遇网络断连或是网络不稳定的困扰，这极大地影响了网页程序的使用体验。因此，全局离线化已成为网页应用程序保证稳定运行的必要措施之一。在本文中，我们将详细介绍如何实现 PWA 全局离线化，包括概念、实现方法和示例代码。

概念

PWA（progressive web app）指的是在 web 应用中利用现代 Web 技术和标准，使其能够和原生应用程序相一致的 Web 应用程序。全局离线化是 PWA 的其中一个关键特性，它使 Web 应用程序在没有办法连接到 Internet 的情况下也能运行。全局离线可以分为两种情况，分别是第一次加载和后续加载的全局离线。

在第一次加载时，浏览器会将应用程序缓存下来，即使下次访问应用程序时没有网络连接，应用程序也可以从缓存中加载。在后续加载时，则可以通过更新缓存来保证应用程序代码的新鲜性。总之，全局离线化是在不可连接互联网的情况下继续使用网页应用程序的能力。

实现方法

实现全局离线化主要有以下几个步骤：

  1. 编写 Service Worker

Service Worker 是一个独立于浏览器主进程的子线程，它可以处理所有离线和网络请求。在 PWA 中，Service Worker 负责实现全局离线功能。具体来说，它需要监听应用程序缓存事件，如向缓存中添加资源、更新缓存以及从缓存中获取资源。可以通过以下代码来注册 Service Worker。

if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js').then((registration) => { console.log('SW registered'); }); }); }

  1. 编写缓存机制

Service Worker 需要缓存应用程序代码和其他资源，以便在没有网络连接的情况下运行。缓存支持以下两种方式：

  • 缓存资源：Service Worker 可以通过 Cache API 来缓存静态资源。例如，可以缓存首页、CSS、JS 等资源。

self.addEventListener('install', (event) => { event.waitUntil( caches.open('static').then((cache) => { return cache.addAll([ '/index.html', '/assets/css/main.css', '/assets/js/main.js' ]); }) ); });

  • 缓存动态响应：Service Worker 可以通过 Fetch API 来缓存动态响应。例如，在每次响应时将数据存储在缓存中，以便在没有网络连接的情况下使用缓存数据。

self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((cachedResponse) => { return cachedResponse || fetch(event.request).then((response) => { caches.open('dynamic').then((cache) => { cache.put(event.request, response.clone()); }); return response; }) }) ); });

  1. 处理离线情况

当用户在没有网络连接的情况下访问应用程序时，Service Worker 必须能够处理请求并返回缓存的数据。可以通过以下代码来实现：

self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((cachedResponse) => { return cachedResponse || fetch(event.request).then((response) => { caches.open('dynamic').then((cache) => { cache.put(event.request, response.clone()); }); return response; }) }) ); });

  1. 更新缓存

在应用程序中更新缓存很重要，因为用户在使用应用程序时需要体验到最新的内容。更新缓存需要在 Service Worker 中实现以下两个步骤：

  • 删除旧的缓存：Service Worker 需要删除旧的缓存以避免缓存冲突。

self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.filter((cacheName) => { return cacheName !== 'static' && cacheName !== 'dynamic'; }).map((cacheName) => { return caches.delete(cacheName); }) ); }) ); });

  • 更新缓存：Service Worker 需要更新缓存以加载最新的应用程序内容。

function updateDynamicCache(request, response) { return caches.open('dynamic').then((cache) => { if (response.status === 200) { cache.put(request, response.clone()); } return response; }) }

示例代码

以下是完整的代码示例，包括 Service Worker 的注册、缓存机制、处理离线情况和更新缓存。请在支持 Service Worker 的浏览器中测试，以获取最佳的使用体验。

sw.js

const CACHE_STATIC_NAME = 'static-v1'; const CACHE_DYNAMIC_NAME = 'dynamic-v1';

self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_STATIC_NAME).then((cache) => { console.log('[Service Worker] Precaching app shell'); cache.addAll([ '/', '/index.html', '/assets/css/main.css', '/assets/js/main.js' ]); }) ); });

self.addEventListener('activate', (event) => { event.waitUntil( caches.keys().then((keyList) => { return Promise.all(keyList.map((key) => { if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) { console.log('[Service Worker] Removing old cache', key); return caches.delete(key); } })); }) ); });

self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { if (response) { return response; } else { return fetch(event.request).then((res) => { return caches.open(CACHE_DYNAMIC_NAME).then((cache) => { cache.put(event.request.url, res.clone()); return res; }) }).catch(() => { return caches.open(CACHE_STATIC_NAME).then((cache) => { return cache.match('/offline.html'); }); }); } }) ); });

index.html

PWA

Hello World!

main.js

console.log('Hello World!');

main.css

body { font-family: sans-serif; }

h1 { color: #333; }

offline.html

Offline

You are offline!

结论

本文介绍了 PWA 的全局离线化特性，以及如何实现全局离线化功能。由于全局离线化可以提高应用程序的可用性和稳定性，并提高用户的体验，因此这个功能在现代 Web 应用程序中很重要。希望这篇文章能帮助读者更好地理解如何使用 Service Worker 来实现 PWA 的全局离线化功能。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66ed83b5bc9e1890c5e1e323

阅读全文

猜你喜欢

  • 如何使用 React 和 Redux 构建单页应用程序

    在现代Web应用程序开发中，使用React和Redux已成为一种常见的技术选择，React是一个快速的JavaScript库，用于构建用户界面，而Redux是一种可预测性的状态管理库，它可以使代码更加...

    1 个月前
  • PM2 如何实现页面实时推送和消息通知功能

    在前端开发中，往往需要实现页面实时推送和消息通知功能。为了实现这些功能，开发人员需要使用各种技术和工具，在这其中，PM2 是一个非常有用的工具。本文将介绍 PM2 实现页面实时推送和消息通知功能的方法...

    1 个月前
  • 为什么要使用 TypeScript？

    随着前端技术的飞速发展，JavaScript已经成为了前端领域最常用的编程语言之一。然而，JavaScript是弱类型的语言，这给代码的可读性和可维护性带来了很大的挑战。

    1 个月前
  • Babel 节点 API 的使用教程

    在前端开发中，我们经常会使用 Babel 工具将 ES6+ 语法转换成兼容更多浏览器的 ES5 语法，以更好地支持各种浏览器。而 Babel 节点 API 则是 Babel 实现编译过程的重要方式之一...

    1 个月前
  • Next.js Nginx 配置指南

    前言 Next.js 是一个基于 React 的可预测性的服务端渲染框架。在实际生产环境中，我们需要将 Next.js 应用程序通过 Nginx 进行代理和负载均衡。

    1 个月前
  • 解决ES7/8中的Array.include()方法遇到的坑

    在ES7/8中，Array.include()方法旨在简化一些常见的任务。 它可以很方便地检查数组是否包含特定的值，以便于数据处理。但是在使用这种方法时，我们需要注意一些细节，否则可能会遇到一些不必要...

    1 个月前
  • 如何使用 Serverless 扩展应用程序功能

    随着云计算技术的快速发展，越来越多的开发者开始采用 Serverless 技术来开发应用程序。Serverless 技术是一种极具弹性和灵活性的技术，通过将应用程序的业务逻辑与云服务相关的管理工作分离...

    1 个月前
  • 解决 Tailwind 框架样式加载缓慢的问题

    在使用 Tailwind CSS 框架进行前端开发时，我们常常会遇到样式加载缓慢的问题，这会降低页面加载速度和用户体验。本文将介绍如何解决这个问题，同时提供了一些有用的技巧和建议。

    1 个月前
  • 在 Mocha 中如何测试 Symfony 框架的应用

    前言 Symfony 是一款非常流行的 PHP Web 框架，它提供了许多方便的功能，如路由、表单验证、模板引擎等等，使得 Web 开发变得更加容易和快速。在使用 Symfony 框架开发 Web 应...

    1 个月前
  • RxJS 的调试技巧

    RxJS 是一个流行的、基于观察者模式的 JavaScript 库，它利用可观察对象（Observables）来处理异步事件和数据流。在前端开发中，RxJS 被广泛用于处理复杂的异步事件处理和数据流转...

    1 个月前
  • 在 Express 中使用 Node.js 筛选数据

    在 Web 应用程序中，数据筛选是一项非常常见和重要的任务。Node.js 是一个非常流行的平台，而 Express 是 Node.js 最受欢迎和广泛使用的 web 应用程序框架之一。

    1 个月前
  • Kubernetes Pod 内部无法访问外部服务

    在 Kubernetes 中，Pod 是最小的部署单位。它包含一个或多个容器，可以与其他 Pod 通信，并使用 Kubernetes 中的 Service 来暴露服务。

    1 个月前
  • Cypress 测试中如何使用自定义命令

    Cypress是一个流行的前端测试框架，它采用了现代化和友好的API，使得测试变得简便和稳定。在Cypress测试中，我们通常需要编写许多测试用例，每个测试用例都需要执行类似的操作，例如登录、点击、输...

    1 个月前
  • Deno 中如何防止异常终止的问题

    在编写 Deno 应用程序时，通常会遇到从错误中恢复和避免程序异常终止的情况，尤其是在异步和并发代码中。本文将介绍一些在 Deno 中处理异常的最佳实践，以及如何防止程序意外崩溃。

    1 个月前
  • 国外知名 CSS Reset 比较: Eric Meyer、Normalize、Reset CSS、Sanitize.css

    在前端开发中，CSS Reset 是一个非常重要的概念。它可以帮助我们解决浏览器默认样式的不一致问题，并提供一套统一的样式规则，让我们的样式能在不同的浏览器中得到正确的呈现。

    1 个月前
  • 如何在 React 项目中引入 Tailwind 框架

    本文将介绍如何在 React 项目中引入 Tailwind 框架。Tailwind 是一个功能强大的 CSS 框架，可以帮助您快速轻松地为项目添加样式，同时保持代码清晰易读。

    1 个月前
  • 响应式设计中的网格布局及其最佳实践

    前言 在现代网页设计中，响应式设计已经成为了必须掌握的技能之一。在响应式设计中，网页布局的适应性是非常重要的，而网格布局就是一种常用的布局方式。本文将介绍响应式设计中的网格布局及其最佳实践。

    1 个月前
  • 如何在 WebVR 中使用无障碍技术

    WebVR 是一种基于 Web 技术开发的虚拟现实应用程序的标准。然而，在 WebVR 中使用无障碍技术，以提供更加多样化的用户体验，对于聋哑人士、视力障碍等残疾人群体具有重要意义。

    1 个月前
  • 在 ES9 中使用 Promise.allSettled() 方法解决多个 Promise 的并行执行问题

    在前端开发中，经常会遇到需要同时处理多个异步操作的情况。而在 ES6 中，我们已经可以通过 Promise.all() 方法来实现多个 Promise 的并行执行，但是如果有其中一个 Promise ...

    1 个月前
  • Mocha 测试中如何测试 jQuery 插件

    前言 在前端开发中，我们常常使用 jQuery 插件来实现一些常见的功能，例如轮播图、弹窗、下拉框等等。为了保证页面的稳定性和正确性，我们需要对这些插件进行测试。而 Mocha 是一款 JavaScr...

    1 个月前

相关推荐

    暂无文章