iOS PWA 抑制工具栏答案

【问题标题】：iOS PWA suppress ToolbariOS PWA 抑制工具栏
【发布时间】：2020-01-28 11:34:27
【问题描述】：

我编写了一个简单的 Angular PWA，并将其添加到 iPhone 的主屏幕中。要删除 Safari 工具栏，我已经包含在我的 index.html 中：

<meta name="apple-mobile-web-app-capable" content="yes">

参见图片“1”，工具栏不见了。问题是：当我点击图片 1 上的“开始”按钮时，Angular App 会路由到一个新组件（URL 从 https://example.com/foo 更改为 https://example.com/foo/bar），并且会弹出一些其他工具栏（参见图片“2 ")。

有什么方法可以阻止 iOS 在图 2 中显示此工具栏？谢谢！

图片1：

图 2：

【问题讨论】：

标签： ios angular progressive-web-apps

【解决方案1】：

我自己确实找到了解决方案：

如果 URL 的主机或路径发生更改，iOS 似乎会显示此工具栏，所以我检查了它是否还考虑了 URL 片段 (https://en.wikipedia.org/wiki/URL#Syntax)，但它没有！耶！

所以我对基于 Angular 的 Webapp 的解决方案是在你的 AppModule 中像这样配置基于哈希的 LocationStrategy：

import {HashLocationStrategy, LocationStrategy} from "@angular/common";

@NgModule({
  declarations: [
    ...
  ],
  imports: [
   ...
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样，如果我在 Angular 中更改路线，则不会弹出工具栏。

【讨论】：

此解决方案似乎有效，但一段时间后，在某些情况下，完成按钮会再次出现。除了基于 Hash 的 LocationStrategy 的解决方案，还有其他的方法吗？这在 iOS 12 上不是问题。

【解决方案2】：

我在 Angular 8 中创建 PWA 时也遇到了这个问题。解决方案是

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })]
})

在我的app-routing.module.ts

【讨论】：