背景
问题
最近在搭建移动端组件库，其中文档我是用vitepress写，移动端的预览我是用iframe嵌套h5页面(目前移动端组件库基操)，而在某一次部署更新的时候，我发现h5页面突然间404了，当我访问 motui.cvcvcvcv.com/ui/时，并没有像往常一样帮我跳转到motui.cvcvcvcv.com/ui/#/xxxxx，奇了怪了，我查看了network，发现每次调用/ui/页面的时候，随之会调用 index.html页面，我觉得这应该是问题的关键。
岔路
于是我走了岔路，我以为是需要进行nginx代理一下，并且搜了一下，发现确实是有这种nginx没代理出现404的情况，于是我开始了不断的一次又一次的尝试... 在这个过程中，我分清楚了 root、alias、try_files的区别，了解了openresty是啥东西(其实还不是很了解)，对nginx proxy manager了解多了一点(这个是我管理多个网站docker部署代理的工具)。 正如前面所说，这个是岔路，根本不是nginx导致的（子目录下的页面访问，并不需要配置nginx！），因此我重新调整了方向。
转机
偶然间，我尝试着去除缓存强制刷新/ui页面，发现它又正常了，但是当我下一次刷新时又404了，我才发现浏览器刷新是由多种刷新方式的，打开f12后右键刷新按钮会由三个选项。 当我使用硬性加载时，页面正常，正常重新加载时页面404，问题终于有了突破性进展，原来是浏览器缓存导致的！我反应过来应该是我配置了vitepress的pwa导致的。
问题解决
于是我去看了下pwa，在研究vitepress中pwa插件源码的时候发现了这个issue 这个情况tm不是和我的一模一样吗？！这个issue的问题应该是设置了pwa但是没有启动sw文件，但是我在网站
motui.cvcvcvcv.com中是启动了的，后面我想了下，应该是因为我的 motui.cvcvcvcv.com/ui/前缀和这里冲突了，导致它也受到了service worker的影响，才会一直不断的重定向到index.html，并且报错。
而在本地运行的时候，vitepress文档的端口9999和h5页面的端口5173并不相同，services worker好像并没有作用到他那，因此没啥问题。
于是我去除了vitepress中的service worker，一切又恢复了正常！终于！！
知识点插播
浏览器正常重新加载与硬性重新加载 参考
正常重新加载 等同于F5 ，浏览器发送请求时会带上缓存相关请求头
硬性重新加载：等同于直接按SHIFT+F5，(浏览器在发送请求时会带上禁止缓存的相关请求头) 或者在devtools的network面板中勾选Disable cache并刷新（devtools面板开启状态）。这种情况下当遇到需要加载的资源时，不会使用缓存的资源，而是重新发起请求。
清空缓存并硬性重新加载：顾名思义，将该页面的缓存清空并进行硬性重新加载，有人可能会问，既然是硬性重新加载，清不清缓存好像没有意义。其实不然，页面加载后，还可能通过JS加载内容，只是普通的硬性重新加载的话这部分的内容仍然是从缓存中加载的，清空缓存则可以保证页面内容是完全重新加载的
VitePress PWA 功能 与 Services Worker 介绍
PWA
- PWA主要用于浏览器的离线缓存，将浏览器加载的文件存储到了浏览器的缓存中，方便下次离线状态下访问，VitePress 开启 PWA 功能可以看这个教程：VitePress 如何开启 PWA 功能
ServicesWorker
1. 什么是 Web Worker？
Web Worker 是浏览器内置的线程，用于执行非阻塞事件循环的 JavaScript 代码。由于 JavaScript 是单线程语言，一次只能处理一个任务。复杂任务的出现可能导致主线程被阻塞，严重影响用户体验。Web Worker 的作用是允许主线程创建 worker 线程，使它们可以同时运行。Worker 线程主要负责处理复杂的计算任务，然后将结果返回给主线程。简而言之，worker 线程执行复杂计算，同时保持页面（主线程）的流畅性，不会造成阻塞。
2. 类型
Web Worker 有三种主要类型：
- Dedicated Workers【专用 Worker】由主线程实例化，只能与主线程通信。
- Shared Workers【共享 Worker】可以被同源的所有线程访问。
- Service Workers【服务 Worker】能够控制其关联的网页，拦截和修改导航、资源请求，并缓存资源，使您能够在某些情况下灵活控制应用程序的行为。
3. 限制
1. 同源限制
分配给 Worker 线程运行的脚本文件必须与主线程的脚本文件同源，通常都应该放在同一项目下。
2. DOM 限制
Web Workers 无法访问某些关键的 JavaScript 特性，包括：
1 DOM（因为这可能导致线程不安全）
2 window 对象
3 document 对象
4 parent 对象
3. 文件限制
出于安全考虑，worker 线程无法读取本地文件。它们加载的脚本必须来自网络，并且必须与主线程的脚本同源。
什是Service Worker？
Service Worker（服务工作线程）是一种在浏览器背后运行的脚本，用于提供强大的离线和缓存功能，以改善 Web 应用程序的性能和可靠性。它是渐进式网络应用程序（Progressive Web App，PWA）的关键组成部分，可以让 Web 应用程序更像本地应用程序，即使在离线状态下也能正常工作。Service Worker 是 Web 开发中的一个强大工具，它使开发人员能够更好地控制和管理 Web 页面的资源缓存、网络请求和响应，从而提供更快速、更稳定的用户体验。
image.png
Service Worker 的功能和优点
Service Worker 提供了许多重要功能和优点，其中包括：
1. 离线支持
Service Worker 可以缓存 Web 应用程序的资源，使其在断网或低网络质量环境下仍能够加载和运行。这意味着用户可以随时访问应用程序，无需依赖网络连接。
2. 更快的加载速度
通过将资源缓存在本地，Service Worker 可以显著提高 Web 页面的加载速度。它可以从缓存中获取资源，而无需每次都从服务器重新下载。
3. 支持后台同步
Service Worker 允许在后台执行任务，例如数据同步或推送通知。这使得应用程序可以在不干扰用户的情况下执行一些重要的操作。
4. 增强的安全性
Service Worker 受同源策略的限制，因此它可以提供更安全的资源缓存和请求处理。它还可以用于拦截和处理恶意请求。
5. 支持推送通知
Service Worker 具有推送通知功能，可以通过浏览器向用户发送实时通知，提高用户参与度和留存率。