I have a mobile-optimized website with the necessary code to it available as a webapp. This site includes links to place calls and send emails. This has worked for years on iOS. However, it no longer works on iOS 7. Here's a stripped down version of the code. I verified that after "adding to homescreen", opening the webapp, and tapping the phone number, it works in iOS 6 but not iOS 7.
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
(212) 555-5555
</body>
</html>
Is this a bug in iOS 7? Or do I need to add something new for it to work in iOS 7?
When I look at the RFC's (# 2806, which defines the "tel:" URL scheme), I never see parenthesis characters in the example URL's.
And in the "Phone Links" example in Apple's URL Scheme Reference, Apple shows how they use HTML that looks like: "1-408-555-5555".
My guess is that - as of iOS 7 - Apple has tightened up a bit on how "tel:" URL's can be defined (e.g. parenths might require escaping or proper encoding).
So try getting rid of the parenths and see if you have better luck.
IOS7 can not link from webapps, you can't open URL's, App Store, Youtube either.
So it's not a "tel:" issue :-)
But they do work if you remove:
And make it just a home screen bookmark, not a webapp.
Mac
Related
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?
iOS
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
Update March 2020
While the add-to-homescreen prompt support is still not available on iOS, the pwacompat package (developed by the Google Chrome team), will allow you to easily generate the required assets(splash images and touch icons) for PWA support on iOS devices.
Installation:
npm i pwacompat
This will ensure that your PWA will be supported even in non-compliant devices/browsers, without the need to manually specify the link tags on your document's <head>. More specifically, for the case of Safari, the pwacompat package will do the following:
Sets apple-mobile-web-app-capable (opening without a browser chrome)
for display modes standalone, fullscreen or minimal-ui
Creates
apple-touch-icon images, adding the manifest background to transparent
icons: otherwise, iOS renders transparency as black
Creates dynamic
splash images, closely matching the splash images generated for
Chromium-based browsers
You may read more about the package on their documentation.
On Android devices(or more specifically, Chrome mobile web browsers on Android devices), PWA-enable web apps will receive a prompt to encourage the user to add the PWA to the Home Screen. It may look something like this:
Image credits: Andy Osmani (Getting started with Progressive Web Apps)
On the other hand, iOS does not support that PWA installation prompt.
Users can only add it as a PWA by tapping it on the 'Add to Homescreen' button. For those who are wondering, the OP is referring to this:
Image credits: Expo
The following types of asset files (Touch icons, and Splash screens) are required for PWAs on iOS devices.
1) Touch Icons
On the header tag of your index.html, you will have to add <link rel="apple-touch-icon" sizes="192x192" href="/example.png">, like this:
<head>
<link rel="apple-touch-icon" sizes="192x192" href="/example.png">
</head>
Do take note that the icons size should be at least 180x180 pixels or 192x192 pixel. You may read up on the good practices on the documentation.
2) Splash Screens
You will use the rel attribute apple-touch-startup-image to enable splash screens on iOS devies.
<head>
<link
rel="apple-touch-startup-image"
media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
href="example2.png"
/>
</head>
Here is a working example by Evan Bacon of the full list of tags will need for the touch icons
You may also check out this blog for the list of PWA features supported on iOS.
Of course, there is that conspiracy theory whereby Apple is intentionally slowing down the adopting of PWAs due to the possiblity of competition with their native App Stores, which is a huge source of revenue for the company. I leave it for you to decide if that is really true 🙃
Here is a code snippet for detecting if the app is on IOS and triggering a popup to add to home screen:
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
// Checks if should display install popup notification:
if (isIos() && !isInStandaloneMode()) {
this.setState({ showInstallMessage: true });
}
I use JavaScript in both iOS and on android to check if the app is in standalone mode and display a prompt on iOS and non-chrome browsers in android. I just let chrome do it's thing as it's efficient enough. On iOS, only safari supports service worker installs for now.
We have an https webapp using an html cache manifest so it can run offline.
We instruct our users to add it to the homescreen for the best experience (no address bar on phones, etc etc). We have an issue where if you remove the app from the homescreen, close safari and then re-open and re-add to homescreen, the app will not use the app icon and cannot complete https requests and is missing some cached data.
The app will continue to always work great in safari itself, all resources are cached and loaded, and all https requests work fine.
Here are the steps to reproduce this, we have done it on an iOS 7 iPhone, iOS 8 iPhone, and an iOS 7 iPad2. This may work for other webapps making https requests and using cache manifests, but I'm not sure. This reproduces with a real cert as well as a self-signed cert.
Steps to Break the Webapp
Go to the homescreen
Tap and hold on the Webapp App Icon
Tap the little x that appears to delete the app from the homescreen
Tap the home button to close the edit mode
Double-tap the home button
Swipe up on ALL open apps (Safari and Webapp if open)
Re-open Safari (should reload the webapp)
Tap the share button and add to homescreen. (Should NOT show logo)
Open the app from the homescreen and attempt to deploy
Steps to FIX the webapp
If the Webapp exists on the homescreen, do the following:
Tap and hold on the webapp icon
Tap the x that appears to delete it
Tap the home button to close edit mode
Open Settings->Safari
Tap Clear History
Tap Clear Cookies and Data
Open Safari, type in https://OurWebappURL
Tap the share button and add the app to the homescreen (Should show logo and “AppTitle”)
Open the app from the homescreen and deploy
Here is the chunk of the html <head> tag that tells it to run as a webapp and use an app icon (it's cross-platform).
<html lang="en" manifest="cache.manifest">
<head>
<title>Our App Title</title>
<!-- Enable the homescreen app on mobile devices -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- Enable the App Icon -->
<link rel="icon" type="image/png" sizes="196x196" href="images/AppIcon.png">
<link rel="apple-touch-icon" href="images/AppIcon.png">
<link rel="apple-touch-startup-image" href="https://ourURL/images/iPhoneStartup.png">
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, height=device-height, width=device-width" />
<meta http-equiv="content-language" content="en">
If we remove the <meta name="apple-mobile-web-app-capable" content="yes" />, causing it to open safari and load the app there, it works fine, as it's just running inside safari. However, this is not the experience we want, so it is a workaround, not a solution. This also doesn't fix the issue of adding to homescreen the second time, the logo is still not used.
We're not registered as apple developers so I can't log a bug report. Please chime in with any ideas or feedback, this is a very tough one!
EDIT: I've now tested this with an http (no SSL) version of the same application and it works fine, this appears to be an https issue.
We determined that the cause of this is having a wildcard cert that has an incomplete certificate chain, or by using a self-signed cert.
Fully signed single-domain certs work great most of the time, and we're recommending that to our clients, but it appears that you can repair cert chains by contacting your cert provider and requesting the intermediate certs to install.
We did not do that in this case, we went to a single-domain cert with a shorter chain, as far as I can tell.
I am trying to use Facebook's new App Links metadata to cause the Facebook app to launch my native app on iOS. So far, it isn't working.
This is what I've done:
1 . I created a file called test.html with the following code:
<html>
<head>
<meta property="al:ios:url" content="MyAlScheme://test" />
<meta property="al:ios:app_store_id" content="123456" />
<meta property="al:ios:app_name" content="My App Name" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
<h1>Test</h1>
Launch App
</body>
</html>
(* 123456 and My App Name were replaced with the real app name and ID)
2 . In my XCode project, I registered the Scheme MyAlScheme in the app's plist. (Note: Proof that this scheme works is below).
3 . I sent a link to the aforementioned test.html to another user via Facebook Chat.
4 . I clicked on that link and the web page opened, though I am expecting the app to launch instead.
5 . With the web page opened, I clicked on the "Launch App" link. The app opens up (as expected), proving the the custom scheme is properly registered.
What am I missing?
Answering my own question:
It appears that this is a limitation, specifically, of the iOS Facebook Messenger app. It doesn't support App Links yet.
The same link, if accessed through the main iOS Facebook app (for example, if you post the link on the wall then click on it from the feed), works correctly: The Facebook app creates a special button on the status bar which allows you to open the link in the native app.
Currently, the way this works is that the webview is loaded immediately, but when an AppLink is detected, a native button is shown that allows the user to jump directly into the app. Things are being tweaked a little bit so you may see a slightly different user experience, but the general pattern should be immediate webview + native UI to jump straight into the app.
I am developing a hybrid application which supports android and iOS.
I need to embed the youtube video in the application such that it should be opened within the application.
I have tried using iFrame and it is working on the browser.
But in the iPhone the youtube video which is embedded in the iframe is opening in the external browser and not withing the application.
Searching on google, I found that in the cordova plist (cordova iOS application) there is option to allow allexternalURL's to be opened within the webview. But, this is impacting other places where few url's should be opened in the external browsers and not within the application.
Please suggest if there is any way to integrate the youtube where the video should be opened within the application for hybrid app.
Here is a nice Tutorial
codes For a quick Access.
<html>
<head>
<title>YouTube video</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="phonegap-1.2.0.js"></script>
</head>
<body>
<iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>
</body>
</html>
*.youtube.com
*.ytimg.com
Video will play on your Simulator Also.
Have you noticed that some sites in iOS safari will show a banner to let the user know the app is installed? How does this work? Is this a meta tag?
Thanks
You should include <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> in your webpage's head.
Please check this link for more information: http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
NOTE: It only works with iOS6 or later!