Setting Up Web Push Notifications on iOS

Apple has recently unveiled iOS and iPadOS 16.4, introducing support for web push notifications for web applications integrated into the Home Screen on iPhone and iPad devices. This guide aims to assist you in configuring your website to send notifications to users on iPhone and iPad.

Web Push Notifications are now accessible for Safari browser, Google Chrome, and Edge on iPhone and iPad running iOS and iPadOS 16.4. To enable notifications on iOS, users must add your website to their Home Screen and launch the Web App by tapping its icon. The web app will open seamlessly, resembling the experience of a native app on iOS or iPadOS, rather than in a browser. Users have the option to authorize push notifications and subsequently manage these permissions in the Notifications Settings, akin to any other app on their iPhone or iPad.

Prerequisites

You require a few things to have the web push running on iOS devices.

  • Your web app must serve a Web Application Manifest file (manifest.json) with its display member set to standalone or fullscreen.
  • The users must be on iOS or iPadOS 16.4 or later.
  • The user needs to install the web app to their Home Screen by tapping the Share button to open the Share menu, and then tapping “Add to Home Screen”.
  • A user gesture, such as a click or tap on a button is required to show the native permission prompt and allow the permission to receive push notification.

If your website is already a Progressive Web App (PWA), you do not need to make additional updates to prepare for iOS/iPadOS Web Push.

Here’s a guide to setting up your website for web push notifications on iOS and iPadOS:

  1. Add a Web App Manifest file onto your website.
  2. Implement Factoreal Web-Push integration on your site.
  3. Roll out and verify the deployment of your website’s manifest.
  4. Test the permission prompt.

Add a Web App Manifest file onto your website

The web application manifest serves as a JSON document informing the browser about your Progressive Web App (PWA) and specifying its appearance and behavior upon installation on the user’s desktop or mobile device. It encompasses metadata such as the name and description of your web app, its icons, color scheme, and the designated URL to open when the app is initiated.

{
    "name": "Factoreal",
    "short_name": "Factoreal",
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#20003a",
    "background_color": "#ffffff",
    "icons": [
        {
            "src": "icon/icon-128x128.png",
            "sizes": "128x128",
            "type": "image/png"
        },
        {
            "src": "img/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "img/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Note: The value of `display` property in the manifest must be set to either `standalone` or `fullscreen`

After creating the manifest file, reference the manifest in the HTML page of your website using a tag in the section of the page.

<link rel="manifest" href="/manifest.json">

Implement Factoreal Web-Push integration on your site

The next step is to integrate Factoreal on your website to handle registering and installing Service Worker on the page.

If you have not completed the installation, here is the guide to installing Factoreal Script.

Roll out and verify the deployment of your website’s manifest

After you’ve uploaded the manifest and integrated the Factoreal script, the subsequent phase involves testing your web app to verify the correct implementation of the web app manifest. You can conduct this testing across different devices and browsers by adding your website to the home screen.

Follow these steps:

  1. Open the website in Safari/Chrome browser running on iOS 16.4 or later
  2. Click on the “Share” button to open the share menu.
  3. Click on the “Add to Home Screen” option.
  4. Save the app on your Home Screen.

If your website has been successfully configured for web push, it will open the web app like any other app on iOS or iPadOS instead of opening in a browser and acting merely as a shortcut.

You should inform your user by showing a banner on the app screen, prompting the user to add your app to the home screen of their iOS device and subscribe to the web push notifications.

Test the permission prompt

  1. Open the web app by tapping the app icon from the home screen on your device.
  2. If you have opted-in for deferred prompt then perform the action required for the notification permission prompt appearing.
  3. Click the “Allow” button on the permission prompt.

Send Web Push to iOS and iPadOS users

Once you have completed the above steps required for iOS and iPadOS web push notifications, you can now begin sending a push notification using the Factoreal dashboard.

Web Push Notifications on iOS works similar to other native apps. Web Push notifications are displayed on the screen as a heads-up notification, in the notification center and also on the lock screen. Users can also manage their notification preferences from iOS Settings. Once you click on the notification, it will take you to the desired landing page within the web app.