在移动互联网时代，网页性能及用户体验一直是每个网站和开发者需要考虑的核心问题。而 PWA 技术，即渐进式 Web 应用程序，可以帮助我们更好地解决这些问题。其中，缓存策略及优化是 PWA 技术的一项核心内容。本文将重点探讨使用 PWA 技术实现安卓端缓存控制问题，并带有实际示例代码。

关于 PWA 技术

PWA，全称 Progressive Web Apps，中文意为渐进式 Web 应用程序，是 2015 年 Google 工程师提出的一项全新技术，旨在提高 Web 应用程序的可靠性、性能和用户体验。它使用现代 Web 浏览器的特性将 Web 应用程序变成类似原生应用程序的体验，可以离线运行、推送消息、访问硬件设备等。

PWA 的设计理念源于以下四个方面：

可靠：PWA 要求在任何情况下都能被访问，即使在网络条件差的情况下，也要离线可用。
快速：应用程序必须要快速响应用户的操作，使用流畅且具有 Native App 的效果。
安全：应用程序应该通过 HTTPS 或 TLS 安全协议来保护用户的数据。
可安装：应用程序必须满足一定条件，并在用户同意的情况下，可以通过推荐方式下载到手机桌面上，并且不消耗用户的存储空间。

安卓强制缓存问题及解决方法

在 PWA 中，缓存是一项重要的优化技术，有助于提高应用程序的性能和速度。但在安卓中，由于强制缓存机制的存在，缓存控制会变得更加困难。客户端的缓存控制与服务器端的响应头息息相关，一个不慎就会导致资源无法更新，影响用户的体验。下面就让我们针对这个问题，探讨如何使用 PWA 实现更好的缓存控制。

了解 HTTP 缓存

在讨论如何使用 PWA 框架解决缓存控制的问题之前，先需要了解一下 HTTP 缓存的相关知识。在 HTTP 协议中，缓存是指当客户端请求服务器上的某个资源时，如果服务器上的该资源没有被修改，那么客户端可以使用其本地缓存副本，避免重复访问服务器。缓存可以优化网页的响应时间，减少带宽消耗。

HTTP 缓存可以分为两种：

强制缓存：通过设置 Expires 或 Cache-Control 来指定缓存时间，在缓存时间内，浏览器不会再向服务器发起请求，而是直接从本地缓存获取资源。
协商缓存：通过设置 Last-Modified 和 ETag 来控制缓存，当客户端请求资源时，先向服务器请求其缓存标识，如果标识未改变，则返回 304 状态码，让浏览器从本地缓存中获取资源。

PWA 中的缓存

在 PWA 中，使用 Service Worker 实现缓存控制，可通过如下方式实现：

使用 cache-storage 缓存 Web 资源: 通过缓存 HTML、CSS、JavaScript 等文件，可以使 PWA 首次打开更快，同时缓存成功后可以离线访问。
使用 index-db 异步保存数据：通过使用 IndexedDB，可以异步保存数据来改善离线体验。

解决安卓强制缓存问题

安卓浏览器会对某些资源类型（如图片、CSS 等）默认强制缓存，如果没有正确配置缓存策略，就会导致无法更新。所以，我们需要针对这种情况优化相关的缓存策略。

指定资源类型

在网页中，可以通过设置 Expires 或 Cache-Control 来控制缓存时间。但是，在实际开发中并不是所有资源都需要缓存的，因此我们需要在 Service Worker 中指定要缓存的资源类型。比如下面这段代码，就指定了一些图片、CSS、JS 文件需要进行缓存：

// javascriptcn.com 代码示例
var CACHE_FILES = [
    '/',
    '/index.html',
    '/main.js',
    '/app.css',
    '/images/logo.png',
    '/fonts/icon.ttf'
];

self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('app-cache').then(function(cache) {
            return cache.addAll(CACHE_FILES);
        })
    );
});

配置响应头

在服务器端，可以通过设置响应头 Cache-Control 或 Expires 来控制浏览器的缓存，不同的响应头需要不同的配置策略。

Expires

Expires 通过设置过期时间来控制缓存，例如：

Expires: Mon, 04 Dec 2023 05:00:00 GMT

这份响应头告诉浏览器缓存的有效期是 2023 年 12 月 4 日凌晨 5 点。

Cache-Control

Cache-Control 中有若干属性可以指定，如下：

max-age：表示缓存时长，单位是秒；
no-cache：指示浏览器可以缓存，但在每次请求时都要向服务器检查一遍；
no-store：禁止缓存；

在 Service Worker 中，我们可以对请求设置 Cache-Control 来避免浏览器的强制缓存。下面示例代码：

// javascriptcn.com 代码示例
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                return response;
            }

            var fetchRequest = event.request.clone();

            return fetch(fetchRequest).then(function(response) {
                var responseToCache = response.clone();

                if (response.status === 200) {
                    // 设置 Cache-Control
                    var headers = new Headers(response.headers);
                    headers.append('Cache-Control', 'no-cache');

                    var cacheResponse = new Response(response.body, {
                        status: response.status,
                        statusText: response.statusText,
                        headers: headers
                    });

                    caches.open(cacheName).then(function(cache) {
                        cache.put(event.request, cacheResponse);
                    });
                }

                return response;
            });
        })
    );
});

在上面代码中，我们判断通过 cache.match 查找本地缓存，如果有，直接返回，否则发送一个资源请求，最后将资源返回，并设置缓存控制 Cache-Control，将结果缓存起来。

总结

本文主要介绍了 PWA 缓存控制及优化相关的知识和技术，着重探讨了如何使用 Service Worker 解决安卓浏览器强制缓存的问题，包括了指定资源类型、配置响应头等技术方案。这些技术可以帮助我们提高 PWA 应用的性能和体验，在移动互联网时代中占据更大的市场份额。

参考资料

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652cce2b7d4982a6ebe5e256

PWA 技术实战 | 解决安卓强制缓存问题，让缓存更智能