iOS 11.4 上独立模式下的 PWA 问题答案

【问题标题】：Issues with PWA in standalone mode on iOS 11.4iOS 11.4 上独立模式下的 PWA 问题
【发布时间】：2018-07-15 19:23:47
【问题描述】：

我的网络应用在我能找到的所有浏览器中都能正常运行。如果我在 Firefox 和 Chrome 的桌面上安装该应用程序，它在线和离线都可以正常工作。与桌面 Safari 相同。

我的问题在于移动设备上的 Safari。如果我使用浏览器，一切似乎都可以在线或离线工作，没问题。但是，当我将应用程序添加到我的主屏幕时，在独立模式下至少打开一次应用程序（以启动缓存），然后关闭我的网络连接。问题是，当我尝试再次开始使用该应用程序时，我的应用程序内出现了可怕的“无连接”屏幕。

我终其一生都无法弄清楚为什么这不起作用，我正准备把我的电脑扔出窗外。

我目前正在使用workbox-webpack-plugin 中的InjectManifest 方法，以便将工作箱和我的预缓存清单放入我的服务工作者中。

我的清单：

{
  "short_name": "React Notes",
  "name": "React PWA notes",
  "icons": [
    {
      "src": "staticAssets/favicon.png",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/png"
    },
    {
      "src": "staticAssets/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "staticAssets/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "scope":"/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

我的服务人员：

self.__precacheManifest = [].concat(self.__precacheManifest || []);

workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

我的 index.html 上的头

...
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="manifest" href="/manifest.json">
...
<!-- here be apple specific icon stuff -->

我的工作箱 webpack 插件配置

new workboxPlugin.InjectManifest({
  swSrc: './src/sw.js',
  swDest: 'service-worker.js',
  importWorkboxFrom: 'local'
})

我有一半认为它与我的 index.html 或清单有关，但我所做的任何更改都不起作用。

有人知道吗？

【问题讨论】：

尝试在他们的issue tracker 中发帖。这可能有助于他们检查 iOS 上的特定版本是否存在问题。

标签： ios safari progressive-web-apps offline-caching pwa

【解决方案1】：

您的问题可能是由于工作箱使用 importScripts 而当前 iOS 没有正确缓存导入的脚本。这是即将到来的修复。

尝试直接引用所有工作箱文件，然后在主工作箱 JavaScript 中注释掉导入脚本行。

【讨论】：

这实际上是问题所在，幸运的是我被告知我们不必担心 iOS。但是，是的，这是一个 webkit 错误
请问如何直接引用workbox文件？

【解决方案2】：

我不知道这是否回答了你的问题，但我最近遇到了类似的问题，也许是一样的：

在浏览器、桌面和移动设备上一切正常，但是当安装到移动设备的主屏幕时，应用程序没有启动，如您所述。

我将工作箱用于离线功能，并且有一个没有被正则表达式捕获的起始 URL 用于缓存路由。添加这条路由后，在手机上安装应用的离线模式就可以了……我还是不知道为什么在浏览器上可以。

【讨论】：