PWA（Progressive web APPs，渐进式 Web 应用）: manifest.json、 Service Worker
文章目录
- 引言
- I 什么是 PWA
- 功能
- 特性
- 技术上分为三个部分
- 安装应用
- II Web 应用清单
- 将Web 应用清单文件链接到站点
- manifest.json
- 字段说明
- III Service Worker( 缓存管理)
- IV 结合构建工具让项目支持 PWA应用
- 使用插件vite-plugin-pwa
- workbox-webpack-plugin插件
- 扩展知识
- 将 PWA 作为脱机应用
- 定义当前文档与被链接文档之间的关系
引言
PWA 是 Google 于 2016 年提出的概念，于 2017 年正式落地，于 2018 年迎来重大突破，全球顶级的浏览器厂商，Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。
PWA 目的是通过各种 Web 技术实现与原生 App 相近的用户体验
I 什么是 PWA
功能
- 离线加载与缓存(Service Worker + Cache API )
可以通过 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存。
Service Worker是一种在后台运行的JavaScript脚本，可以拦截网络请求并将资源缓存到本地。这样，即使用户处于离线状态，他们仍然可以访问缓存的内容。
相关文章：
PWA（Progressive web APPs，渐进式 Web 应用）: manifest.json、 Service Worker
文章目录 引言I 什么是 PWA功能特性技术上分为三个部分安装应用II Web 应用清单将Web 应用清单文件链接到站点manifest.json字段说明III Service Worker( 缓存管理)IV 结合构建工具让项目支持 PWA应用使用插件vite-plugin-pwaworkbox-webpack-plugin插件扩展知识将 PWA 作为脱机…...
【学习笔记】手写 Tomcat 八
目录 一、NIO 1. 创建 Tomcat NIO 类 2. 启动 Tomcat 3. 测试 二、解析请求信息 三、响应数据 创建响应类 修改调用的响应类 四、完整代码 五、测试 六、总结 七、获取全部用户的功能 POJO 生成 POJO 1. 在 Dao 层定义接口 2. 获取用户数据 3. 在 Service 层定…...
24年九月份生活随笔
九月份最后一天，烈士纪念日。 上午看了一会儿直播，庄重的仪式，铭记先辈为新中国抛头颅洒热血，当今盛世，如您所愿。 郑州马拉松官方通告，今天十点公布直通，中签，候补结果。 看完直…...
[含文档+PPT+源码等]精品大数据项目-基于Django实现的高校图书馆智能推送系统的设计与实现
大数据项目——基于Django实现的高校图书馆智能推送系统的设计与实现背景，可以从以下几个方面进行详细阐述： 一、信息技术的发展背景 随着信息技术的飞速发展和互联网的广泛普及，大数据已经成为现代社会的重要资源。在大数据背景下…...
Leecode刷题之路第七天之整数反转
题目出处 07-整数反转 题目描述 个人解法 思路： 1.将整数转换为字符串 2.倒序输出字符串 3.兼容负数case 代码示例：（Java） public int reverse(int x) {Integer integer new Integer(x);String s integer.toString();Strin…...
SpringBoot项目 | 瑞吉外卖 | 短信发送验证码功能改为免费的邮箱发送验证码功能 | 代码实现
0.前情提要 之前的po已经说了单独的邮箱验证码发送功能怎么实现： https://blog.csdn.net/qq_61551948/article/details/142641495 这篇说下如何把该功能整合到瑞吉项目里面，也就是把原先项目里的短信发送验证码的功能改掉，改为邮箱发送验证…...
Windows暂停更新
目录 前言注册表设定参考 前言 不想Windows自动更新，同时不想造成Windows商店不可用，可以采用暂停更新的方案。 但是通过这里设定的时间太短了，所以我们去注册表设定。 注册表设定 win r 输入 regedit进入注册表 HKEY_LOCAL_MACHINE\SOFT…...
alpine安装docker踩坑记
文章目录 前言错误场景正确操作最后 前言 你好，我是醉墨居士，最近使用alpine操作系统上docker遇到了一些错误，尝试解决之后就准备输出一篇博客，帮助有需要的后人能够少踩坑，因为淋过雨所以想给别人撑伞 错误场景 我…...
使用openpyxl轻松操控Excel文件
目录 1. openpyxl 简介2. 安装与快速入门2.1 安装 openpyxl2.2 快速创建一个 Excel 文件2.3 读取 Excel 文件 3. openpyxl 的核心概念3.1 工作簿（Workbook）3.2 工作表（Worksheet）3.3 单元格（Cell）3.4 行与列…...
指定PDF或图片多个识别区域，识别区域文字，并批量对PDF或图片文件改名
常见场景 用户有大量图片/PDF文件，期望能按照图片/PDF中的某些文字对图片/PDF文件重命名。期望工具可以批量处理、离线识别（保证数据安全性）。手工操作麻烦。具体场景：用户有工程现场照片，订单，简历等PDF或…...
Web3中的跨链技术：实现无缝连接的挑战
Web3的到来为互联网带来了去中心化的愿景，而跨链技术则是实现这一愿景的关键。跨链技术旨在解决不同区块链之间的互操作性问题，使得用户和应用能够在多个区块链网络之间无缝地传输数据和价值。尽管这一技术具有广阔的前景，但在实现过程中仍面…...
词袋（Bag of Words, BoW）
词袋（Bag of Words, BoW）模型详解 词袋（BoW）是一种用于文本处理的特征提取方法，常用于自然语言处理（NLP）任务中。在BoW模型中，文本被表示为一个词的无序集合，而忽略了词…...
HTTP Status 404 - /brand-demo/selectAllServlet错误解决原因-Servlet/JavaWeb/IDEA
检查xml文件的包名有无错误检查html文件的url有无写错，是否与Servlet的urlPatterns一致检查Servlet的urlpattern有没有写错(如写成name),检查doPost、doGet是否正常运行 注：IDEA新建Servlet时，默认的WebServlet注解中name需要改urlPatterns&…...
宁夏众智科技OA办公系统存在SQL注入漏洞
漏洞描述 宁夏众智科技OA办公系统存在SQL注入漏洞 漏洞复现 POC POST /Account/Login?ACTIndex&CLRHome HTTP/1.1 Host: Content-Length: 45 Cache-Control: max-age0 Origin: http://39.105.48.206 Content-Type: application/x-www-form-urlencoded Upgrade-Insecur…...
Spring邮件发送：配置与发送邮件详细步骤？
Spring邮件发送教程指南？怎么用Spring邮件发送服务？ Spring框架提供了强大的邮件发送支持，使得开发者能够轻松地在应用程序中集成邮件发送功能。AokSend将详细介绍如何在Spring应用中配置和发送邮件，帮助开发者快速掌握这一关键技…...
iPhone/iPad技巧：如何解锁锁定的 iPhone 或 iPad
“在我更新 iPhone 上的软件后，最近我遇到了iPhone 被锁定到所有者的消息，该如何解决？” 根据我们的研究，许多用户在 iOS 18 更新或恢复出厂设置后都会遇到同样的问题。只要出现问题，您就无法使用 iPhone 或 第 1 部分…...
无源码实现免登录功能
因项目要求需要对一个没有源代码的老旧系统实现免登录功能，系统采用前后端分离的方式部署，登录时前端调用后台的认证接口，认证接口返回token信息，然后将token以json的方式存储到cookie中，格式如下： 这里有…...
大数据毕业设计选题推荐-民族服饰数据分析系统-Python数据可视化-Hive-Hadoop-Spark
✨作者主页：IT研究室✨ 个人简介：曾从事计算机专业培训教学，擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…...
疾风大模型气象,基于气象数据打造可视化平台
引言 随着气象数据的广泛应用，越来越多的行业依赖天气预报与气候分析来做出决策。从农业、航空、能源到物流，气象信息无时不刻影响着各行各业的运作。然而，气象数据本身复杂且多样，如何将这些数据转化为直观、易于理解的图形和信…...
PHP安装后Apache无法运行的问题
问题 按照网上教程php安装点击跳转教程，然后修改Apache的httpd.conf文件，本来可以运行的Apache，无法运行了 然后在"C:\httpd-2.4.62-240904-win64-VS17\Apache24\logs\error.log"（就是我下载Apache的目录下的logs中&am…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
PHP和Node.js哪个更爽?
先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
Python爬虫（二）：爬虫完整流程
爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程 以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备 网站技术分析： 使用浏览器开发者工具（F12&…...
C++ 基础特性深度解析
目录 引言 一、命名空间（namespace） C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用（reference） C 中的引用 与 C 语言的对比 四、inline（内联函数…...
)
OpenLayers 分屏对比(地图联动)
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...