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.
Related
I have a simple app deployed in GitHub pages (my web-app). The app has some inputs and I tried to use it offline on my Android phone, by clicking the download button on Chrome, which downloads the HTML; but all the inputs and buttons are disabled.
If I click the file that was downloaded in 'Files' and try to open it on Chrome or Brave, all the inputs appear to be disabled, but when I refresh (or enter online mode again), they return to be available.
Is there a work around to this?. I want to build an offline web-app, but it seems that forms can't be incorporated.
I tried to test this error in dev tools using my computer, since there is an option to emulate being disconnected from the internet. But the doesn't go very far, since the website only appears with 'No internet' and not really with the offline view that I get from my cellphone.
I'm teaching a Year7 class via Zoom on writing HTML, and I have one student on an iPad (the rest are on desktops/laptops), and they're not able to get their webpage to open in Safari (I'm using Chrome on Windows, which of course is simply a matter of double-clicking on the file). I'm trying to see what she sees, but I think Zoom is possibly not showing me the pop-up dialogues. She is using Notes to write the page (which looked to be the closest iOS equivalent to Notepad).
I Googled and sent her a few blogs, but still not working. I said she needs to click on Share and look for something like "copy path to file" or "copy link", and then paste that into the Safari address bar. She said when she did that Safari was showing the source code, not the rendered page. When she just taps the file it opens in Notes, not Safari. That made me suspect her file was actually index.html.txt (she tells me she has extensions switched on), but when I sent her my own file, which is definitely only index.html, she says the same thing is happenning.
Is anyone able to give me some definite step-by-step instructions (this is for a Year 7 student) on how to open their local HTML page in Safari?
thanks,
Donald.
Safari iPad no longer supports access to local or iCloud files. A number of iPadOS apps will however allow a user to view, edit, and test html code in files stored in local iPad, iCloud, or third party (e.g. Google or Dropbox) storage folders. One needs only to search in the App Store for “html editor” to see the list. Some of the apps have features that rival or exceed those found in tools on desktop (laptop) systems.
I had the same issue today on ios15.
There is a free app called Koder available on the App Store which will let you edit and view the HTML file. I’m no expert but the editor looks pretty fully featured at first glance.
Sorry to say but an iPad is obviously not the best place for simple HTML editing. At least not with the default apps available on iOS.
Given an existing HTML File one can use Files app to navigate to it and open it with double click. This will open the file in a very simple viewer wich is at least able to render the HTML. As a developer i bet its using WKWebView which is basically Safari's HTML View.
Turns out Microsoft Edge, unlike Safari, can still open local html files. Discovered in this answer. To wit:
Install Microsoft Edge from the App Store
Open Files (or whatever file browsing app you like).
Open the file, then tap the Share button to send to another app.
Scroll across to "More...", choose Edge, and voila!
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.
I can't set where the results open anymore on mobile devices. On desktop I've set to open them in a new tab but on my iPhone they open in the same tab. I am logged in with the same account where I have that setting. I cannot access the particular setting on my phone though. It happens in all browsers so it must be a setting in the Google site, rather than in my browser.
I've been pulling my hair out since it happened in IOS 9 or so. Searched endlessly to no avail. I don't even know if it happens to others. It seems so rare that I can't even select an appropriate tag in this post so I had to choose google-chrome.
I have been facing the same issue on Android and BlackBerry and this helps:
Navigate to google.com
In Menu check the Desktop site (or Request Desktop version)
Navigate bottom down on the re-rendered page and choose Settings -> Search Settings
Touch the Open each selected result in a new browser window in the Where results open group
Hit Save
Switch off the Desktop Version mode
Hope this helps.
I'm trying to build a html5 web app to be used in offline mode on iOS devices.
I've created the cache.manifest file and put my html, css & img files.
I have two main issues with my offline web app:
1) Offline Mode Problem. Procedure:
a) open the webpage in Mobile Safari
b) bookmark it to the Home Screen.
c) I close the safari
d) put the app on airplane mode.
e) open the app from home screen app icon
I get the error "Turn on cellular data or use Wi-Fi to access data", but if I open the same location from Safari it works fine.
The only way I can solve this is before I put the device on airplane mode, I have to open the app from homescreen and close it and put the device on airplane and when I open the app afterwards it works fine.
Is there anything wrong in my way of making the app or is this the way Apple has implemented the "add to home screen" feature, so whenever a user add a offline enabled webapp the user should at least open it once before its working as an offline version?
I thought this was the entire purpose of an offline app!
2) Multiple pages
I have created two sample pages(index.html & subpage.html) for the web app offline purpose.
When I click the app icon from the home screen the web app is opening fine in the full screen mode, but when I click the link to the subpage.html from index.html it opens it on safari browser thereby goes out of the fullscreen app mode.
I have tested the above mentioned problems in the following devices and same errors/userexperience I get.
iPhone 4S - iOS v6.1
iPad Retina - iOS v6.1
I'm no expert, but from what I've learned, the page must loaded at least once while connected to the internet. The Html5 offline works great, but it can only load the page offline after it has been loaded before. The iPhone cannot open an app when it hasn't downloaded the .manifest file and .html, .js, .css, etc.