Installing Your PWA on iOS

Written by Preston Lamb

Posted on Feb 9, 2023



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:

  1. is on iOS
  2. is not in standalone mode already
  3. has 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.


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.