0

我做了一个 PWA。目前部署在heroku上。网址 - https://plain-js-pwa.herokuapp.com/。

我的 PWA 安装了 service worker 和 manifest.json 文件。如果我在手机上的 chrome 上打开它并将手机置于飞行模式，那么刷新 url 仍然会显示我的应用程序。这是预期的，因为我的服务人员正在进行离线缓存。

但是当我将我的 PWA 添加到主屏幕并尝试在飞行模式下打开它时，它就不起作用了。这可能是我的第一个 PWA，所以请帮助我。我正在从“sw-precache-webpack-plugin”生成我的服务工作者文件。

我的 manifest.json 文件是：

{
  "name": "VanillaJS-webpack App",
  "short_name": "VanillaJS-webpack App",
  "description": null,
  "dir": "auto",
  "lang": "en-US",
  "display": "standalone",
  "orientation": "any",
  "start_url": "/?homescreen=1",
  "background_color": "#ee6e73",
  "icons": [
    {
      "src": "android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
4

1 回答 1

0

从主屏幕加载时，它应该以与从浏览器加载时相同的方式工作。

在您的示例中，快速调试似乎表明问题与查询字符串有关：https ://plain-js-pwa.herokuapp.com/?homescreen=1

添加查询字符串时，它不会脱机工作（如果从主屏幕加载或其他方式无关）。在不查看您的服务工作者配置的情况下，您很可能需要指示您的服务工作者使用ignoreSearch（https://developer.mozilla.org/en-US/docs/Web/API/Cache/match）忽略查询字符串参数，或者ignoreUrlParametersMatching如果使用sw-precache.

于 2017-05-16T07:08:26.667 回答