iOS Development

Including dynamic iOS app banner meta tag in Angular

Spread the love


When dynamically including a iOS app banner meta tag to an Angular 10 app, I can see that the tag is certainly added underneath the head tag, however Safari on iOS by no means exhibits the app banner. I believe that this will likely 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 to be like like: <meta identify="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({ identify: '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("identify="apple-itunes-app"");
   }
 }

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

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

After which embody it within the part, by way of 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() technique.

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 attempting to do? Or do I simply want to incorporate the tag within the index.html and have or not 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 have been early within the lifecycle, however to no avail. e.g. I attempted NavigationEnd.

2 thoughts on “Including dynamic iOS app banner meta tag in Angular

Leave a Reply

Your email address will not be published. Required fields are marked *