前言
PWA（Progressive Web Apps），是一种基于 Web 技术构建的应用，它结合了 Web 和 Native 应用的优点，让用户可以在网页浏览器中获得类似于原生 app 的体验。因为 PWA 是一种基于 Web 技术，所以在开发中具有很高的跨平台性，但同时也存在着一些局限性，那就是怎么处理应用更新的问题。本文将会讲解 PWA 应用如何处理应用更新。
在 PWA 应用中，由于其是基于 Web 技术构建的，所以浏览器具有离线缓存的功能，而且离线缓存可以帮助 PWA 对上游服务进行响应速度和可用性优化，以此来提升用户的使用体验和应用的性能。但是，由于 PWA 应用需要手动实现应用更新的功能，所以当开发者更新应用或推出新的版本时，如果用户不刷新页面或者访问过去的缓存，就无法体验到更新后的应用。
第一种更新方式：手动刷新
当你更新了你的 PWA 应用并且想要让用户使用新版本的应用，正确的做法是通过 manifest 文件来告诉浏览器，有一个新版本可用，并提示用户即可。
-
------- --------
------------- --------
------------ ---------------
-------- -----
---------- -------------
-------------- ----------
------------------- ----------
-------- -
-
------ ------------
-------- ----------
------- -----------
-
--
---------------- -
------ ---------
--
------------------------------ ------
----------------------- --
-当你更新了你的 PWA 应用程序并更新了 manifest 文件时，可以在新版本的 SW（service worker）中嵌入以下代码，以告知新版本可用：
-------------------------------- --------------- - ------------------- ------------- ----- ----------------------- -- --- --------------------------------- --------------- - ------------------------ -------------------------------------- ------------------------ -------- ---
在新的 Service Worker 的 activate 事件处理程序中，你需要调用 clients.claim() 方法来激活新的 Service Worker。
上述代码片段告诉浏览器有一个新版本可用。但如果用户没有立即访问应用程序或者关闭了该应用程序，则浏览器不会立即加载并使用新的 Service Worker。
在这种情况下，你可以通过使用 “更新” 通知和启发式缓存来通知用户更新可用。
你可以在 Service Worker 中，编写以下代码，向用户展示更新通知：
-------------------------------- --------------- -
------------------- -------------------- ------
---
--------------------------------- --------------- -
-------------------------------------------------- ------
---
------------------------------ --------------- -
------------------
--------------------------------------------------- - -------------------
-- ---------- -
------ ---------
-
--- ------------ - ---------------------- -----------------------
------ ------------------------------------------- -
------------ -- --------------- --- ---- -
------ ---------
-
--- --------------- - ----------------- ----------------------------
-----------------
--------------------- -
------------------------ -----------------
---
------ ---------
---
--
--
---
-------------------------------- --------------- -
-- ------------------ --- -------------- -
-------------------
-
---在 Service Worker 中加入这些代码后，当应用更新时，这些代码将向用户发出更新通知。如果用户选择更新应用，应用将从服务器上直接下载新版本。
第二种更新方式：启发式缓存
使用启发式缓存可以让你的 PWA 应用程序在更快地更新的同时也能保持较优的性能。为了保持 Web 应用程序的性能，用户可以启用启发式缓存来缓存应用程序的静态 Web 资源。启发式缓存使用版本号，并将新版本缓存到新的缓存中。
下面是启发式缓存的代码片段：
----- ---------- - ------------------
-------------------------------- ------------- -
---------------- ------- ------ -- ----- -------------
---------------------------------------------------------- -
------ --------------
----
---------------
--------------
----------
---
----
---
------------------------------ ------------- -
---------------- ------- ------ -- ------- --- ---------
----------------------------------------
-----------------------------------
---
-------- ------------------ -
------ -------------------------------------------- -
------ -------------------------------------------- -
------ -------- -- ---------------
---
---
-
-------- --------------- -
------ -------------------------------------------- -
------ -------------------------------------- -
------ ------------------ --------------------------------- -
------ ---------
---
---
---
-上述代码片段使用了 Cache API，首先在 Service Worker 中开启启发式缓存，然后缓存应用所需要的 Web 资源，并且在缓存已存在时，请求的 Web 资源可以从缓存中获取。
当你想更新你的 PWA 应用程序时，如果一个新版本可用，你可以为该新版本分配一个新的版本号。
你可以打开新版本的 Service Worker 并添加以下代码：
----- ---------- - ------------------
--------------------------------- ------------- -
-------------------------------------------------- -
------ ------------------------------------- -
-- ---- --- ----------- -
---------------- --- ----- -- ----- -----------
------ -------------------
-
----
----
------ --------------------- -------- --------------- ----- ------- ------
---你可以通过递增缓存名称的方式来启用不同的缓存版本。在新版本的 Service Worker 中，你将有机会删除旧的缓存。
以上就是 PWA 应用程序如何处理应用更新的方式，开发者可以选择手动刷新或启发式缓存更新，然后再联系用户更新应用程序。这些方法是从不同角度为 PWA 应用程序提供更好的用户体验的措施。
总结
在本文中，我们介绍了 PWA 应用程序如何处理应用更新的过程。在 PWA 应用程序中，应用程序更新需要经过手动刷新或者启发式缓存的方式来完成。手动刷新将会更好的提醒用户进行应用程序的更新，而且可以在更新过程中很好地保留应用程序性能；启发式缓存能够在更快地更新应用程序的同时保证良好的性能。
参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654dfb277d4982a6eb753c66