A way to show a prompt to install your Angular PWA both on Android and iOS devices.

Oleksandr Korneiko
Nov 30 · 3 min read
Photo by Yura Fresh on Unsplash

There are many stories about how progressive web applications are fantastic. They could be installed on a mobile device and be like a real application installed from the application store. So this story is about one of the ways how to urge a user to install your web app on his device (if it is written in Angular using Angular Material).


The problem.

If your application is opened in Android’s browser (Chromium-based, like Chrome or Brave), the event beforeinstallprompt will be fired, and the browser may show a prompt to install the app. But when it comes to iOS — it not so obvious. A user has to manually select the Safari’s menu item to install the app. And if the user isn’t experienced how to do it or does not know that this app could be installed the chances that he will install your app is minimal.

Solution.

To urge an iOS user to install your application, you need to show him how to do it. We will create a custom component which will show what the iOS user should do to. Though for the Android user, we can use a default prompt, we will also use a custom prompt.

For Android users, the app flow will be next:
Mentioned before beforeinstallprompt event will fire in Chromium-based browsers. The app will catch it, and start our custom component, where we can accept or decline installation. If the prompt is accepted the Android’s default PWA installation wizard is displayed. The tricky part is to catch this event and prevent displaying default wizard before our custom component.

For iOS users, the app flow will be similar, except we do not listen for the beforeinstallprompt event (because it is absent on iOS Safari and Chrome). Let say we want the prompt to appear at some time after our web app is started, so we delay the prompt to appear. There is no way to launch the iOS PWA install wizard from the web app, so we show in our custom prompt component buttons which user have to tap in order to install our app.

1. Create a new service to deal with catching beforeinstallprompt event and opening prompt component.

ng g service services/pwa

Here we used the Platform class provided in @angular/cdk/platform which is installed automatically with the material angular installation. And use the material bottom sheet component to hold our custom prompt.
If the platform is Android we setup event listener and use event.preventDefault() to prevent displaying default Android prompt (works since Chromium v76). If the platform is iOS we should show the custom prompt only in the browser, not in the installed app, so we use a check for a standalone mode.

2. Create a new component.

ng g component prompt-component/

If the platform is Android we can launch a PWA installation wizard by launching prompt() provided in beforeinstallprompt event.

If the platform is iOS we show instructions on how to launch PWA installation.

3. Update app.module.ts file to start listening beforeinstallprompt event as soon as possible after the app initialisation starts.

const initializer = (pwaService: PwaService) => () => pwaService.initPwaPrompt();providers: [...,{provide: APP_INITIALIZER, useFactory: initializer, deps: [PwaService], multi: true},],

Although you can start to listen to beforeinstallprompt event in the PWA service constructor without using the APP_INITIALIZER injection token, you do not control service creation, and with using this token you are confident about starting event listener before this event fire.


You can even check iOS prompt in a desktop Chrome Developer Tools:

Repository: https://github.com/samvimes01/pwaPrompt

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade