Search code examples
javascripthtmlweb-applicationsprogressive-web-apps

Does Progressive Web-Apps really works on iOS?

I am really confused by PWA on my iPhone.

First, before showing my code, I was trying to check how a good web-app look. Searching in Google for best progressive web-apps i open all of them on my iPhone in Safari, and clicked the Share button and then Add To Home Screen. (Uber, Flipboard, Twitter, Google Maps, Ali-express, etc)

When opening the icons from home-screen, it will open Safari again with that same page i was at, just like any website.

  1. No full screen
  2. No separate window (just opens in Safari like a website)
  3. No splash screen
  4. On Chrome- no "Add to home-screen" button

Basically just a website with an icon.

Then i was trying to do so on my website using Google's pwacompat library on my page.

I have added those into the page head :

<link rel="manifest" href="manifest.webmanifest" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="../images/logo.png">

then the JS library at the bottom of my html :

<!-- webapp manifast library -->
<script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js" integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA" crossorigin="anonymous">
</script>

Same again, i am adding this page to home screen, and nothing. No full screen, no different window, just Safari.

Do i misunderstand a fundamental thing about PWA ?

Solution

  • iOS started very late to open to PWAs and it still needs extra attributes (as you used) to provide the full set of PWA features.

    In Chrome DevTools if you go to Application tab (for your application), can you see that the web manifest with its properties is correctly displayed and the service worker as well?

    As Mathias said, you need an HTTPS connection to be able to register correctly a service worker. Localhost however is considered "safe" for developing purposes.

    I wrote a series of articles about PWA, you can have a look and follow along to see if you missed anything.

    Here a list of browsers supporting service workers (to compare with the safari version you are using).

    UPDATE

    I answer here to your comments:

    1. If some web sites that offers PWAs (eg. Uber, FB) work as PWA on other devices, but not on your phone, then I would try to investigate whether there is a setting missing on your side. I made a quick research and it seems that for iOS users some extra steps are needed to use/enable PWAs:

    The user has to access the PWA URL with Safari and then manually press the Share icon and then “Add to Home Screen.” There is no indication that the visited website is a PWA.

    About the "Add to home screen" in Chrome, I could not indeed find any official information when it has been removed. I can only say that I never seen it again since one of the latest versions (v74+).

    1. Every pages of a PWAs should be linkable in order to benefit from sharing it via social media apps. Therefore if you have a working PWA and you send links to others, these should work as well. There are no special browser restrictions, given that the app is correctly implemented.

    I leave you below some links where other people have similar issues with PWAs and iOS 12.2: