前言
在移动互联网的时代，H5成为了自媒体，游戏开发，电商等行业的标配，越来越多的企业开始将网站打包成app，这时候会遇到一个问题：app 启动时需要检查版本更新，更新完界面才能显示。而且，网站拥有被“千刀万剐”的风险，如果网站被攻击倒了，app 也就挂了。那么有没有办法解决上述问题呢？答案是：利用 PWA 实现 H5 离线化存储方案。
解决方案
其实，H5 离线存储一直以来就是前端工程师们学习的一个热门方向。HTML5 提出了 Application Cache 缓存方案，可以通过 manifest 文件来设置离线缓存，但是这个方案在一些安卓机上还存在 bug。所以，现在更推崇使用 PWA 来实现 H5 离线化存储方案。
PWA 是什么？
PWA（Progressive Web App）称之为“渐进式 Web 应用”，就是指开发者采用当前 Web 技术开发的 Web 应用，具有可靠，快速和吸引人等特点，由于它是基于 Web 技术开发的，因此可以跨平台使用（适用于 Android、IOS、Windows），可以理解为一种增强版的 Web App。
PWA 的优点
- 可添加至主屏幕
- 应用启动快
- 在离线状态下可以使用
- 提供类似原生应用的操作体验
- 具有更快更安全的访问速度
PWA 实现 H5 离线化存储方案
Service Worker
Service Worker 是 PWA 最重要的 API 之一，是一种独立于网页的 JavaScript 独立线程，可以用来实现一些离线或者网络相关的任务。Service Worker 运行在后台，可以拦截和处理网络请求，从而实现离线存储、消息推送等功能。
下面是 Service Worker 的注册代码：
-- -------------------- ---- -------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
-- ------------ --- ----------
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-- ------------ ------ --
-------------------------- ------------ ------- -- -----
---
---
-Service Worker 生命周期分为如下三种状态：
- Installing：Service Worker 安装中，此时触发 install 事件，可以用来缓存一些静态资源。
- Installed：Service Worker 安装完成，此时触发 install 事件。如果设备初始安装的 Service Worker 静态资源有更新，浏览器会重新下载并触发 install 事件。
- Activating：Service Worker 激活中，此时触发 activate 事件。此时可以删除过期的缓存文件，更新文件缓存，建立新的连接等操作。
离线缓存
Service Worker 常用来做缓存，下面是一个简单的例子：
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
---------------------------------------------- -
------ --------------
----
--------------
--------------
----------
----------------
---
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- -------------------------------------------- -
------ ---------------------------------------------- -
------------------------ ------------------
------ ---------
---
---
------------------- -
------ -------------------------------
--
--
---上述代码使用了 caches.open() 方法来打开一个名称为 cache-test 的缓存，再通过该缓存的 addAll() 方法缓存一些静态资源。而 fetch 事件内，首先使用 caches.match() 方法判断请求是否在缓存中存在，如果存在，则直接返回缓存；如果不存在，则通过 fetch 方法发起请求，并将响应再次添加到缓存中（使用 cache.put() 方法）。此外，如果请求不存在缓存中，返回一个 fallback.html 页面，告诉用户请求的页面不可用。
PWA 开发注意事项
- Service Worker 只在 HTTPS 的情况下才能正常工作。
- Service Worker 不支持同步 API。
- 必须使用 Promise API。
- 离线缓存一定要保证数据的一致性，必要时需要更新缓存（可以在 service worker 的缓存更新策略中动态判断资源是否过期）。
总结
通过 PWA 实现 H5 离线化存储方案，可以使网站更加安全、快速和可靠，提升用户的体验，让用户不再受到网络波动的困扰。但是，需要注意的是，在开发时需要遵循 PWA 的相关规范，提高代码质量，保证缓存数据的一致性。
代码示例
一个简单的 H5 离线化存储方案实现代码示例，欢迎大家试着修改和调试。
-- -------------------- ---- -------
-- -- ------- ------
-- ---------------- -- ---------- -
------------------------------- ---------- -
---------------------------------------------------------------------- -
-------------------------- ------------ ---------- ---- ------ -- --------------------
-- ------------- -
-------------------------- ------------ ------- -- -----
---
---
-
-- ------- --- --
-------------------------------- --------------- -
----------------
---------------------------------------------- -
------ --------------
----
--------------
--------------
----------
-----------------
----------------
---
--
--
---
-- ------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- -------------------------------------------- -
------ ---------------------------------------------- -
------------------------ ------------------
------ ---------
---
---
------------------- -
------ -------------------------------
--
--
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e42012f6b2d6eab3f7c122