离子4-如何将PWA配置为在子文件夹上运行？

Question

关于如何使用离子4创建PWA有足够的教程，但我发现的所有解决方案都集中在将应用程序部署到根中。

我需要的是将整个应用程序部署到一个子文件夹中：

https://my-domain.com/my-app/

我详细地解释了我在这个存储库中的问题：

https://github.com/Viterbo/ionic-4-PWA

谢谢

Answer 1

这并没有解决Ionic 4方面的问题，但我想出了如何从子文件夹中安装PWA，答案是：https://www.w3.org/TR/appmanifest/#navigation-scope：

“如果作用域成员不存在于清单中，它默认为start_url成员的父路径。例如，如果start_url为/Pagee.html，而范围缺失，导航作用域将是/pages/位于同一原点上。如果start_url是/pages/ (尾随斜杠很重要！)，导航作用域将是/pages/。

因此，要自行运行(根文件夹)，start_url如下所示：

 "start_url": "/index.html?utm_source=homescreen",

但是，当从子文件夹为PWA提供服务时，如下所示：

  "start_url": "/app-folder/index.html?utm_source=homescreen",
  "scope": "/app-folder/",

我在Windows 10上的最新Chrome和最新的Android 9版本上测试了这一点。

Answer 2

这是对我有用的东西，第一个范围和启动url应该是相同的

manifest.json

  "scope": "/admin/",
  "start_url": "/admin/?u=what-ever"

服务工作人员路径应与作用域index.html相同

function onLoad() {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/admin/sw.js')
        .then(function (reg) {
          console.log("Yes");
        }).catch(function (err) {
          console.log("No", err)
        });
    }
}

window.addEventListener('load', onLoad);