iOS PWA 抑制工具栏

Question

I've written a simple Angular PWA, that I have added on my iPhone to the Homescreen. To remove the Safari Toolbar, I have already included in my index.html:

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

See Image "1", the Toolbar is gone. The Problem is: when I hit the "Start"-Button on Image 1, the Angular App routes to a new Component (the URL changes from https://example.com/foo to https://example.com/foo/bar ), and some other Toolbar pops up (see Image "2").

Is there any way to prevent iOS from showing this Toolbar at Image 2? Thank you!

Image 1:

Image 2:

Answer 1

I did find a solution myself:

It seems like iOS shows this Toolbar if the Host or Path of a URL changes, so I checked if it also takes the URL Fragment ( https://en.wikipedia.org/wiki/URL#Syntax ) into account, and it does not! Yay!

So my solution for an Angular-based Webapp is to configure Hash-based LocationStrategy like this in your AppModule:

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

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

This way no Toolbar pops up, if I change the Route in Angular.

Answer 2

I ran into this as well when creating a PWA in Angular 8. The solution was

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

in my app-routing.module.ts