- You need to enable "Web Push" in Safari experimental feature settings to use web push in iOS.
- Web push in iOS is limited to Home Screeen web apps (PWAs) and it does not work with web page in Safari.
- Request to notification permission can be made in short time (~5s) after user indicates interest to the page such as click.
- PWA and native apps are becoming closer, but still there are many features in the waitlist to improve PWA's capability
The iOS 16.4 was officially released on 3/27/2023 with push notification support to Home Screeen web apps (PWAs).
Web push notification to iOS has been requested so long time since the feature was already supported by Google Chrome back in 2015.
The feature is still experimental with such restriction that you need to add the web app to the Home Screen and open it as a PWA. Also it behaves differently from Google Chrome and it has stricter condition to ask notification permission to users.
This project aims to demostrate how to enable web push notification in iOS and also clarify the behavior difference to request notification permission between Google Chrome and Safari.
It is important to understand Progressive Web App (PWA) because it's often discussed with web push notification within the same context and iOS supprts web push notification only to PWA and it does not allow sending notifications without adding the web app to Home Screen as of 3/30/2023.
The term "Progressive Web Apps" was coined by Google Chrome developers. But the long journey started way earlier when Steve Jobs said web apps in Safari should “look exactly and behave exactly like native apps" back in 2007.
Service Worker is an critical component to enable PWA. But we needed to wait until Google Chrome and Safari both support it in 2017. Also there are so many features still in the waitlist to provide good user exerience with PWAs such as external device access.
Also it is important to note that there is a group for APIs that you can't use in a PWA, and where plans to add them are still long term. An example API from this group is geofencing.
You can take a look at 🐡 Fugu API tracker to see what's in the waitlist.
web.dev listed capable, reliable and installable as three app pillars, which means that PWA should provide the same-level of functinalities as native apps, works offline and allows users to install to Home Screen.
Web apps and native apps have different strength and weakness described as below.
| Web apps | Native apps | |
|---|---|---|
| Internet search | ⭕ | ❌ |
| Instant update | ⭕ | ❌ |
| App store distribution | ❌ | ⭕ |
| Performance | ❌ | ⭕ |
| Offline support | ❌ | ⭕ |
PWA is an attempt to have the strength of the both web and native apps allowing developers to publish the web app to the internet and to pregressively provide native experience after installing it to user devices.
Another important point is that you don't need to pay "Google Tax" and "Apple Tax" for selling apps and receiving transactions. Google provides unique sollution called "Trusted Web App" (TWA) that allows distributing PWAs in Google Play. But you need to comply with Google Play’s Payments policy and Apple does not provide any equivalent solution.
First, run the development server:
npm run devOpen http://localhost:3000 with your desktop browser.
Click "Request" button and it will pops up a dialog to request permission to send push notification.
It should work for desktop Safari as well.
However, when you set more than 5 seconds delay to request the permission after clicking the button, it starts behaving differently between Google Chrome and Safari.
It continues working with Google Chrome. But Safari no longer shows the dialog when there are more than 5 seconds delay.
The reason is explained in the WebKit Blog as below:
In Safari, users of your website or web app opt into notifications by first indicating interest through a user gesture — such as clicking a button. Then they’ll be prompted to give permission for your site or app to send notifications. Users can view and manage notifications in Notifications Center. And they can customize styles and turn notifications off per website in Notifications Settings.
Therefore, it is not recommended to request push notification permission on page load. Instead, you should provide a button explicitly asking for notification permission for Safari users.
Web push notification is still an exprimental feature disabled by default as of 3/30/2023. Therefore, you need to open the setting to enable the feature.
- Open the Settings app.
- Scroll down to Safari.
- Click Advanced and then Experimental Features.
- Enable Push API
Also you need to install the web app to Home Screen.
- Open http://localhost:3000 with iOS safari.
- Tap share icon at the bottom center of the screen and tap "Add to Home Screen".
The app will be installed with 😎 icon. So you can tap it to open it as a PWA.
After launching the web app, click "Request" button and it will pops up the dialog to request web push permission.
But the dialog won't be popped up if the delay is configured more than 5 seconds.
Web push is allowed either in localhost or HTTPS access.
When you are not either using localhost or HTTPS access to access to your local server, the easiest way is to use ngrok.
It requires you to sign up for ngrok account. But once configured, you can just run ngrok http 3000 to tunnel your local server and access it from internet with HTTPS.