tldr;
The @angular/pwa package is a great way to get your app up and running as a PWA. All configuration is completed for you, and with little extra setup your users will be prompted to install the app…that is, if they are using Android. But for your iOS users, the install prompt does not show by default. In this article I’ll show you the steps to ensure your user gets the install prompt on their iOS device.
Determining if the Prompt Should Show
If your app meets the PWA install requirements, the Chromium based browsers kick off an event called beforeinstallprompt. On Android devices, the browser will see that event and show a default install prompt. If the app is already installed, the prompt won’t continue to show up to the user. But, again, this same thing doesn’t happen for iOS users.
To help ensure that iOS users are asked to install the PWA on their phone, we can make a couple of checks in our app and show a custom install prompt to the user, telling them how to install the app. Here’s an example of the method that you can run to decide if the prompt should be shown:
showIosInstallModal(localStorageKey: string): boolean {
// detect if the device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test(userAgent);
};
// check if the device is in standalone mode
const isInStandaloneMode = () => {
return (
“standalone” in (window as any).navigator &&
(window as any).navigator.standalone
);
};
// show the modal only once
const localStorageKeyValue = localStorage.getItem(localStorageKey);
const iosInstallModalShown = localStorageKeyValue
? JSON.parse(localStorageKeyValue)
: false;
const shouldShowModalResponse =
isIos() && !isInStandaloneMode() && !iosInstallModalShown;
if (shouldShowModalResponse) {
localStorage.setItem(localStorageKey, “true”);
}
return shouldShowModalResponse;
}
There are a few steps here; let’s take a look at each of them. First up is to check if the device’s user agent is running iOS. We get the user agent from the window.navigator object, and check to see if it matches iphone, ipad, or ipod. There is another way to do this, but it requires installing @angular/cdk. If you are able to do that, it is a little simpler and you can rely on the Angular team updating the checks for you if necessary. To use the CDK, first inject Platform from the CDK, and then the above function, where we check if the user is using iOS, will look like this:
showIosInstallModal(): boolean {
// …
// detect if the device is on iOS
const isIos = this._platform.IOS;
// …
}
Either way will work, though I do like the idea of using the CDK to ensure that my check is up to date as much as possible.
The next step in the process is determining if the app is in standalone mode already. The manifest.webmanifest file that is generated when you ng add @angular/pwa to your project defines the “display” option as standalone. On this step, we check to see if the app is already in standalone mode. If it is, the user has already installed the PWA and doesn’t need to be prompted to install it.
The last step is checking to see if we’ve already shown theme the install modal. In the case above, we only show them one time. We could expand the logic to show them every week, or two weeks or 6 months, for example. We pull a value from localStorage which we saved there to say if we showed the modal. We either use the value from localStorage, or set it to false.
If after making these checks the user:
is on iOSis not in standalone mode alreadyhas not already seen the modal
Then we will return true so the app can show the user the modal. Otherwise false will be returned and the modal won’t be shown.
Content of the Prompt Modal
Once you know if you should show a modal or not to the user, you can show the user whatever you’d like. I would encourage you to let them know why the modal is showing and how to install the app, though. Something like this, perhaps:
Install this application on your home screen for quick, easy and offline access when you’re on the go. Close this modal, tap the “share” icon, and then tap on “Add to home screen”.
You can change that content, but I’d at least give them a form of that information so they know what steps to take next.
This also may go without saying, but you don’t have to show the user a traditional modal. You could show a banner, or navigate to a new page, or whatever else you’d like to do. That part is up to you.
Conclusion
The @angular/pwa package makes it really easy to add PWA functionality to your application. But without a little work on your own your iOS users will never be prompted to install the app and may not do it on their own. Hopefully in the future iOS devices and browsers have better PWA support and these steps will not be necessary. Until then, hopefully this helps you distribute your PWA to as many people as possible.
Join us at ng-conf 2023!
ng-conf | June 14–15, 2023
Workshops | June 12–13, 2023
Location | Salt Lake City, UT
ng-conf 2023 is a two-day single track conference focused on building the Angular community. Come be a part of this amazing event, meet the Angular Team and the biggest names in the community. Learn the latest in Angular, build your network, and grow your skills.
Installing Your PWA on iOS was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.