Including dynamic iOS app banner meta tag in Angular

January 9, 2024

1

When dynamically including a iOS app banner meta tag to an Angular 10 app, I can see that the tag is certainly added below the head tag, however Safari on iOS by no means exhibits the app banner. I believe that this may increasingly have one thing to do with the web page’s head already having been parsed by Safari, earlier than the meta tag is added.

Once I say dynamically, it is as a result of I solely need to present the app banner on sure routes of the Angular app. If I add the meta tag manually within the index.html web page, then the banner seems as anticipated.

That is an instance of what an iOS app banner tag appears like: <meta title="apple-itunes-app" content material="app-id=12345">

The best way that I’ve been in a position so as to add the meta tag is by making a resolver service:

 import { Injectable } from '@angular/core';
 import { Resolve } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { Meta } from "@angular/platform-browser";

 @Injectable({
   providedIn: 'root'
 })

 export class MobileAppBannerResolveService implements Resolve<Observable<string>> {
   constructor(
     non-public metaService: Meta
   ) {}

   resolve(): Observable<string> {
     this.metaService.addTag({ title: 'apple-itunes-app', content material: 'app-id=12345' });
     return of(null);
   }

   // Take away the `meta` tag from the HTML web page
   cleanup(): void {
     this.metaService.removeTag("title="apple-itunes-app"");
   }
 }

I add this resolver within the Route (this is an instance snippet):

  {
    path: 'charts',
    part: ChartComponent,
    kids: chartRoutes,
    resolve: {
        mobileApp: MobileAppBannerResolveService
    }
  }

After which embody it within the part, through the constructor:

 constructor(
    public activatedRoute: ActivatedRoute,
    non-public router: Router,
    non-public mobileAppBannerResolveService: MobileAppBannerResolveService
   ) {}

At this level, the meta tag is added by advantage of the service’s resolve() methodology.

Lastly, when leaving that web page, I take away the tag within the ngOnDestroy:

   ngOnDestroy(): void {
     this.mobileAppBannerResolveService.cleanup();
   }

Is it attainable to do what I am making an attempt to do? Or do I simply want to incorporate the tag within the index.html and have it’s in each route within the Angular app? I did take a look to see if there have been any hooks in navigation that had been early within the lifecycle, however to no avail. e.g. I attempted NavigationEnd.

Supply hyperlink