VueJS PWA：服务工作者不工作。可能是由于 .htaccess 文件？

Question

我已经用vue 构建了一个PWA。在开发中一切正常，当我部署到 chrome 网络服务器时。 Service Worker 已注册并正在运行。到目前为止一切顺利。

当我部署到生产环境时，Service Worker 没有运行，因为 scope 或 start_url 与 manifest.json 不匹配（这是 google 开发工具告诉我的）。

我相信这是因为我在历史模式下运行 vue-router 并且在生产环境中运行了一个 .htaccess 文件以按照建议的 here 重写规则。

我还对此进行了测试，以在 vue-router 中切换回哈希模式并再次部署到生产环境。然后 service worker 就可以正常工作了。

为了克服这个问题，我尝试将manifest.json 中的范围设置为index.html：

register(`${process.env.BASE_URL}service-worker.js`, {
    registrationOptions: { scope: 'index.html' },
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n'
      )
    }
})

manifest.json 也一样：

{
  "name": "myapp",
  "short_name": "myapp",
  "theme_color": "#4DBA87",
  "icons": [
    { "src": "./img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "./img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "./img/icons/android-chrome-maskable-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "./img/icons/android-chrome-maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "start_url": "index.html",
  "scope": "index.html",
  "orientation": "portrait",
  "display": "standalone",
  "background_color": "#000000"
}

但 chrome 仍然给我关于范围不同步的消息。

对此有什么想法吗？

Answer 1

为 pwa 插件添加到 package.json 配置中：

  "vue": {
    "pwa": {
      "workboxOptions": {
        "exclude": [
          ".htaccess"
        ]
      }
    }
  }

---

更新：

此操作会从 SW 缓存中排除 .htaccess 文件。 因此，您的软件不会崩溃，也不会尝试从服务器下载 .htaccess 文件。

至少，我遇到了同样的问题，发现这个 StackOverflow 主题没有答案。所以，我阅读了 Vue PWA 文档，发现这个对我有用。