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.
Related
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 am working with Safari web app for iDevice. I got the configuration right from Configuring Web Applications and it went well without any issues. In my web app, there is a link for logging out the web page that requires to redirecting the webpage. The problem is when it redirects, it opens Safari app instead of redirecting in the web app. It's not like Google Chrome on Android device, it works well.
I solved it by using javascript to redirecting instead of using a tag.
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.
Im developing a web with facebook share link function. I notice facebook mobile apps will open shared link in its own browser, instead of mobile broswer (IE. safari, chrome and so on). Is there any control on this able us to force facebook open the link in mobile browser?
No. The only reliable workaround is if you use the web app with an iOS app, and all users install that iOS app, you can send users to your iOS app to accomplish that task which isn't a great workaround.
An easier but still not optimal solution would be to detect the Facebook browser in the user-agent string, and display a message to prompt users to visit the URL in the mobile browser.
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