Menu
I've added the pwa modules (or schematic) and I've setup my manifest.json file correctly. On an Android device, my service workers are engaged, I get the install to home screen prompt and the address bar disappears and I can see the native look and feel. However, on Chrome/Safari iOS there is no prompt. Is there anything I need to do programmatically/additionally?
789
Installing PWAs on iOS and iPadOS To install one on iOS or iPadOS, load the PWA-capable site, choose the Share up-arrow at the bottom of the screen, and select Add to Home Screen. Note you can do the same for any website, but you won't get the offline functionality of a true PWA.
My PWA's index.html includes the following iOS specific meta tags:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Brew">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-ipad.png" type="image/png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-ipad-retina.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone-retina.png" type="image/png">
<link rel="mask-icon" href="assets/images/icons/safari-pinned-tab.svg" color="#5bbad5">
The "apple-mobile-web-app-capable" and the "apple-mobile-web-app-title" meta tags are required by Safari to show the 'Add to Home' screen:
Ref: PWA Tips and Tricks
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
