Problem:
Web page with sms: and mailto: links fail on ios mobile safari browser. A click on the link redirects you to:
Safari cannot open the page because it cannot redirect to locations
starting with "sms:"
or
Safari cannot open the page because it cannot redirect to locations
starting with "mailto:"
These used to work just fine up until around two or three months ago. Now these fail on Apple mobile devices using the Safari browser.
Background:
I create responsive web pages for activity based teams. One of the things we do is provide a team roster. The roster includes links for telephone numbers, SMS text pages and Email.
To keep things simple, we are using simple web pages.
Because of security and privacy concerns, this content is only served via ajax call via node.js server after login. We're using a single node.js Express server to host the website content and manage http/api calls.
Generally a click on the link pushes the mobile device into the appropriate native app for a phone call, SMS text message or email.
This has been working great for a couple of years, on all devices.
Lately we're seeing the problem on iPhones... but...
Here's the really weird part. I've got three teams using this technique.. The failure is only on TWO of the three teams. SMS link works just fine there.
The "tel:" link works fine on all devices.
The failures only occur on two of the three sites for sms: and mailto: on the iphone. Things still work just fine on Android devices, on Windows and on MacOS. The problem is Apple mobile devices.
The two sites that have the failures are Progressive Web Apps, with a manifest.json file and service_worker.js. The site that works fine has neither of those. When I remove the manifest, and turn off the service worker there is no improvement.
All three sites hosted via App engine at Google Cloud. The two sites that fail are only using web_app.appspot.com addressing. The site that functions well is using a real URL, pointing to the app engine location.
Typical Code:
<li>
<div class="userName">Jane Doe</div>
<div class="phoneNumber">321-555-1234</div>
<div class="sms"><img src="../images/crosstxt-icon.jpg"></div>
<div class="email"><img src="../images/email-icon.png"></div>
</li>
I wonder if this will show the issue, if you open this up in the browser of your Apple mobile device:
Click here to create a SMS message.
<br>
Click here to create an email message.
Apparently that's a fail. You don't even get to see the run snippet button on my mobile device.
Testing, more testing...
I just figured out... if I save the site to my mobile device homepage, such that an icon is added to home screen and in display mode, you can NOT see the top URL address bar, nor the Safari options bar on the bottom then the SMS: will fail. If you just open the address in Safari, but don't save the file, then it will work great.
Again, when I'm in Apple Web Application mode, the SMS link fails.
One hack... open the site via Safari mobile browser on the iphone. Save the site to Home Page. Verify the Icon is on the mobile phone. Go to Settings --> Safari --> Advanced --> Website Data, then Delete the site by sliding the content left. Cache storage is clean, but the Icon remains on the mobile screen. Use the Icon to aid in login, but don't save the site again. Note the URL line is visible. SMS will work.
Still testing here...
I tried to build a simple example to show the issue. I was totally unable to get the sample to fail with the error messages above. For reference the test site is here. The test source code is here.
I'm suspecting that the issue revolves around the fact that the two sites in question are both located at a subdomain site. (mywebapp.appspot.com) When the manifest includes all "valid" content the site does appear as a ios Apple Web app without visible URL line... but whenever I'm in that mode, SMS links are a total fail.
With that said, you can control the storage mode via <meta name="apple-mobile-web-app-capable" content="yes"> .
During my testing, I also noticed that whenever the manifest.json file contains // comment marks anywhere the file is ignored by Safari. Normally // comments are not allowed in a .json file, but according the MSN source, they are fine in a manifest.json file.
The choice is
a bit ugly and functional, or
pretty and non-functional
Currently I'm running <meta name="apple-mobile-web-app-capable" content="no">... I get the advantage of a custom icon on the home screen, even though the web app is still obviously inside a mobile browser with top/bottom info lines visible, sigh.
Related
I recently published an app to the app store and am trying to put a "Download on the app store" badge on my personal blog. I first used the badge generator tool at https://tools.applemediaservices.com but noticed when I click through the badge on an iOS device (my iPhone and my brother's iPhone), I am directed to a shady "Spin the Wheel!" or "You've won!" webpage. When I click through via desktop web browser, the link opens up the App Store just fine! I'm baffled. I reworked everything from scratch and same behavior persists.
Blog Link: https://keeganleary.com/flutter-app/ (The Badge is just below the web app)
Clicking with thumb on iPhone redirects to pages with goobly-gook addresses like (Don't Follow, I added some ... to hopefully keep anybody from following this link!): https://4i9...gx8uxvn13l...top/t/fe312738ec36/99fda6ec-568c...1=
If I long-press and copy link, then paste into browser on iPhone, it opens up the App Store like it should!
Functionality is same on Chrome and Safari, and two different iPhones.
My code
<figure>
<a href="https://apps.apple.com/us/app/super-pace-calculator/id1548388283">
<img src="https://keeganleary.com/content/images/2021/01/Download_on_the_App_Store_Badge_US-UK_blk_092917.png">
</a>
<figcaption></figcaption>
</figure>
My best guess is my website or iPhone browser is hacked somehow but I have no idea. Tried clearing caches as well but same thing happens.
I analyzed your site and found no virus.
I noticed that you are using disqus on your site, I am almost sure that these ads came from the disqus that, unfortunately, inject ads without our permission, generally unwanted or deceptive low quality ads that can even hinder users' navigation.
Take the test, disable DISQUS from your site and see if the ads disappear.
unfortunately I have not found another way to disable these ads if not buying the subscription where you can disable the ads.
I need to be able to translate my web application into another language. I enabled the google translate extension in chrome. When I load my company website with chrome the translate icon appears and I can translate the site. I then loaded my secure web application in chrome and the translate icon disappeared. My knowledge on how the translator works with web pages in minimal at best. Any help would be appreciated as I do not know where to begin. Any links to helpful articles on how the translator does its job would also be appreciated
I also had a problem with the google translate (gt) icon disappearing from the right side of the Chrome address bar. I believe I caused the problem myself as I was trying to come up with a way to use it to switch languages quickly using Keyboard Maestro.
I keep 2 Chrome windows open with 2 different gmail accounts, and the gt icon was only missing from one of the windows. I tried many things and couldn't get the gt icon to come back.
Eventually, I was able to fix the problem based on the procedure described on this page, which suggests going to this address: chrome://settings/languages to make sure the Offer to translate pages that aren't in a language you read option is on in the Languages section, as shown in this image:
In my case, the option was already set to on. So I turned it off, logged out of the account associated with that Chrome window, closed that browser window, and when I opened a fresh browser window for that gmail account the gt icon was back.
I'm using Chrome Version 96.0.4664.93 on a MacAir (M1, 2020) running MacOS 12.0.1
I suspect this must be intentional on Apples part but I will ask anyway because it works from both mobile and desktop safari.
I create a simple .vcf contact from inside my web app and try to download (aka export) it.
This creates a .vcf file in desktop Safari that is actually downloaded where the user actually has to click that to get it into contacts. And in the mobile safari version (without saving to home screen), the exact same code will pop up a warning screen mobile .vcf warning which at least gives the user the opportunity to import the .vcf into contacts.
Admittedly neither the desktop or mobile safari use case it a good user experience but at least they work.
Whereas, the exact same code saved as a homescreen mobile app simply fails without error on an iphone (i.e
)
I have tried multiple ways to export from the app (most of which work from safari mobile or desktop browsers if NOT web app capable)
as a blob from base64 text/vcard
as base64 text/vcard
using window.open(vcftxt); // where vcftext is base64 text/vcard
using location.href = vcftxt; // where vcftext is base64 text/vcard
using an a tag with download= and href= vcftxt url
All the above work..just not in a homescreen app that appears native
code example (run on iphone safari...not tested on android)
https://www.airbridgelabs.com/s/0/app3.html?sd=100 - Click on contacts logo at the bottom when this page opens in safari and you will see the warning which still allows the user to open the .vcf in contacts
https://www.airbridgelabs.com/s/0/app3.html?sd=100&tm2=100 - This will walk you thru saving to home screen or you can simply save to home screen manually without the tm2 parm. click on the contacts logo at the bottom when this page opens in safari and you will see nothing. Safari developer remote console shows no errors or warnings...simply does not work.
I figure I can probably pass the created .vcf to a page on my server which in turn opens the .vcf which will likely then export it to mobile contacts..but that is a lame solution which still requires the user to be online to save an embedded contact.
And please don't use the argument that this is about security. If it was about security then you wouldn't be allowed to do the exact same thing from a desktop page, or mobile safari page or hybrid native app...and you can. This looks like Apple simply reducing the value of mobile web apps that look native.
What I am looking for is an offline work around to simply save a mobile contact already coded into the mobile web app capable content the user intentionally created.
I have a local Web Site created in Angular 2. I access to my Web Site via: http://192.168.1.17/.
I have this strange situation:
On my phone, I go on my Web site (http://192.168.1.17/).
Then, on my computer, I do the same: I go on my Web site.
Finally, I scroll the web page with my mouse and I see the page scrolling automatically on my phone !
Why there is a communication between my two devices ? Is it a communication coming from Chrome ?
Note: if I 'Inspect' the page in Chrome, I don't see transfer on network in 'Network' tab.
I made an offline webapp.
Used application cache and all the resources are added in .appcache file.
I have also added meta tag suggested by apple.
<meta name="apple-mobile-web-app-capable" content="yes" />
When I add it to home screen, it is added & opening in full screen mode.
While all the resources are cached by browser and I am getting no cache update request on reload.
But I try to open webapp while I am offline first time, it is giving me alert "Could not be opened because it could not connect to the server".
By the all the resource of app is already cached by browser still getting this error first time.
But If I open webapp first time while I am online, it is caching all the resources & then second time app is working fine even in offline mode.
Thanks Guys.
When you add to homescreen that is the first time only a reference is added, think of it like a bookmark no content gets downloaded. That only happens after you open it for the first time. Seeing the web app in safari & adding to homescreen does not count since apple seems to maintain the data separately for apps added to homescreen via safari.
The Browser is a different app to the one which runs home screen web app.
I got caught the same way with my offline web app, to debug you change the settings in safari but the actual cache is different, the executable running the home screen app is different, it has several safari functions missing - google uiwebview and wkwebview
I don't know what is currently used for the user agent string, but they used to be different for browser based and home screen based back in ios7