介绍
PWA，即渐进式 Web 应用，是一种基于 Web 技术的应用程序，它具有类似于原生应用的功能体验，同时不需要借助 AppStore 或 Google Play 等应用商店进行安装和更新，只需要通过浏览器访问即可使用。而 Chrome 浏览器是目前主流的支持 PWA 的浏览器。
然而，PWA 应用在 Chrome 浏览器上也存在一些问题。其中之一是本地化资源加载失败的问题，即在某些情况下，Chrome 浏览器无法正确加载应用所需的本地化资源导致应用无法正常使用。
本文将介绍这个问题的原因以及解决方法，如果你在开发 PWA 应用时遇到了这个问题，本文将有所指导参考价值。
问题原因
在 PWA 应用中，经常需要加载大量的本地化资源，如语言包、字体等。由于 Chrome 浏览器采用了一种称为“预获取”的策略，在浏览器空闲时会自动加载页面中所有资源及相关资源，并将这些资源缓存起来。这种策略可以提高应用程序的性能和加载速度。
然而，当浏览器缓存的资源中没有应用需要的本地化资源时，Chrome 浏览器只会检查这些资源的大小和最后修改时间，而没有检查它们的内容是否已更改。这意味着，即使你已经更新了本地化资源的内容，Chrome 仍然会使用缓存中的资源，而不是重新下载最新版本的资源。
因此，在某些情况下，应用程序将无法正确加载所需的本地化资源，导致应用程序无法正常运行。
解决方法
解决 PWA 应用程序在 Chrome 浏览器上出现本地化资源加载失败的问题，我们需要采取以下三个步骤：
步骤一：为本地化资源设置正确的 Header
在 HTTP 请求头中设置适当的缓存控制和验证，可以告诉浏览器在什么情况下需要重新下载资源。例如，在服务器端为本地化资源添加以下 HTTP 响应头：
Cache-Control: no-cache, no-store, must-revalidate Pragma: no-cache Expires: 0
这表示该资源不应该被缓存。当浏览器请求这个资源时，服务器将每次发送一个新的资源给浏览器，而不是从缓存中读取。
步骤二：更新 Service Worker 逻辑
PWA 应用程序通常会使用 Service Worker 来进行资源的缓存和管理。当应用程序需要的本地化资源发生更改时，我们需要在 Service Worker 中添加逻辑，以便它能够检测到这些更改并更新缓存。
以下是一个示例代码片段，它演示了如何使用 Service Worker 来处理本地化资源的缓存和更新：
-- -------------------- ---- -------
-- - ------- ------ -------
----- ---------- - ---------------
----- ----------- - -
----
--------------
--------------
----------------
-------------------
------------------
--
-------------------------------- ----- -- -
-- ----------
----------------
------
-----------------
----------- -- --------------------------
-------- -- -------------------
--
---
-- - ------- ------ -------
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ----------------
-- ---------- -
------ ---------
-
----- ------------ - ----------------------
------ --------------------------------- -- -
-- -
--------- --
--------------- --- --- --
------------- --- ------- --
---------------------------------------
- -
------ ---------
-
----- --------------- - -----------------
---------------------------------- -- -
------------------------ -----------------
---
------ ---------
---
--
--
---
-- - ------- ------ -------
--------------------------------- ----- -- -
----------------
------
-------
---------------- -- -
------ ------------
----------
----------------- -- --------- --- -----------
-------------- -- -
------ -------------------------
--
--
--
-------- -- -
-------------------------- --- ----- -- ------ -----------
--
--
---在这个示例中，我们首先定义了需要缓存的本地化资源的 URL，然后在 Service Worker 的 install 事件中，缓存了这些资源。在 fetch 事件中，我们检查本地缓存中是否有请求的资源，如果有，则返回该资源。如果没有，则从网络中获取该资源，并将其添加到缓存中。在 activate 事件中，我们删除无用的缓存。
步骤三：强制更新 PWA 应用
最后，为了确保所有用户都可以访问最新版本的 PWA 应用程序，我们还需要强制更新应用程序。这可以通过在 HTML 页面中添加以下代码来实现：
-- -------------------- ---- -------
--------
------------------------------- -- -- -
-- ---------------------
------------------------------------------
-------- -- ------------------------------
------------------ -- -
----------------------
---
---
---------此代码将在页面加载完成时运行，它注册了 Service Worker，并在其已经成功注册时强制更新 PWA 应用程序。
结论
本文介绍了 PWA 应用在 Chrome 浏览器上出现本地化资源加载失败的原因以及解决方法，涵盖了为本地化资源设置正确的 Header、更新 Service Worker 逻辑、强制更新 PWA 应用程序。希望这篇文章对你在开发 PWA 应用过程中出现的问题有所帮助，同时也提醒大家，在进行 PWA 应用开发时，要考虑到各种因素可能带来的影响，以确保应用程序的可靠性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671a7d619babaf620fa318fa