来自子目录的 Ionic Angular pwa

Question

我有一个 Ionic (5) Angular 应用程序，其 PWA 包设置为 ng add @angular/pwa --project app（在 angular.json 中它仍然被命名为'app'，所以--project app应该是正确的）。

当我使用 serve 为生产版本提供服务时，我的本地机器上一切正常（我被要求安装 pwa 应用程序，离线模式工作等）。

但我想从 https://example.com/www 中的子目录在我的服务器上托管 PWA。所以我调整了 index.html <head> 以包含 <base href="/www/ /> 并将 .htaccess 放入我服务器上包含

的 www 文件夹中

<IfModule mod_rewrite.c>
    RewriteEngine On

    # -- REDIRECTION to https (optional):
    # If you need this, uncomment the next two commands
    # RewriteCond %{HTTPS} !on
    # RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
    # --

    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) index.html [NC,L]
</IfModule>

当我在浏览器（Chrome、Firefox、Androd 上的 Chrome、Android 上的 Firefox、iOS 上的 Safari 中浏览时，它工作正常它。但是当我重新加载页面时，它会短暂显示错误，并且在成功加载页面后不久就会加载页面（我猜 SW 尝试从缓存加载但失败，然后从服务器加载内容？）。但是当我在桌面上 Chrome 下线时，页面中断并显示（在控制台中）

runtime-es2015.f19a664c8f87e8c99aa7.js:1 GET https://{myserver}/www/96-es2015.167e50f41d797c85f208.js net::ERR_ABORTED 504 (Gateway Timeout)

23:22:29.171 main-es2015.177342d8c81462cb0a8c.js:1 ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 96 failed.
(error: https://{myserver}/www/96-es2015.167e50f41d797c85f208.js)

如果我离线并重新加载页面 chrome 显示 504 ("{myserver} took too long to respond") HTTP 错误页面。（不过，开发工具的控制台或网络选项卡中没有输出。）

此外，我没有被邀请在 Chrome（桌面）中安装 PWA。

当我使用 Chrome (Android) 通过菜单将它添加到我的主屏幕时（因为它不会自行安装），并启动 PWA 时，有一个显示 "Can't connect to site" 的对话框在几秒钟后消失，然后正确显示站点（很可能是从网络加载的）。

当我在 android 上使用 Firefox 并将 PWA 安装到我的主屏幕，然后启动它时，会出现一小段吐司，说 "Insecure ConnectioN" 然后切换到 firefox，其中显示"Corrupted Content Error" 留言。

清单包含

"scope": "./",
"start_url": "./",

不确定这是否会导致它，但删除范围条目或将其设置为 /www/ 也没有什么不同。

显然我真的不知道如何设置它才能正常工作，因为我现在正在尝试一天：/...

我做错了什么？如何设置？

Answer 1

通常对于 Angular 这种情况，您需要像这样使用 --base-href 参数构建您的应用程序：

ng build --base-href=/subfolder/

所以在你的情况下：

ng build --base-href=/www/

这应该会为您设置所有需要的东西。

查看此示例 github 页：https://angular.io/guide/deployment#deploy-to-github-pages

Answer 2

我有一个类似的要求，我想要包含名为 /pwa 的 PWA 的文件夹。这对我有用：

ionic build --prod -- --base-href /pwa/

the -- 将后续标志和参数传递给正在使用的基础框架，在您的情况下 angular。请注意，生成的文件夹仍将称为 /www。但是，如果您将该文件夹上传到您的服务器并将其命名为 'pwa'，一切都会按预期进行。当然，原来的 post 要求 www 也能正常工作。

来自子目录的 Ionic Angular pwa

Ionic Angular pwa from subdirectory

ionic-framework

service-worker

progressive-web-apps

angular

angular-service-worker