我有一个使用 iOS 11.2 构建的 Progressive Web App。我可以确认该应用程序在 11.3 之前按预期工作 100%。11.3 中的某些东西破坏了我的代码。当我在更新 index.php 后启动应用程序时,它加载了最新版本,现在它不...
它曾经在此更新之前自动更新,现在它继续使用相同的文件(在缓存中?)。但是我在 htaccess 中设置了 index.php 的无缓存策略。因此,在 11.2 上,当我打开应用程序时,它会获取最新的 index.php,但现在即使我在 safari 中打开页面,它也只会保留旧版本。更新的唯一方法是清除 Safari 设置中的网站数据。清单和服务工作人员在 iOS<11.3、android 和 PC 上正确下载和更新我的应用程序,但在 iOS>=11.3 上不正确。
推动新的服务人员重新加载内容也不起作用......
.htaccess 缓存策略
<Files index.php>
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
</Files>
我的清单包含在我的元标记上方
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="My App">
<link rel="apple-touch-icon" href="media/images/app_icon_256.png">
我的清单
{
"name": "My App",
"short_name": "My App",
"icons": [
{
"src": "media/images/app_icon_192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "media/images/app_icon_256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "media/images/app_icon_384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "media/images/app_icon_512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "index.php",
"display": "standalone",
"background_color": "#2e4668",
"theme_color": "#d0a331"
}
我注意到 PWA 现在从清单而不是元标记中获取它的标题?
我的服务人员看起来像这样......
var CACHE_NAME = 'toh-app-cache-1-0056';
var expectedCaches = [CACHE_NAME];
var urlsToCache = [
"css/bootstrap.min.css",
"css/fontawesome.min.css",
"js/jquery-3.3.1.min.js",
"js/popper.min.js",
"js/bootstrap.min.js",
"media/images/home.jpg",
"media/images/toh_logo.png",
"media/images/download/add-to-homescreen-android.jpg",
"media/images/download/add-to-homescreen-apple.jpg",
];
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys => Promise.all(
keys.map(key => {
if (!expectedCaches.includes(key)) {
return caches.delete(key);
}
})
)).then(() => {
console.log('New cahce now ready to handle fetches!');
})
);
});
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
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) {
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
var responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});