Web push on iPhone and iPad

iPhone and iPad users on iOS and iPadOS 16.4 or later can receive web push notifications from your website after they add it to their Home Screen.

When web push works on iPhone and iPad

Web push on iOS and iPadOS works only for a website opened from its Home Screen icon. In a regular Safari tab, the browser doesn’t offer push at all, so the Web SDK initializes without push and the visitor can’t subscribe.

To receive notifications, the user needs:

• An iPhone or iPad on iOS or iPadOS 16.4 or later.
• Your website added to the Home Screen and opened from that icon.
• Notifications allowed in response to a tap on your site.

Consejo

We recommend letting iPhone and iPad visitors know on your site that they need to add it to the Home Screen to get notifications. To do it, they tap Share in Safari, then Add to Home Screen and Add, and open the site from the new icon on their Home Screen.

What your website needs

Integrate the Web SDK the same way as for desktop browsers, then add a web app manifest:

1. Integrate the SDK and the service worker by following Web push SDK 3.0. If your site already has its own service worker, follow Progressive Web App support.

2. Add a web app manifest with display set to standalone or fullscreen, and link it from every page:

   manifest.json

   {
     "name": "Example Store",
     "short_name": "Store",
     "start_url": "/",
     "display": "standalone",
     "icons": [
       { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
       { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
     ]
   }

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

3. Ask for notification permission from a user tap. iOS and iPadOS show the permission dialog only in response to a direct user action, so use the Subscription widget or a button that calls Pushwoosh.subscribe():

   <button onclick="Pushwoosh.subscribe()">Get notifications</button>

How to find iPhone and iPad subscribers in Pushwoosh

Pushwoosh registers iPhone and iPad web subscribers under the Chrome platform, so statistics don’t show them separately and no default tag reliably identifies the device.

To target these subscribers, set a tag of your own from the website:

1. Create a custom tag in the Control Panel, for example a String tag named Web App Platform. If the tag doesn’t exist in the application, the SDK silently drops it.

2. Set the tag when the site runs from the Home Screen on iPhone or iPad:

   Pushwoosh.push((api) => {
     // iPadOS Safari reports a Mac user agent, so a touch screen marks an iPad
     const isIos = /iPhone|iPad/.test(navigator.userAgent)
       || (/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1);
     const isIosHomeScreen = isIos && (window.navigator.standalone === true
       || window.matchMedia('(display-mode: standalone)').matches);
   
     if (isIosHomeScreen) {
       api.setTags({ 'Web App Platform': 'ios' });
     }
   });

3. Subscribe from a test iPhone or iPad.

4. Check the tag value on that device in User Explorer. setTags succeeds even when Pushwoosh drops the tag, so the code alone doesn’t confirm it was saved.

5. Build a segment on this tag to send a message only to iPhone and iPad subscribers.