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…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
uniapp手机号一键登录保姆级教程（包含前端和后端）
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要： 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式（自动驾驶、人工驾驶、远程驾驶、主动安全），并通过实时消息推送更新车…...
WebRTC调研
WebRTC是什么，为什么，如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...
CTF show 数学不及格
拿到题目先查一下壳，看一下信息 发现是一个ELF文件，64位的 用IDA Pro 64 打开这个文件 然后点击F5进行伪代码转换 可以看到有五个if判断，第一个argc ! 5这个判断并没有起太大作用，主要是下面四个if判断 根据题目…...
深入理解 React 样式方案
React 的样式方案较多，在应用开发初期，开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有： 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中，均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观，适合动态样式和…...