在现代的 Web 开发中，PWA（Progressive Web Apps）已经成为了一个非常热门的话题。PWA 能够让我们的 Web 应用具备类似原生应用的体验，例如离线缓存、推送通知等功能。在 PWA 中，JS 作为前端开发中不可或缺的一部分，有着非常重要的作用。本文将会介绍一些 PWA 中的 JS 开发技巧，帮助你更好地开发 PWA。
Service Worker
Service Worker 是 PWA 中的一个核心概念。Service Worker 可以让我们拦截和处理网络请求，使得我们可以实现离线缓存等功能。那么在 PWA 中，如何编写一个正确的 Service Worker 呢？
范围
Service Worker 是运行在一个特定的域名下的，这个域名称为 Service Worker 的范围。在定义 Service Worker 的范围时，如果我们定义的是/（根目录），那么 Service Worker 将拦截该域名下的所有网络请求，包括所有的子目录和子域名。如果我们的 Web 应用是一个单页应用，可以只拦截根目录下的网络请求。
生命周期
Service Worker 有着自己的生命周期，需要我们合理地管理它。以下是 Service Worker 的生命周期事件：
install：Service Worker 第一次安装时触发；activate：Service Worker 安装后，当所有先前安装的 Service Worker 都不再控制任何客户端时，才会触发激活事件；fetch：当我们的页面向服务器发起网络请求时，如果该资源匹配上了 Service Worker 的请求拦截规则，则会触发 fetch 事件。
在 Service Worker 的生命周期中，我们可以理解为在 install 和 activate 生命周期事件中去管理 Service Worker 的缓存和资源，可以在 fetch 生命周期事件中去应用 Service Worker 的缓存和资源。
例如，我们可以在 install 生命周期事件中定义一个缓存名，然后在 fetch 生命周期事件中去检查缓存是否存在，若存在则返回缓存，否则发送网络请求并将结果存入缓存。
-- -------------------- ---- -------
-- ---
----- ---------- - -----------
-- - ------- ----------------
-------------------------------- ----- -- -
----------------
-----------------------
----------- -- --------------
--------------
--------------
---
--
---
-- - ----- -----------------------------------------
------------------------------ ----- -- -
------------------
---------------------------
-------------- -- -
-- ---------- -
------ ---------
-
------ --------------------
-------------- -- -
-- ------------------------
------ -----------------------
----------- -- -
------------------------ ------------------
------ ---------
---
---
--
--
---IndexedDB
IndexedDB 是浏览器提供的一种本地存储方案，可以用来保存持久化数据、缓存数据等。在 PWA 中，如果我们需要保存大量的数据并在离线状态下使用，使用 IndexedDB 将是一个不错的选择。
打开数据库
在使用 IndexedDB 之前，需要先打开数据库。使用 indexedDB.open() 方法可以打开一个数据库，如果该数据库不存在，则会创建一个新的数据库。
// 打开一个名为 my-db 的 IndexedDB 数据库，第二个可选参数为数据库的版本号
const request = indexedDB.open('my-db', 1);打开数据库时，有一个比较重要的概念——版本号。每次打开数据库时，如果数据库的版本号发生了变化，就会触发我们可以监听的 upgrade 事件，通过监听 upgrade 事件，我们可以更新数据库结构、移动数据等，使得 IndexedDB 可以和我们的应用更好地配合使用。
-- -------------------- ---- ------- -- ------------ ----------------------- - ----- -- - ----- -- - -------------------- -- -------- ----- ----------- - ----------------------------- - -------- ---- --- -- -- ----------- ----------------- - ----- -- - ----- -- - -------------------- --
操作数据
在打开数据库之后，我们可以通过事务操作数据库，在事务中可以进行增删改查等操作。
-- -------------------- ---- -------
----- ------- - ----------------------- ---
-- -----------
----------------- - ----- -- -
----- -- - --------------------
-- --------------------------------
----- ----------- - ----------------------- -------------
-- --------------------
----- ----------- - ---------------------------------
----- ---- - - --- -- ----- ------ --
----- ------- - ----------------------
----------------- - -- -- -
--------------------
--
--响应式设计
在 PWA 中，为了能够实现类似于原生应用的体验，响应式设计变得非常重要。响应式设计可以让我们的应用更好地适应不同的设备和屏幕大小。
在 PWA 中，我们可以使用 CSS 的 Media Queries（媒体查询）等技术来实现响应式设计。也可以使用框架比如 Bootstrap 进行开发。
-- -------------------- ---- -------
---- -- --------- ---- ---
----- ---------------- -------------------------------------------------------------------------------------- --
---- ------------------
---- ------------
---- --------------- -------- ----------
---- -- ---
------
------
------总结
以上仅是 PWA 中的一些 JS 开发技巧，当然还有很多其他方面的内容，例如推送通知、Web App Manifest 等等。希望本文可以为读者带来一些参考和帮助，使得大家可以更好地开发 PWA。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471dd2a968c7c53b0fc7263