我们的vue2 PWA不能在iOS 16.4设备上工作。只有一个白色的屏幕显示出来。该应用程序可以在较旧的ios版本以及chrome, firefox等中使用。
从iOS 15升级到iOS 16.4.1后，我也遇到了同样的问题。
在我的iOS设备的屏幕时间设置的内容限制中禁用Web内容限制后，PWA再次工作。我可以在多个设备上可靠地复制这个。
这些内容限制给我带来的问题已经不是第一次了，而这些内容绝对不应该受到这些过滤器的影响。
我在iOS 16.4.1, iOS 16.5和macOS Safari 16.5上遇到了非常类似的问题。一开始我还以为是服务工作者。删除它似乎已经解决了这个问题，但经过更多的测试，我意识到它不工作，仍然显示空白屏幕。
我使用离子5。，所以下面的可能不适用，但仍然是一个很好的提示…
虽然我从来没有真正弄清楚根本问题，升级@ionic-native/core,@ionic/vue和@ionic/vue-router到最新的minor 5。X版本为我们修复了这个问题。我建议对Ionic包进行一个小的更新，看看是否有帮助!
iOS 16.4似乎有一个bug。对我来说，失败的意义在于事件。如果你只是返回取回，即使是从缓存中，它也能工作得很好。这样做的问题是你失去了离线能力。我的解决方案(使用injectManifest):
service-worker.js:
const assetObjectArr = self.__WB_MANIFEST;
function isIterable(obj) {
if (!obj) {
return false;
}
return typeof obj[Symbol.iterator] === 'function';
}
const cacheName = 'MyCacheV1';
const assets = [];
if (isIterable(assetObjectArr)) {
for (const asset of assetObjectArr) {
assets.push(asset.url);
}
}
let isIOS16 = true;
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
if (event.data && event.data.type === 'isIOS16') {
isIOS16 = event.data.isIOS16;
}
});
self.addEventListener('install', (installEvent) => {
// Delete old caches
caches.delete(cacheName);
// Add all assets to the cache
installEvent.waitUntil(
caches.open(cacheName).then((cache) => {
cache.addAll(assets);
})
);
});
self.addEventListener('fetch', function (event) {
if (isIOS16) {
caches.match(event.request).then(function (response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
});
} else {
event.respondWith(
caches.match(event.request).then(function (response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
})
);
}
});
Then on front end:
function checkForIOS16() {
appVersion.value = navigator.appVersion;
let isIOS16 =
navigator.appVersion.includes('Version/16.4') &&
/iPhone/.test(navigator.userAgent);
navigator.serviceWorker.ready.then((registration) => {
navigator.serviceWorker.controller.postMessage({
type: 'isIOS16',
isIOS16
});
});
}
这为所有非iOS iPhone 16.4用户保留了离线功能。显然，这只是一个变通办法。如果有人有更好的解决方案，那就太好了!
编辑:这个解决方案将工作大约一天，然后失败。现在看来，iOS 16.4的PWA似乎已经坏了。
如果你不能或不想禁用网页内容限制，这是另一个不理想的解决方法。
进入设置->Safari→先进的→实验功能:然后禁用Service Workers.
这解决了我在两个不相关的网站上遇到的问题。
我们将我们的设备更新到最新的16.5测试版4版本，到目前为止，在我们的测试中，这似乎已经为我们解决了问题。
我在iOS 16.5和iPadOS 16.5上仍然有这个问题。我也能够在我的Mac上复制它，而不是一个白页，我得到一个关于Event的错误。respondWith(内部错误)没有任何调试信息。但它是超级随机发生的，看起来像是注册或获取的时间问题。