Inc*_*bus 0 ionic-framework service-worker progressive-web-apps angular angular-service-worker
我有一个Ionic (5) Angular应用程序，其 PWA packges 设置为ng add @angular/pwa --project app（在 angular.json 中它仍然命名为“app”，所以--project app应该是正确的）。
当我使用服务提供生产构建时，一切都在我的本地计算机上运行良好（我被要求安装pwa应用程序，离线模式工作等）。
但我想从子目录在我的服务器上托管 PWA，如https://example.com/www. 所以我调整了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）并浏览它时，它工作正常。但是当我重新加载页面时，它会短暂显示错误，并在成功后不久加载页面（我猜软件尝试从缓存加载并失败，然后从服务器加载内容？）。但是当我在桌面上的 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 时，会出现一个对话框，显示“无法连接到站点”，该对话框消失了几秒钟后，然后正确显示该网站（很可能是从网络加载的）。
当我在 Android 上使用 Firefox 并将 PWA 安装到主屏幕，然后启动它时，会出现一个短时间的 Toast，显示“不安全的连接”，然后切换到 Firefox，显示一条"Corrupted Content Error"消息。
清单包含
"scope": "./",
"start_url": "./",
不确定这是否会导致它，但删除范围条目或将其设置为 /www/ 也不会产生影响。
显然，我真的不知道如何设置它才能正常工作，因为我现在正在尝试一天：/...
我究竟做错了什么？如何设置这个？
通常，对于 Angular 的这种情况，您需要使用 --base-href 参数构建应用程序，如下所示：
ng build --base-href=/subfolder/
所以在你的情况下：
ng build --base-href=/www/
这应该为您设置所有需要的东西。
请参阅 github 页面的示例：https ://angular.io/guide/deployment#deploy-to-github-pages
我有类似的要求，我希望包含 PWA 的文件夹名为 /pwa。这对我有用：
ionic build --prod -- --base-href /pwa/
-- 将后续标志和参数传递给正在使用的底层框架（在您的情况下为 Angular）。请注意，生成的文件夹仍将被称为 /www。但是，如果您将该文件夹上传到服务器并将其命名为“pwa”，则一切都会按预期进行。当然，由于原始帖子需要 www，所以也可以正常工作。
| 归档时间： |
|
| 查看次数： |
1617 次 |
| 最近记录： |