79

I was wondering what's the solution of progressive web app for IOS devices since their default brower SAFARI doesn't yet support progressive web apps. Whats the alternate then for IOS counterparts?

Manjari
  • 901
  • 1
  • 6
  • 10
  • 1
    Congratulations on your first question. As you may know, one of the many [requisites for a Progressive Web App (PWA)](https://developers.google.com/web/progressive-web-apps/checklist) is support for service workers in the browser. Unfortunately, [Safari doesn't support Service Workers](http://caniuse.com/#feat=serviceworkers) so the only alternatives are native apps, or a plain website. – José Luis Dec 16 '16 at 14:30
  • 1
    Following up on @JoséLuis a PWA should follow the principle of progressive enhancement and therefore be backwards compatible on Safari & iOS. This means that core features should still be usable and the application is progressively enhanced as new features are made available in the browser or OS. – Kevin Farrugia Dec 16 '16 at 19:17
  • 2
    See my answer below. I wrote an article calling out Apple. It caused quite a stir on twitter and hacker news. A week later they started development on it finally! – Greg Blass Aug 04 '17 at 20:36
  • 2
    Finally, Apple has added support for service worker in their TP. You can read more about safari's PWA support here https://medium.com/awebdeveloper/progressive-web-apps-pwas-are-coming-to-a-safari-near-you-216812aba5a – aWebDeveloper Jan 08 '18 at 11:59
  • 2
    Really gotta say that closing this as too broad is sooo f#%(#)ing stupid. Like seriously! Why? Why would you close a question as important as this? Just blows my mind. – Greg Blass Feb 04 '18 at 04:48
  • 1
    Apple shipped the first version of Safari with service worker and initial web manifest support! https://love2dev.com/blog/apple-shipps-service-workers/ There is still room for them to grow, but this is a fantastic first step! – Chris Love Apr 01 '18 at 12:29

2 Answers2

97

Please mind that "Browsers that support Progressive Web Apps" is not a real term, PWA itself is a set of features that a web app can provide for users. So it's not just only about Service Worker and App Manifest.

Check out: Baseline PWA Checklist.

Here are what you can do to achieve PWA on iOS/Safari at the moment this answer is created:

  • Site is served over HTTPS ✅
  • Pages are responsive on tablets & mobile devices ✅
  • The start URL (at least) loads while offline
  • Metadata provided for Add to Home screen ✅❗️
  • The first load is fast even on 3G ✅
  • Site works cross-browser ✅
  • Page transitions don't feel like they block on the network ✅
  • Each page has a URL ✅

As you can see, almost everything is working, even if your page can't work offline on iOS/Safari, there is still a huge benefit of "upgrading" your web app into a PWA.

What you really want is not the fancy title of "Progressive Web Apps" but a good web app that delivers a good experience and features for users. This is a journey as you can accomplish it by each small part, that's why it is called "Progressive".

Note on the "Add to Home screen: Safari has its own spec for "Home screen icon" called apple-mobile-web-app-capable in the meta tags. Web App Manifest Generator has a fallback for iOS using this meta tags.

Tony Dinh
  • 6,668
  • 5
  • 39
  • 58
77

EDIT 3:

Service workers have shipped in Safari for iOS on March 30th, 2018!

EDIT 2:

An Apple developer by the name of Ricky Mondello tweeted this on January 24th, 2018:

https://twitter.com/rmondello/status/956256845311590400

"iOS 11.3 and macOS 10.13.4 include Service Workers — a powerful specification that allows background scripts to power offline web applications. iOS 11.3 also consults Web App Manifest when adding web apps to the home screen."

Awesome!

No word of push notifications yet, but still amazing news.

EDIT:

I wrote an article calling out Apple on the topic:

https://m.phillydevshop.com/apples-refusal-to-support-progressive-web-apps-is-a-serious-detriment-to-future-of-the-web-e81b2be29676

It got posted to hacker news and got some good exposure on Twitter. A week later, they started development on it. So - stay tuned, it seems to be finally on it's way!

ORIGINAL ANSWER:

"So it's not just only about Service Worker and App Manifest."

In my opinion, that's exactly what a PWA is really about - the service worker. That is what allows you to do all the awesome things that PWA's make possible. The baseline has been possible to accomplish for a long time now, and while google has technically established them as a baseline classification, those things are not what really make a PWA what it is. Otherwise its just a regular responsive web app in my book.

Here are a list of things you still can't do with mobile safari due to Apple's refusal to support them (because they'll lose app store money):

  • Create an app loading screen
  • Use push notifications
  • Add offline support
  • Create an initial app UI to load instantly
  • Prompt installation to the home screen through browser-guided dialog

The accepted answer really paints the wrong picture here. I've pushed the apple 'native' like experience in mobile safari to its limit, and it is still pretty bad. I've experienced numerous issues with mobile safari's full screen mode, and Apple just doesn't care about them. It's treated like a second class citizen because it doesn't generate money like the app store does.

You'll notice that if you add Twitter's new and awesome react/redux-based mobile site to your home screen on iOS, it doesn't open in full screen mode. I suspect that's for the same reasons that I found - bugs galore, with no one on Apple's team working on them.

The loading screen that was once possible in iOS fullscreen mode that was available in the web app manifest has mysteriously stopped working, with no comments from Apple whatsoever in their forums on posts on the topic. And having to tell users, "Oh hey, just click share, then slide over to 'Add to Home Screen" is a horrible way to have to go about things.

Its a sad state of affairs. The list in the current accepted answer should really be called "Baseline Responsive Web App List".

And to answer the question here - no, there is no alternative and there is nothing you can do. You have to play Apple's game, pay $100 to get access to the app store, and learn a completely different and more complex programming language, and keep a completely separate code base.

I just spent 6 months learning React Native for a client project, and it has been awesome. I would highly recommend it. You can create truly native apps using JavaScript and share your codebase between iOS and Android.

To be clear, I'm not anti-Apple. I use an iPhone and develop on a Mac. But this aspect of their business strategy is surely a shame.

Greg Blass
  • 3,523
  • 29
  • 42
  • 2
    I find Swift/Xcode to be the easiest language/IDE to use on the market. They built a modern developer language and a new paradigm, protocol-oriented programming, that solves many of the problems associated with multiple inheritances. The fact that they haven't tried to expand its use beyond their own products is a shame, but to call it more complex over TypeScript/JavaScript would be misleading. I think TypeScript is an ugly bandaid they put on an ugly language. I wish web browsers spoke swift instead. – Ryan Dines Apr 18 '18 at 18:03
  • Someone mentioned that same thing to me in my article. I edited it to say more 'verbose'. But you're right - I'm probably biased coming from the web. But the Facebook teams were able to iterate 5 times faster on the web than native apps, which is why they made React Native - so I think there is some merit to it. – Greg Blass Apr 18 '18 at 20:37