前言
随着移动设备的普及，越来越多的网站开始采用 PWA 技术，从而提供更加优秀的用户体验。其中，PWA 的离线缓存功能是许多网站所关注的焦点，因为它可以帮助用户在网络环境不好或无法连接互联网时，仍能够正常浏览网站内容。但是，在 iOS 中，PWA 的离线缓存功能却存在着一些问题，本文将带领读者深入剖析这些问题，并提供一些解决方案。
PWA 离线缓存概述
在了解 PWA 离线缓存在 iOS 中存在的问题之前，我们先来略过一下 PWA 离线缓存的基本操作。
Service Worker
Service Worker 是 PWA 离线缓存的核心技术，它是一种运行在浏览器后台的线程，能够拦截和处理网络请求。通过 Service Worker，我们可以将网站所需的静态资源缓存到本地，从而实现离线访问。
Cache API
Cache API 是 Service Worker 中提供的 API，它用于管理缓存以及从缓存中提取数据。通过 Cache API，我们可以将需要离线缓存的资源放在指定的缓存中，并在需要访问这些资源时，从缓存中提取。
Manifest
Manifest 是 PWA 的一种配置文件，用于定义应用程序的元数据。其中，最重要的是指定网站的主页和其他需要缓存的文件。在该文件中指定的文件会自动被缓存，从而实现离线访问。
PWA 离线缓存存在的问题
虽然 PWA 离线缓存提供了很好的用户体验，但在 iOS 中却存在一些问题。如果只是简单地使用上述 PWA 离线缓存的方法，便会面临以下问题：
iOS 中的 Service Worker 不支持离线缓存
在 iOS 中，Service Worker 的缓存机制被 Safari 禁用，使得我们不能像在其它浏览器中那样简单的使用 Service Worker 实现PWA 离线缓存功能。
Manifest 配置有限制
在 iOS 中，只有在添加到主屏幕的 Web 应用程序才能使用 Manifest 文件。而 Safari 中的网站是不能使用该文件。这意味着即使在主屏幕下添加了 Web 应用程序，也不能完全支持 PWA 离线缓存。
iOS 11 中的 Safari 对文件大小和数量有限制
在 iOS 11 中，Safari 对缓存中的文件大小和数量有一定限制，当缓存的数据量达到一定程度时，会自动清理缓存。这使得在 iOS 中使用 PWA 离线缓存时，需要仔细考虑缓存中的文件大小和数量，以确保适当的清理策略。
解决方案
针对上述 iOS 中的问题，我们可以采用一些技术手段解决。
使用 App Shell 架构
App Shell 架构是一种 PWA 的最佳实践。该架构在 Service Worker 支持的浏览器中如 Chrome、Firefox 中表现良好，而在 iOS 中，也可以通过使用App Shell解决上述问题。
App Shell是一个包含网站最常用的静态资源的“骨架”，这些资源包括 CSS、JavaScript 和 HTML。在应用程序初始化时，首先缓存 Shell 架构中的所有资源。而用户在离线时，也可以通过这些资源查看应用程序的外观和布局。
具体来说，App Shell 可以分为三个部分：
- 浏览器加载的 Shell 文件，包括 html、css 和 js 等；
- 动态数据，通过 Ajax 获取；
- 静态资源，如图片、字体等。
缓存 App Shell 可以通过 Service Worker 实现，但在 iOS 中，需要通过 Web App Manifest 文件定义 App Shell 的文件列表。当用户第一次打开站点时，会缓存所列出的文件。这些文件在下次访问时将被从缓存中提取，从而加速应用程序的加载速度。
使用 Workbox
Workbox 是 Google 推出的一个开源库，用于简化 Web 应用程序的离线缓存。Workbox 解决的问题包括缓存处理、网页离线状态下的响应、服务工作线程的生命周期以及更新资源等。它提供了一些强大的功能，可以轻松地添加到现有项目中，并快速实现 PWA 离线缓存。
避免缓存中出现大文件
在 iOS 11 中，Safari 对缓存中的文件大小进行了限制，当文件过大时，缓存会自动清理。因此，在进行 PWA 缓存时，我们需要注意避免缓存中出现大文件。如果确实需要缓存一些较大的文件，可以将它们划分成多个小文件进行缓存。
总结
本文介绍了 PWA 离线缓存技术及在 iOS 中的存在问题。针对这些问题，我们可以采用 App Shell 架构和 Workbox 等技术手段来解决。同时，我们还需要避免使用过大的文件，以确保在 iOS 中缓存正常工作。通过本文的学习，希望读者能够更好地理解 PWA 离线缓存技术，在实践中运用得更加流畅高效。
// javascriptcn.com 代码示例
const PRECACHE_NAME = "precache-v1";
const RUNTIME_NAME = "runtime";
const PRECACHE_URLS = [
"/",
"/index.html",
"/about.html",
"/css/style.css",
"/js/main.js"
];
self.addEventListener("install", function(event) {
event.waitUntil(
caches.open(PRECACHE_NAME)
.then(function(cache) {
return cache.addAll(PRECACHE_URLS);
})
);
});
self.addEventListener("activate", function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames
.filter(function(cacheName) {
return cacheName != PRECACHE_NAME && cacheName != RUNTIME_NAME;
})
.map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});
self.addEventListener("fetch", function(event) {
if (event.request.url.startsWith(self.location.origin)) {
event.respondWith(
caches.match(event.request).then(function(cachedResponse) {
if (cachedResponse) {
return cachedResponse;
}
return caches.open(RUNTIME_NAME).then(function(cache) {
return fetch(event.request).then(function(response) {
return cache.put(event.request, response.clone()).then(function() {
return response;
});
});
});
})
);
}
});以上代码展示了如何使用 Service Work 缓存一些静态资源。
// javascriptcn.com 代码示例
{
"name": "myapp",
"short_name": "myapp",
"icons": [{
"src": "images/icon48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "images/icon72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icon96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icon144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/icon192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icon512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#fff"
}以上代码展示了如何定义 Web App Manifest 中用到的数据。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652bee247d4982a6ebdca2a9