MacOs Safari、iOS Safari 和 Chrome 上的 Angular 8 PWA 空白。没有错误答案

【问题标题】：Angular 8 PWA blank on MacOs Safari, iOS Safari & Chrome. No errorsMacOs Safari、iOS Safari 和 Chrome 上的 Angular 8 PWA 空白。没有错误
【发布时间】：2020-04-11 09:54:42
【问题描述】：

我的 Angular 8 PWA 在 Chrome 和 Firefox 上完美加载。没有错误，也没有编译错误。

但是，在 MacOs Safari 和 iOS Safari & Chrome 上，该应用完全空白，没有错误。

我尝试了以下在网上找到的解决方案，但没有成功：

在 polyfills.js 中取消注释并安装 polyfill
在 angular.json 中添加“crossOrigin”：“use-credentials”

请帮忙！

这里是 ng 版本：

Angular CLI: 8.3.21
Node: 10.16.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.21
@angular-devkit/build-angular     0.803.21
@angular-devkit/build-optimizer   0.803.21
@angular-devkit/build-webpack     0.803.21
@angular-devkit/core              8.3.21
@angular-devkit/schematics        8.3.21
@angular/cdk                      8.2.3
@angular/cli                      8.3.21
@angular/fire                     5.2.3
@angular/material                 8.2.3
@angular/pwa                      0.803.22
@ngtools/webpack                  8.3.21
@schematics/angular               8.3.21
@schematics/update                0.803.21
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

这是我的清单文件

{
  "name": "..",
  "short_name": "..",
  "gcm_sender_id": "..",
  "theme_color": "#0294a5",
  "background_color": "#0294a5",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "description": "..",
  "start_url": "/",
  "icons": []
}

【问题讨论】：

如果在 MacOs 上打开浏览器 devTools 并访问“应用程序”选项卡，您能看到清单属性和已安装的 Service Worker 吗？你能添加你的清单文件吗？
你好@Francesco，我可以看到清单，并且安装了软件。这是 manifest.webmanifest 文件 { "name": "******", "short_name": "********", "gcm_sender_id": "********* **”、“theme_color”：“#0294a5”、“background_color”：“#0294a5”、“display”：“standalone”、“orientation”：“portrait”、“scope”：“/”、“description”： "************************.", "start_url": "/", "icons": [..] }
您使用哪些操作系统版本（Mac/iOS）？ PS。如果您需要添加代码 sn-ps，请更新您的问题而不是添加评论，因为您可以通过这种方式使用代码格式并提供更好的可读性。
感谢您的提示！我使用的是 MacOS Mojave 10.14.5 和 iOS 13.3.1

标签： angular cross-browser angular8 polyfills

【解决方案1】：

我尝试搜索您的 MacOS 版本和 PWA 支持，但找不到任何东西。

对于 iOS，我知道他们仅从 11.3 版本开始支持 PWA，因此这可能是版本问题。总的来说，Apple 在 PWA 方面仍然远远落后于其他竞争对手。

您能否在 iOS（版本等于或高于 11.3）上测试您的 PWA 以查看它是否有效？至少您可以验证版本作为可能的原因。

【讨论】：