How can a web application send push notifications to iOS devices? [closed]

Asked 8/2, 2011 at 23:26 Answered 18/8, 2016 at 14:32

Solved ios iphone web-applications apple-push-notifications

127

I'm working on a web app. How can I send push notifications to iOS users when there is new content?

Zoophilia answered 8/2, 2011 at 23:26 Comment(3)

A what notification now? – Barnabas 8/2, 2011 at 23:28

@rfw: iOS push notifications. support.apple.com/kb/HT3576 developer.apple.com/library/ios/documentation/… – Seth 9/2, 2011 at 0:55

Are you searching with sound ? Then if you want a sound notification while the mobile phone locked mode; its name is Specific Push. – Splenic 1/8, 2016 at 13:40

To be more specific, in order for a web application to send push notifications to a mobile device, such as the iPhone, the mobile device must have registered to receive push notifications for a particular application. The registration for push notification is done through a native app and can only be performed through a native app. Once the native app is registered for push notification, it can send the authorization token to the server, which can be used in conjunction with the certificate used to provision the native client, to send the push notifications to the mobile device.

As specified in another answer, one option is to 'wrap' your web application in a native application. Meaning that you would create a native application that basically presents a UIWebView (for iPhone dev) to the user showing your web application. While this pretty much functions in the same manner as the native browser, you would be able to add the ability to register for push notifications using the native controls.

It would be beneficial to you to review the Apple's push notification document as it provides some pretty good information on how push messaging functions on the iPhone.

See these links provided by Peter Hosey:

Darreldarrell answered 9/2, 2011 at 4:28 Comment(6)

Thanks for this answer, I was looking for the same. Does this also apply when you have added a meta tag 'apple-mobile-web-app-capable'? – Breadfruit 28/11, 2012 at 8:17

This is changing how push notifications happen developers.google.com/web/updates/2015/03/… – Empiricism 12/10, 2015 at 19:46

as of 02/2016,FF,Chrome and Safari can register for push from webapp. – Rosenkrantz 10/2, 2016 at 9:56

This is no longer true in 2016, you can send notifications from web apps. Read my answer below. – Olette 14/5, 2016 at 16:42

But the webview is not working great, it misses some features and has more bugs than safari – Ewers 16/12, 2019 at 9:52

This is an old answer and this question has over 145k views. Can we update the accepted answer, please? – Outrageous 23/4, 2020 at 10:20

While not yet supported on iOS (as of iOS 10), websites can send push notifications to Firefox and Chrome (Desktop/Android) with the Push API.

The Push API is used in conjunction with the older Web Notifications to display the message. The advantage is that the Push API allow the notification to be delivered even when the user is not surfing your website, because they are built upon Service Workers (scripts that are registered by the browser and can be executed in background at a later time even after your user has left your website).

The process of sending a notification involves the following:

a user visits your website (must be secured over HTTPS): you ask permission to display push notifications and you register a service worker (a script that will be executed when a push notification is received)
if the user has granted permission, you can read the device token (endpoint) which should be sent to the server and stored
now you can send notifications to the user: your server makes an HTTP POST request to the endpoint (which is an URL that contains the device token). The server which receives the request is owned by the browser manufacturer (e.g. Google, Mozilla): the browser is constantly connected to it and can read the incoming notifications.
when the user browser receives a notification executes the service worker, which is responsible for managing the event, retrieving the notification data from the server and displaying the notification to the user

The Push API is currently supported on desktop and Android by Chrome, Firefox and Opera.

You can also send push notifications to Apple / Safari desktop using APNs. The approach is similar, but with many complications (apple developer certificates, push packages, low-level TCP connection to APNs).

If you want to implement the push notifications by yourself start with these tutorials:

Push API: Push Notifications on the Open Web
Apple Push Notification system: Configuring Safari Push Notifications

If you are looking for a drop in solution I would suggest Pushpad, which is a service I have built.

Update (September 2017): Apple has started developing the service workers for WebKit (status). Since the service workers are a fundamental technology for web push, this is a big step forward.

Olette answered 21/1, 2016 at 10:15 Comment(9)

As of iOS 10 (public beta), Mobile Safari does not support push notifications. – Picrite 13/7, 2016 at 23:34

@RobinDaugherty Why you say "as of"? iOS Safari has never supported push notifications – Olette 14/7, 2016 at 10:17

It wasn't a correction of your answer, I was providing information for people looking for Safari Mobile support. Someday perhaps they'll support push notifications, but they don't as of the release I mentioned. – Picrite 18/7, 2016 at 20:6

Safari is the new Internet Explorer. Apple is the new Microsoft. Ugh.... – Franglais 3/12, 2016 at 6:5

@Olette Do you have any updates on this? My app got rejected from the App Store because it wasn't different enough from the mobile version of the website. Which was basicly the whole idea that the client wanted, but with the feature for push notifications. Apple suggest a HTML5 web app, but is it already possible to also sent push notifications in web apps for iOS? – Hibernia 19/5, 2017 at 6:22

@Hibernia No, unfortunately there aren't any updates. Safari on iOS doesn't support web push at the moment (May 2017). – Olette 19/5, 2017 at 12:38

Let's put some pressure on Apple: I wrote some paragraphs that you can copy and submit to the Apple Bug Tracker to ask Apple to add web push to iOS. – Olette 9/6, 2017 at 14:34

AFAIK It supports them now (ios 11.3) – Amulet 10/4, 2018 at 15:56

@GeorgMavridis iOS 11.3 supports Service Workers. It does not support the Push API... – Olette 10/4, 2018 at 19:56

No, only native iOS applications support push notifications.

UPDATE:
Mac OS X 10.9 & Safari 7 websites can now also send push notifications, but this still does not apply to iOS. Read the Notification Programming Guide for Websites. Also check out WWDC 2013 Session 614.

Euclid answered 8/2, 2011 at 23:39 Comment(5)

now you can on Maverix & Safari 7 ! – Gleaning 18/8, 2013 at 0:6

fastcolabs.com/3011072/tracking/… – Celin 21/8, 2013 at 12:29

Safari 7 sure can receive these push notification and depending on what backend your web app is running, there are a few services that allow this: pushwoosh.com, pushmonkey.launchrock.com or you could deploy your own server, which is very similar to iOS push notifications. – Makeweight 2/1, 2014 at 10:33

I heard that this is called as Specific Push. – Splenic 1/8, 2016 at 8:44

OP question is specifically about iOS. OSX/macOS support for this is nice, but push notifications still only work on iOS from a native app. – Firdausi 14/12, 2016 at 21:16

You can use pushover if you don't want to create your own native app: https://pushover.net/

Rycca answered 10/8, 2012 at 13:45 Comment(0)

Google Chrome now supports the W3C standard for push notifications.

http://www.w3.org/TR/push-api/

Erection answered 24/4, 2015 at 8:3 Comment(3)

Here is a thorough tutorial: developers.google.com/web/updates/2015/03/… – Orthopsychiatry 30/6, 2015 at 10:15

Does this include Chrome for iOS? (The original question was specific to iOS) – Abernon 24/4, 2017 at 4:3

No iOS on anything as of yet. Have to use a native app :\ – Myles 24/11, 2017 at 17:21

ACTUALLY.. This is brand new mind you.. On the newest version of OS X (Mavericks) you CAN send push notifications from a webpage to the desktop. But according to the documentation, NOT iPhones:

Note: This document pertains to OS X only. Notifications for websites do not appear on iOS.

Currently Apple has plans to allow 2 kinds of push notifications: OS X Website Push Notifications and Local Notifications.

The obvious hurdle here is that this will not work on PCs, nor will it allow you to do android push notifications.

Furthermore, you actually can with versions as old as Snow Leapord, send push notifications from a website as long as said website is open and active. The new Mavericks OS will allow push notifications even if the site isnt opened, assuming you have already given permission to said site to send push notifications.

From the mouth of Apple:

In OS X v10.9 and later, you can dispatch OS X Website Push Notifications from your web server directly to OS X users by using the Apple Push Notification service (APNs). Not to be confused with local notifications, push notifications can reach your users regardless of whether your website or their web browser is open…

To integrate push notifications in your website, you first present an interface that allows the user to opt in to receive notifications. If the user consents, Safari contacts your website requesting its credentials in the form of a file called a push package. The push package also contains notification assets used throughout OS X and data used to communicate to a web service you configure. If the push package is valid, you receive a unique identifier for the user on the device known as a device token. The user receives the notification when you send the combination of this device token and your message, or payload, to APNs.

Upon receiving the notification, the user can click on it to open a webpage of your choosing in the user’s default browser.

Note: If you need a refresher on APNs, read the “Apple Push Notification Service” chapter in Local and Push Notification Programming Guide. Although the document is specific to iOS and OS X push notifications, paradigms of the push notification service still apply.

Jannette answered 8/8, 2013 at 22:42 Comment(3)

This, hopefully, means we'll see web-based push notifications by iOS 8 or 9. Keeping my fingers crossed. – Revenge 10/8, 2013 at 15:50

The developer docs say explicitly that web notifications do not apply to iOS currently. Just as a clarification of your first paragraph. – Messy 19/11, 2013 at 22:56

Knowing apple they'll allow it for one version of iOS and remove it for the next – Without 15/11, 2016 at 19:49

No, there is no way for an webapp to receive push notification. What you could do is to wrap your webapp into a native app which has push notifications.

Borehole answered 8/2, 2011 at 23:40 Comment(8)

what do you mean when you say "wrap your webapp into a native app"? – Zoophilia 9/2, 2011 at 2:35

Frankie: Well, just a native app that displays a UIWebView which then loads your site. That allows you to have your webapp as native app on the phone. – Borehole 9/2, 2011 at 9:53

so i guess in xcode this would be "WindowBase Aplication" for native app, right? – Zoophilia 10/2, 2011 at 1:39

now you can on Maverix & Safari 7 ! – Gleaning 18/8, 2013 at 0:5

Thanks for the downvote! At the time of writing (February 8th 2011), this wasn't possible yet. – Borehole 1/10, 2014 at 16:35

@Borehole - no need to be snarky. You can update your answer or delete it. – Cleanthes 18/7, 2016 at 17:58

@DanDascalescu Why would I? It's still not possible on iOS, which is what the question was about. The answer is not incorrect. – Borehole 21/7, 2016 at 23:10

@Borehole agree. What is it with all these people who claim it works on Safari/iOS??? dafuq? IT DOES NOT, APPLE DOES NOT SUPPORT SERVICE WORKERS.. notification !== web push, people.. – Deci 22/11, 2016 at 12:27

You can use HTML5 Websockets to introduce your own push messages. From Wikipedia:

"For the client side, WebSocket was to be implemented in Firefox 4, Google Chrome 4, Opera 11, and Safari 5, as well as the mobile version of Safari in iOS 4.2. Also the BlackBerry Browser in OS7 supports WebSockets."

To do this, you need your own provider server to push the messages to the clients.
If you want to use APN (Apple Push Notification) or C2DM (Cloud to Device Message), you must have a native application which must be downloaded through the online store.

Siege answered 17/7, 2011 at 11:0 Comment(1)

well, it would only work if the browser is opened and in the webapp page. unlike push notifications, which work even when the appication is turned off. – Mangle 29/1, 2013 at 11:35

The W3C started in 2010 a working group to implement notifications:
http://www.w3.org/2010/web-notifications/

This Working Group develops APIs that expose those mechanisms to Web Applications—so that Web developers creating, for example, Web-based e-mail clients and instant-messaging clients can more closely integrate their Web application behavior with the notification features of the operating systems of their end users.

Finally the result is like a bad joke as it works only if the specific website is open: http://alxgbsn.co.uk/notify.js/

I think they missed to implement the possibility to add push urls so the browser is able to ask for notifications while its running in the background - and above all - if all tabs have been closed.

Scout answered 4/2, 2015 at 15:32 Comment(0)

Pushbullet is a great alternative for this.

However the user needs to have a Pushbullet account and the app installed (iOS, Android) or plugin installed (Chrome, Opera, Firefox and Windows).

You can use the API by creating a Pushbullet app, and connect your application's user to the Pushbullet user using oAuth2.

Using a library would make it much easier, for PHP I could recommend ivkos/Pushbullet-for-PHP.

Beading answered 18/8, 2016 at 14:32 Comment(0)

Check out Xtify Web Push notifications. http://getreactor.xtify.com/ This tool allows you to push content onto a webpage and target visitors as well as trigger messages based on browser DOM events. It's designed specifically with mobile in mind.

Masterson answered 20/6, 2013 at 22:57 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags