随着移动设备逐渐成为主流的访问方式，用户对于图片的需求越来越高，而不同设备对于图片的需求也不尽相同。比如在网站上访问，用户可能会使用不同的设备，如手机、平板、笔记本等，甚至是不同的分辨率和屏幕大小。这就意味着我们需要为不同设备提供不同尺寸的图片，以保证用户体验和页面性能。而 PWA 又是如何解决这个问题的呢？本文将详细介绍 PWA 如何解决多种尺寸异构图片问题，以及如何进行实践。
PWA 简介
PWA（Progressive Web Apps）是什么？很简单，它是一种新的应用程序模型，可以在桌面和移动设备上提供与原生应用程序类似的功能和用户体验，但是由于它是基于 Web 技术构建的，因此不需要用户下载和安装即可访问。同时，PWA 可以像原生应用程序一样脱机运行，数据可以在后台同步更新，并通过推送通知保持用户的参与度和留存率。
图片异构问题
虽然 PWA 可以在桌面和移动设备上提供相似的用户体验，但是不同设备对于图片的需求是不同的，导致我们需要提供多种不同尺寸的图片来适应不同设备。而这些图片可能会在不同的网络条件下呈现，也会影响到页面的性能和用户体验。如何解决这个问题呢？PWA 中的 Service Worker 和 Cache API 提供了常规网络流量不足或者不存在的情况下，可靠的网络解决方案，以实现快速和可靠的页面加载，同时尽可能减少数据和图片的传输量。
Service Workers
Service Worker 是 PWA 的核心技术之一，它是一种在浏览器后台运行的 JavaScript 文件，通过拦截网络请求来给予 Web 应用程序离线能力、推送通知等更多功能。它可以使我们的 Web 应用程序变得更像一个本地应用程序，并可以缓存资源以供在离线情况下提供支持。即使当用户离线时，我们的应用程序也可以在 Service Worker 中提供缓存的内容，使应用程序在用户使用时变得更具响应性和可靠性。
Cache API
Cache API 是 Service Worker 的重要组成部分，它提供了存储和检索响应的能力，因此我们可以在长时间运行的服务工作器中缓存响应，从而提高性能和可靠性。Cache API 支持同步和异步 cache 接口，我们可以将经常访问的文件和数据存储在 Cache 中，以使它们在 Web 应用程序启动时可用。
解决多种尺寸异构图片问题
在建立 PWA 应用程序时，我们可以使用 Service Worker 和 Cache API 实现对多种尺寸异构图片的缓存和管理，从而解决了不同设备对于图片的不同需求问题。具体实现如下：
1. 清单文件
在我们的清单文件中指定我们需要缓存的文件，并定义缓存名称。例如：
-- -------------------- ---- -------
----- ---------- - -----------
----- ---------- - -
----
-------------------
-------------------
-----------------------------
--------------------------------
-----------------------------
--
-- -- --- ------
-------------------------------- --------------- -
----------------
-----------------------
--------------------- -
------ -------------------------
--
--
---上面的代码定义了需要缓存的文件，包括 main.css、main.js 和三种不同尺寸的图片，分别为 low_res.jpg 、medium_res.jpg 和 high_res.jpg。
2. Service Worker
让我们为构建 Service Worker 并定义请求拦截符 `,此符号表示将拦截请求并查看在给定请求转发到网络之前，是否已经将文件存储到缓存。如果是，则从缓存中返回响应。如果没有，则首先从网络获取，然后将响应存储到缓存中以供将来使用。代码如下：
-- -------------------- ---- -------
-- -----------------
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
------ ---------
-
--- ------------ - ----------------------
------ -------------------------
------------------ -
------------ -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
--- --------------- - -----------------
-----------------------
--------------------- -
------------------------ -----------------
---
------ ---------
-
--
--
--
---3. 解决多种尺寸异构图片问题
现在我们已经有了 Service Worker 和 Cache API，可以开始处理多种尺寸异构图片问题了。我们需要在 Service Worker 中定义针对不同屏幕大小和像素密度的缩略图和全尺寸图。我们可以通过采用响应适应设计模式至少为两种不同的图片版本来解决这个问题。
-- -------------------- ---- -------
-- - ------- ------ --------------
----- ---------- - -
- ------ ---- ------- ---- ----- ----------------------------- ----- ------- --
- ------ ---- ------- ---- ----- -------------------------------- ----- -------- --
- ------ ----- ------- ---- ----- ------------------------------ ----- ------- -
--
-------------------
-------------------------------- --------------- -
-- -------------- --- --------- -
----------------------------
-
---
-- -----------------------------
-------- ------------------ -
-----------------------
--------------------- -
------------------------ -- -
--- --- - -----------
--- ----- - ------------
--- ------ - -------------
-- ----- --- -------- -
----- - ---------------------- - ---
------ - ----------------------- - ---
- ---- -- ----- --- -------- -
----- - ----------- - --
------ - ------------ - --
-
---------------------------------------- -
-- ---------- -
----------------------------------- -
--- --------- - --------------------------
--- --- - --- --------
------- - ----------
---------- - ---------- -
--- ------ - ---------------------------------
------------ - ------
------------- - -------
--- --- - ------------------------
------------------ -- -- ------ --------
--- ------- - -------------------
--- ----------- - -----------------------
--- ------ - ----------------------- - ---- - -----
--- ------- - --- --------------------------
-------------------------------- --------------------
--- --------------- - --- --------------------- -
------- ----
----------- -----
-------- -------
---
----------------- -----------------
--
---
-
---
---
---
-
-- - ---- --- -------- ---- ---
-------- ---------------------- -
--- ----- - ------------------- ---- - -----------------------------
-- --------------------------- --- --- -
--- ---- - --------------- - - ------------ ----- - --- --------------
---------- -
-------- - -------------------
-
------ --- ------------- -------------
- ---- -
--- --- - -----------------------------
------ --- ----------- ------ -------
-
-上述代码为我们提供了一种缓存预处理的解决方案。当我们获取缓存中某个图像时，如果不存在与当前设备分辨率匹配的缓存，则将其请求转发到网络，并将其预处理为所需的大小和压缩级别，存储到缓存中以供未来使用。
总结
本文详细介绍了 PWA 如何解决多种尺寸异构图片问题，并通过代码示例演示了如何在 Service Worker 和 Cache API 中进行实践。通过使用 PWA，可以为不同设备提供不同尺寸的图片，并通过 Service Worker 和 Cache API 进行管理和预处理，以克服移动设备对图片的不同需求。在 Web 开发过程中，PWA 不仅提高网页的性能和用户体验，还可以在网络不稳定的情况下始终保持应用程序可用性、可靠性。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ab341968c7c53b065f334