How to show home screen prompt in IOS device using

问题:

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^^^^

回答1:

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

回答2:

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

回答3:

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.