当前位置：首页 > news >正文

PWA离线优先策略：提升用户体验的关键步骤

news 2025/11/11 14:33:50

Progressive Web Apps (PWA) 的离线优先策略是通过Service Worker和Cache API实现的，它允许在没有网络连接时仍然可以访问网站的部分或全部内容。

2500G计算机入门到高级架构师开发资料超级大礼包免费送！

1. 创建Service Worker注册文件（service-worker.js）：

self.addEventListener('install', (event) => {event.waitUntil(caches.open('my-cache-v1').then((cache) => {return cache.addAll(['/index.html','/style.css','/script.js',// 添加其他需要预缓存的文件路径]);}));
});self.addEventListener('fetch', (event) => {event.respondWith(caches.match(event.request).then((response) => {if (response) {return response;}return fetch(event.request).then((networkResponse) => {caches.open('my-cache-v1').then((cache) => {cache.put(event.request.url, networkResponse.clone());});return networkResponse;}).catch(() => {// 如果所有尝试都失败，可以返回一个备用响应，比如错误页面return caches.match('/offline.html');});}));
});

2. 注册Service Worker：

在你的主应用中注册Service Worker：

if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then((registration) => {console.log('Service Worker registered:', registration);}).catch((error) => {console.error('Service Worker registration failed:', error);});});
}

3. 更新策略：

当有新版本的应用时，需要更新Service Worker和缓存内容。可以在Service Worker中监听activate事件：

self.addEventListener('activate', (event) => {event.waitUntil(caches.keys().then((cacheNames) => {return Promise.all(cacheNames.filter((cacheName) => cacheName !== 'my-cache-v1').map((cacheName) => caches.delete(cacheName)));}));
});

4. 更新Service Worker：

更新Service Worker时，需要改变Service Worker文件名（如增加版本号），这样浏览器会认为这是新的SW并触发安装过程。

5. 更新Service Worker生命周期管理：

确保在Service Worker更新时，旧版本的Service Worker不会影响用户体验。通常，你可能希望旧版本Service Worker完成所有请求后再关闭：

self.addEventListener('message', (event) => {if (event.data && event.data.type === 'SKIP_WAITING') {self.skipWaiting();}
});

6. 配置manifest文件：

创建一个manifest.json文件，定义应用的元数据和离线图标：

{"short_name": "My App","name": "My Awesome Progressive Web App","icons": [{"src": "icon-192.png","sizes": "192x192","type": "image/png"},{"src": "icon-512.png","sizes": "512x512","type": "image/png"}],"start_url": "/index.html","display": "standalone","background_color": "#ffffff","theme_color": "#000000"
}

在HTML中引用manifest文件：

<link rel="manifest" href="/manifest.json">

7. 离线通知和重新加载提示

当用户离线后重新上线时，可以通过Service Worker发送通知提醒用户重新加载页面以获取更新内容：

self.addEventListener('online', (event) => {clients.matchAll({ type: 'window' }).then((clients) => {clients.forEach((client) => {client.postMessage({ type: 'RELOAD' });});});
});self.addEventListener('message', (event) => {if (event.data && event.data.type === 'RELOAD') {clients.matchAll({ type: 'window' }).then((clients) => {clients.forEach((client) => {if (client.url === self.registration.scope && 'focus' in client) {client.focus();client.reload();}});});}
});

在主应用中监听消息：

navigator.serviceWorker.addEventListener('message', (event) => {if (event.data && event.data.type === 'RELOAD') {alert('网络已恢复，刷新页面获取最新内容。');location.reload();}
});

8. 离线提示和体验

当用户离线时，提供友好的离线页面或提示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>离线页面</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f2f2f2;}h1 {font-size: 2rem;color: #333;}</style>
</head>
<body><h1>您已离线，稍后再试。</h1>
</body>
</html>

然后在Service Worker的fetch事件中处理：

self.addEventListener('fetch', (event) => {event.respondWith(caches.match(event.request).then((response) => {if (response) {return response;}// 检查网络请求失败的情况return fetch(event.request).catch(() => {// 返回离线页面return caches.match('/offline.html');});}));
});

9. 更新缓存策略

有时你可能希望缓存特定版本的资源，而不是始终使用最新的。这可以通过在Service Worker中添加版本控制来实现：

const CACHE_NAME = 'my-cache-v2';
const urlsToCache = [// ...
];self.addEventListener('install', (event) => {event.waitUntil(caches.open(CACHE_NAME).then((cache) => {return cache.addAll(urlsToCache);}));
});self.addEventListener('fetch', (event) => {event.respondWith(caches.match(event.request).then((response) => {if (response) {return response;}return fetch(event.request).then((networkResponse) => {caches.open(CACHE_NAME).then((cache) => {cache.put(event.request.url, networkResponse.clone());});return networkResponse;});}));
});

10. 使用App Shell架构

App Shell模型是一种常见的PWA设计模式，它提供一个基本的用户界面框架，即使在离线状态下也能加载。App Shell通常包括导航、头部、侧边栏等非动态内容，这样即使在离线时，用户也能看到应用的基本结构。

首先，创建一个App Shell HTML文件（如app-shell.html），包含基本的布局和样式。然后，在Service Worker中预缓存App Shell：

const appShellUrls = ['/app-shell.html','/app-style.css',// 其他App Shell相关的资源
];self.addEventListener('install', (event) => {event.waitUntil(caches.open('app-shell-cache').then((cache) => {return cache.addAll(appShellUrls);}));
});

在fetch事件中，优先从缓存中获取App Shell资源：

self.addEventListener('fetch', (event) => {if (event.request.mode === 'navigate') {event.respondWith(caches.match('/app-shell.html'));} else {event.respondWith(caches.match(event.request).then((response) => {if (response) {return response;}return fetch(event.request);}));}
});

11. 使用Service Worker拦截网络请求

Service Worker还可以用于拦截特定类型的网络请求，例如API调用。这使得你可以在离线时返回默认值或存储的响应，以提供一致的用户体验：

self.addEventListener('fetch', (event) => {if (event.request.url.startsWith('https://api.example.com')) {event.respondWith(caches.match(event.request).then((response) => {if (response) {return response;}return fetch(event.request).then((networkResponse) => {caches.open('api-cache').then((cache) => {cache.put(event.request.url, networkResponse.clone());});return networkResponse;});}));} else {// 处理其他非API请求}
});

12. 集成WebSocket支持

如果你的应用使用WebSocket进行实时通信，可以使用workbox-websocket库在Service Worker中处理WebSocket连接，确保在离线时能够接收和发送消息：

importScripts('https://unpkg.com/workbox-sw@latest/runtime-caching/workbox-sw.prod.v2.js');
importScripts('https://unpkg.com/workbox-websocket@latest/workbox-websocket.prod.v2.js');workbox.webSocket.register('wss://your-websocket-endpoint.com', {onConnect: (client) => {console.log('WebSocket connected:', client);},onClose: (client) => {console.log('WebSocket disconnected:', client);},
});

13. 测试和监控

确保在不同网络条件下测试你的PWA，包括2G、3G和离线状态。可以使用Chrome开发者工具的模拟网络条件功能。同时，使用Lighthouse等工具定期评估PWA的性能和离线体验。

14. 总结

通过这些策略，可以创建一个高度可用且用户体验优秀的PWA，即使在离线或弱网络环境下也能正常工作。PWA的目标是提供接近原生应用的体验，因此持续优化和测试是关键。

2500G计算机入门到高级架构师开发资料超级大礼包免费送！

PWA离线优先策略：提升用户体验的关键步骤

Progressive Web Apps (PWA) 的离线优先策略是通过Service Worker和Cache API实现的，它允许在没有网络连接时仍然可以访问网站的部分或全部内容。 2500G计算机入门到高级架构师开发资料超级大礼包免费送！ 1. 创建Service Worker注册文件（se…...

编程日记 2024/5/27 15:44:01

网页提示“非私密连接”是为什么?

网页提示“非私密连接”（英文提示可能是 "Your connection is not private" 或 "Your connection is not secure"）主要是因为浏览器无法验证你正试图访问的网站的SSL/TLS证书，或者是证书存在问题，从而无法建立…...

编程日记 2024/5/27 15:42:59

[自动驾驶技术]-8 Tesla自动驾驶方案之硬件（AI Day 2022）

特斯拉在AI Day 2022先介绍了AI编译器，后面又介绍了Dojo的硬件软件，软件部分和AI编译器有部分重叠，本文介绍还是延用AI Day的思路，分为三部分：AI编译和推理，Dojo硬件，Dojo软件。特斯拉车道检测…...

编程日记 2024/5/27 15:40:57

人力资源管理信息化系统如何支持企业开展管理诊断？

华恒智信人力资源顾问有限公司致力于帮助企业开展人力资源管理方面的各项提升改进工作，在长期的咨询工作中，最常听到企业提到的问题莫过于管理诊断方面的问题，事实上，很多企业在日常工作中，都意识到企业内部存在管理方…...

编程日记 2024/5/27 15:37:55

Cohere继Command-R+之后发布大模型Aya-23，性能超越 Gemma、Mistral 等，支持中文

前言近年来，多语言大模型（MLLM）发展迅速，但大多数模型的性能依然存在显著差距，尤其是在非英语语言方面表现不佳。为了推动多语言自然语言处理技术的发展，Cohere团队发布了新的多语言指令微调模型家族——…...

编程日记 2024/5/27 15:36:53

身为UI设计老鸟，不学点3D，好像要被潮流抛弃啦，卷起来吧。

当前3D原则在UI设计中运用的越来越多，在UI设计中，使用3D元素可以为界面带来以下几个价值： 增强视觉冲击力：3D元素可以通过立体感和逼真的效果，为界面增添视觉冲击力，使得设计更加生动、吸引人，并…...

编程日记 2024/5/27 15:35:52

【C语言】实现贪吃蛇--项目实践（超详细）

前言： 贪吃蛇游戏大家都玩过吧？这次我们要用C语言来亲手制作一个！这个项目不仅能让我们复习C语言的知识，还能了解游戏是怎么一步步做出来的。我们会一起完成蛇的移动、食物的生成，还有碰撞检测等有趣的部分。准备好了…...

编程日记 2024/5/27 15:32:48

Elasticsearch 分析器的高级用法一（同义词，高亮搜索）

Elasticsearch 分析器的高级用法一（同义词，高亮搜索） 同义词简介分析使用同义词案例高亮搜索高亮搜索策略unifiedplainvh 同义词简介在搜索场景中，同义词用来处理不同的查询词，有可能是想表达相同的搜索目标。例…...

编程日记 2024/5/27 15:31:48

Python 开心消消乐

💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:「stormsha的主页」…...

编程日记 2024/5/27 15:29:46

mysql - 索引基本知识梳理

mysql索引基本知识梳理索引介绍官方介绍索引是帮助MySQL高效获取数据的数据结构, 原理为以空间换时间, mysql的索引采用的是B树的结构索引的优缺点优点： 提高查询效率降低数据库IO成本通过索引对数据进行排序, 降低排序成本, 降低CPU消耗缺点&#xff1a…...

编程日记 2024/5/27 15:28:45

Nginx SSL/TLS配置：搭建安全的HTTPS网站

随着互联网安全性的日益提升，HTTPS已经成为网站安全通信的标配。Nginx作为一款高性能的HTTP和反向代理服务器，支持SSL/TLS协议，使得我们可以轻松地搭建安全的HTTPS网站。下面，我们将详细介绍如何在Nginx上配置SSL/TLS，…...

编程日记 2024/5/27 15:26:42

Redis数据类型（上篇）

前提：（key代表键） Redis常用的命令命令作用keys *查看当前库所有的keyexists key判断某个key是否存在type key查看key是什么类型del key 删除指定的keyunlink key非阻塞删除，仅仅将keys从keyspace元数据中删除，真正的…...

编程日记 2024/5/27 15:21:37

1.下载Linux的ISO镜像文件阿里镜像源网站: https://developer.aliyun.com/mirror/ 清华大学镜像源网站: https://mirrors.tuna.tsinghua.edu.cn/本人选择的是：Centos7.9.2009标准版 https://mirrors.tuna.tsinghua.edu.cn/centos/7.9.2009/isos/x86_64/ 标准版&a…...

编程日记 2024/5/27 15:20:36

slurm是什么，怎么用？ For slurm和For Pytorch有什么区别和联系？

1.slurm是什么？ Slurm（Simple Linux Utility for Resource Management）是一种开源的、用于集群和超级计算机的作业调度系统。它主要用于管理和调度大规模计算任务，使得用户可以有效地利用集群中的计算资源。Slurm提供了一套功能强…...

编程日记 2024/5/27 15:19:35

类和对象【六】友元和内部类

文章目录友元友元的作用友元的缺点友元函数语法：特点： 友元类语法：特点： 内部类概念特点友元友元的作用友元提供了一种打破封装的方式，有时提供了便利。友元的主要作用就是打破封装即可以让一个类的友元函数…...

编程日记 2024/5/27 15:18:33

一点点 cv 经验 1：cv方向、模型评估、输入尺寸、目标检测器设计

一点点 cv 经验 1：cv方向、模型评估、输入尺寸、目标检测器设计 cv 方向Pytorch数据集划分模型评估误差偏差方差噪声输入尺寸方法一：让数据适应模型方法二：修改模型适应数据方法三：划分Patch，分别处理目标检测器结构…...

编程日记 2024/5/27 15:17:32

Java-SpringBoot集成Langchain4j文本嵌入模型实现向量相似度查询

集成Pg数据库并创建vector字段类型运行pgvector容器根据需要进行容器目录挂载 docker run --name pgvector \-e POSTGRES_PASSWORD123456 \-p 5432:5432 \-d --platform linux/amd64 ankane/pgvector:latest 进入docker容器并创建vector字段类型 docker exec -it pgvecto…...

编程日记 2024/5/27 15:15:30

正宇软件：引领数字人大新纪元，开启甘肃人大代表履职新篇章

在数字化强国的主旋律之下，政府工作的数字化、智能化转型已成为提升治理效能、增强人民满意度的关键一环。在这个大背景下，正宇软件技术开发有限公司以其卓越的技术实力和丰富的行业经验，成为了政府信息化建设的杰出代表。甘肃省人大代表履职…...

编程日记 2024/5/27 15:13:27

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/11/7 14:07:42

OPenCV CUDA模块图像处理-----对图像执行均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述在 GPU 上对图像执行均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。该函数将输入图像中的…...

编程新知 2025/11/7 19:35:46

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。腐蚀…...

编程新知 2025/11/7 20:03:14

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅（Pub/Sub）模式与专业的 MQ（Message Queue）如 Kafka、RabbitMQ 进行比较，核心的权衡点在于：简单与速度 vs. 可靠与功能。下面我们详细展开对比。 Redis Pub/Sub 的核心特点它是一个发后…...

编程新知 2025/8/21 20:41:27

LabVIEW双光子成像系统技术

双光子成像技术的核心特性双光子成像通过双低能量光子协同激发机制，展现出显著的技术优势： 深层组织穿透能力：适用于活体组织深度成像高分辨率观测性能：满足微观结构的精细研究需求低光毒性特点：减少对样本的损伤…...

编程新知 2025/11/8 9:15:00

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题，导致车牌识别率低、逃费率高，传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法，正成为破局关键。该设备安装于车位侧方0.5-0.7米高度，直接规避树枝遮…...

编程新知 2025/11/9 7:53:33

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据，你需要完成以下配置步骤： ✅ 一、在 SQL Server 端配置（服务器设置） 1. 启用 TCP/IP 协议打开 “SQL Server 配置管理器”。导航到：SQL Server 网络配…...

编程新知 2025/8/25 19:37:12

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行二、函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用（Math::max） 2 函数接口…...

编程新知 2025/11/9 18:57:27

基于stm32F10x 系列微控制器的智能电子琴（附完整项目源码、详细接线及讲解视频）

注：文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档所用硬件：STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...

编程新知 2025/11/11 2:09:09