Vue2 PWA 不适用于 iOS 16.4 设备

Question

我们的 vue2 PWA 不适用于 iOS 16.4 设备。仅显示白色屏幕。该应用程序适用于旧的 ios 版本以及 chrome、firefox 等。

Answer 1

自从升级到 iOS 16.4.1（从 iOS 15 开始）后，我遇到了完全相同的问题。

事实证明，在我的 iOS 设备上的 屏幕时间 设置中的 内容限制 中禁用 Web 内容限制 后，PWA 再次工作。我可以在多个设备上可靠地重现它。

这些内容限制对我来说已经不是第一次在绝对不应该受到这些过滤器影响的事情上给我带来问题了。

Answer 2

iOS 16.4 好像有bug。对我来说，失败点是 event.respondWith。如果您只是返回提取 - 即使从缓存中也可以正常工作。问题是您失去了离线功能。我的解决方案（使用 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);
      })
    );
  }
});

然后在前端：

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 现在似乎确实被打破了。

Answer 3

另一个不理想的解决方法，如果您不能或不想禁用 Web 内容限制。

转到设置 -> Safari -> 高级 -> 实验功能：然后禁用 Service Workers。

这解决了我面临问题的两个不相关网站上的问题。

Answer 4

我们遇到了完全相同的问题（白屏 + 当“Web 内容限制”处于活动状态时） Apple 今天发布了一个新的更新，看起来他们修复了它。