子目录中的离子角 pwa答案

【问题标题】：Ionic Angular pwa from subdirectory子目录中的离子角 pwa
【发布时间】：2020-08-30 06:42:54
【问题描述】：

我有一个 Ionic (5) Angular 应用程序，其 PWA 包设置为 ng add @angular/pwa --project app（在 angular.json 中它仍被命名为“应用程序”，因此 --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 (Deskop) 中安装 PWA。

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

当我在 android 上使用 Firefox 并将 PWA 安装到我的主屏幕，然后启动它时，会出现一个短时间的 toast 说“不安全的连接”，然后切换到显示 "Corrupted Content Error" 消息的 Firefox。

清单包含

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

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

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

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

【问题讨论】：

标签： angular ionic-framework service-worker progressive-web-apps angular-service-worker

【解决方案1】：

通常对于 Angular 的这种情况，您需要使用 --base-href 参数来构建您的应用程序，如下所示：

ng build --base-href=/subfolder/

所以在你的情况下：

ng build --base-href=/www/

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

查看这个带有 github 页面的示例：https://angular.io/guide/deployment#deploy-to-github-pages

【讨论】：

【解决方案2】：

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

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

-- 将后续标志和参数传递给正在使用的底层框架，在您的情况下是 angular。请注意，生成的文件夹仍将称为 /www。但是，如果您将该文件夹上传到您的服务器并将其命名为“pwa”，那么一切都会按预期工作。当然，因为原始帖子需要 www 也可以正常工作。

【讨论】：