How to show home screen prompt in IOS device using PWA

Question

I am new to PWA and I am stuck on one task.

Here is my manifest.json file which helps to display add to home screen popup to android device.

{
  "short_name": "The Cozy",
  "name": "The Cozy",
  "icons": [
    {
      "src": "/img/app-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/app-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/img/app-icon-64x64.png",
      "sizes": "64x64",
      "type": "image/png"
    }
  ],
  "start_url": "/login",
  "display": "standalone",
  "theme_color": "#ffc107",
  "background_color": "#ffffff"
}

But the problem is It doesn't show in the IOS device. Is there any way to show it on IOS device using register worker?

Any would be highly appreciated. Thank you.

Edit: 1

Can we even open the share tab

This^^^^

@PyaePhyoeShein Any javascript hack? Please suggest something . — Profer, Dec 13 '18 at 07:03
could you refer that one https://www.monterail.com/blog/pwa-for-apple-ios? — PPShein, Dec 13 '18 at 07:17
@PyaePhyoeShein Thanks but it is just a theory. No code added there. **:-(**. **+2** — Profer, Dec 13 '18 at 07:23

Adrien · Accepted Answer · 2018-12-13T09:51:11.200

4

Manifest is not managed by iOS yet (in development currently). There is an interesting library to add the essential elements for iOS automatically. But there isn't no way to show a home screen pop-up at this moment...

https://github.com/GoogleChromeLabs/pwacompat

You can follow the status about features on iOS here : https://webkit.org/status/#specification-web-app-manifest

edited Dec 13 '18 at 09:51

answered Dec 13 '18 at 09:45

Adrien

914
7
9

score 2 · Answer 2 · answered Dec 13 '18 at 07:30

2

Could you refer following link https://www.monterail.com/blog/pwa-for-apple-ios?

In that link, he already mentioned that

Once you enter a website, you won’t be greeted with the Web App Banner and you will need to use “Add to Home Screen” option in the share sheet. As you can in the screenshots below, there’s no sign that you’re adding a PWA rather than a website.

Now what you need to do it, you need to check current user-agent is apple or safari device, you better display popup dialog that saying Click share button and click Add to HomeScreen button to install your app at device.

answered Dec 13 '18 at 07:30

PPShein

13,309
42
142
227

I have just edited my question please have a look at edit part last time. – Profer Dec 13 '18 at 07:30
Thank you, You are right. But I can only accept one answer. – Profer Dec 14 '18 at 05:28

score 1 · Answer 3 · answered Dec 13 '18 at 07:14

Apple has difficulties with manifest.json links. Difficulties as in, they don't work.

iOS is lagging severely behind when it comes to PWA support, which is ironic, since they are the onces that launched the idea; Steve Jobs' original vision of apps were in fact PWA's.

To install a PWA on a iOS device, you need to press "share" in Safari Mobile, en there you can find an option to "add to homescreen". This is the only way to install a PWA on iOS.
You can work with this, by checking if the user's browser is Safari Mobile (Google to find out how that works). If so, simply display a div on your page, with some explanation on how to install the PWA ("hit share and add to homescreen to install" or something like that). There is no way to automatically prompt the user to install like Chrome's 'beforeinstallprompt'

You don't have to worry about Chrome or Firefox for iOS, because they don't work anyway. iOS only allows PWA's to install from Safari Mobile

I have just edited my question please have a look at edit part last time. — Profer, Dec 13 '18 at 07:32
AFAIK, this is not possible. Apple is... very restrictive when it comes to PWA's and websites. — Smallwater, Dec 13 '18 at 07:38
Thank you, You are right. But I can only accept one answer. But upvoted your answers — Profer, Dec 14 '18 at 05:28

How to show home screen prompt in IOS device using PWA

3 Answers3