前言
PWA (Progressive Web Application) 是一种新型的 web 应用模式，可以实现像原生应用一样的体验。前端开发人员可以利用 service worker 等技术来使网站具备离线访问、推送通知等特性。然而，在实际开发过程中我们也会遇到各种坑点，本文将一一探究。
缓存策略
前端缓存
前端缓存需要谨慎使用，不当的缓存策略可能导致缓存“过度”，使用户看到的是旧页面而不是更新后的内容。为了避免这种情况，我们可以参考以下几种策略：
- 立即缓存：可以在 service worker 安装阶段就将资源缓存，这样用户就可以立即访问到更新后的页面。
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(FILES_TO_CACHE))
.then(() => self.skipWaiting())
);
});- 懒惰缓存：该策略可以将一些不经常访问的资源延迟缓存，但这样可能会增加后续的请求次数。
-- -------------------- ---- -------
------------------------------ ----- -- -
-- ----------------------------------- -- --------------------------------- -- ---------------------------------- -
------------------
---------------------------
-------------- -- -
-- ---------- -
------ ---------
- ---- -
------ ------------------------------------ -- -
------ ---------------------------------------- -- -
------------------------ ------------------
------ ---------
---
---
-
--
--
-
---后端缓存
后端缓存也是实现 PWA 离线缓存的一种方式。我们可以使用例如 LocalStorage、IndexedDB 等数据库系统，将网站上最新的数据存储在本地，这样即使用户处于离线状态，也可以查看之前的数据。
离线页面（Offline page）
离线页面是指特定页面，在用户离线的情况下，可以以特定方式进行缓存的页面。离线页面是 Progressive Web App 中必不可少的一环。
PWA 使用离线页面的方法是在 service worker 安装阶段进行缓存：
-- -------------------- ---- -------
-------------------------------- --------------- -
---------------- -- --------------------------------------- ------
----------------------------------------------- - -- ------------
------ --------------
--------------- -- --------------
-------------------------
--------------------
----------------------
---
--
--
---当用户离线时，通过 service worker 来通知离线页面，告诉用户当前网站不可用。
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
--------------------------------------------------- - -- -----------------
------ -------- -- -------------------------------------------- - -- ------------
------
--------------------
--------------------- -
------------------------ ------------------
--
-------------------- -
----------------- -- -----
---
------ ---------
---
------------------- -
------ -----------------------------
--
--
---安装 PWA
PWA 的安装分为两个步骤，一是什么时刻提示用户安装，二是如何实现安装功能。
我们可以在 service worker 的安装过程中添加一个安装按钮，用户可以点击该按钮进行安装。
-- -------------------- ---- -------
-------------------------------- --------------- -
----------------
----------------------------------------------- -
------ --------------
----------------
-------------------------
--------------------
----------------------
---
----------------------------
--
--------------------------------- --------------- -
--------------------------------------
---
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- -------------------------------------------- -
----------------------------------------------- -
------------------------ ------------------
---
------ ---------
---
------------------- -
------ -----------------------------
--
--
---
-------------------------------------------- --------------- -
-----------------------
--- --- - ---------------------------------
------------- - --- -----
----------------------------- ---------- -
---------------
---
-------------------------------
---总结
PWA 的开发虽然坑点较多，但凭借其离线缓存、推送通知等特性，已经成为现代 web 应用开发的不二选择。在实际开发过程中，我们需要注意前端缓存、后端缓存和离线页面的缓存策略，并且实现 PWA 的安装功能，让用户更加方便地使用我们的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df26b6f6b2d6eab3a5341e