I have a webapp done with jqtouch and the offline cache is not working when I add it to the homescreen as a fullscreen app, I finally found out what was causing the app not to cache, it was when I added it to the homescreen in fullscreen with
<meta name="apple-mobile-web-app-capable" content="yes" />
that it didn´t work.
If I remove the tag then the cache is working!
Any suggestion really appreciated since I need my app to be in fullscreen.
Thanks.
This is less of an answer, but I've been fighting with the same problem for a while, without a solution: https://stackoverflow.com/questions/21564399/offline-webapp-on-ios7-stops-working-after-export-to-home-screen
Your workaround seems at least promising, are you using IOS7?
Related
Question: what might be the cause of the iframe not working properly only on IOS, iphone?
It seems like it's zooming in automatically, but that is not the intention
How can this be fixed?
Sounds like the viewport issue to me.
I've seen this before... Here is a solution that might work for you in this case.
<meta name="viewport" content="width=device-width, user-scalable=no" />
Add/modify this tag in your and let me know if it works.
Note that by doing this you will be removing the option for the user to pinch and zoom on your site. Most the time you don't have to care about that but some users depend on the functionality.
We've been working on a web app and did some work to make it more PWAesque, so we added <meta name="apple-mobile-web-app-capable" content="yes"> to our <head />.
This ended up being more problematic as we hadn't thought to implement our own navigation UI (back and forward etc) and it appears that as soon as you exit you lose your logged in session.
So this ended up negatively impacting experience and we've decided to remove <meta name="apple-mobile-web-app-capable" content="yes">.
Easy, right?
Nope.
Even with the removal of this meta tag and new installations to the Home Screen (and on different devices where it was not previously installed) it continues to open in standalone mode rather than in Safari.
I've scoured Google pretty hard but maybe I'm not searching the right terms.
Is there a step that I've missed? Has any one encountered this?
Thanks in advance!
The answer is that it was in our manifest.json file.
I'm trying to build a simple single HTML page that can be launched when offline (on Android, if that matters).
I'm using the Web App Manifest to give the app a name for adding to the home screen and display fullscreen with no browser chrome. This much works.
<!DOCTYPE html>
<html>
<head>
<link rel="manifest" href="mf.webmanifest">
<meta name="mobile-web-app-capable" content="yes">
</head>
...
</html>
This does not appear to be cached when offline. Separately, I can make a page which is cached offline using the application cache:
<!DOCTYPE html>
<html manifest="mf.appcache">
<head>
<meta name="mobile-web-app-capable" content="yes">
</head>
...
</html>
However, when I try to combine these two (so I can have an offline-cached page that launches fullscreen), the Web App Manifest is ignored and I only get the offline behaviour as in the second example.
What I ultimately want is a single page that can be added to the home screen, that opens full screen with no browser/OS chrome at all, and is cached for use offline. A solution that works just on Android using Chrome 65 is acceptable.
That's an interesting dilemma! I wonder if you would have better luck using
<link rel="manifest" href="/manifest.json"> as described by Google. Here's a link to their recommendations for the Web App Manifest.
The Web App Capable meta tag is primarily for full screen capabilities. If you want caching specifically, I think using the http-equiv="cache-control" header tag and its directives is closer to what you're trying to accomplish. Especially since Service workers aren't globally supported yet. I found a decent explanation on HTML caching here on stack: "How to set HTTP headers for cache-control."
Edit: another user has pointed out that Chrome will not honor this tag if a display is set up in the manifest file
The Service Workers feature provides the same capabilities as the deprecated Application Cache.
MDN has an article on Using Service Workers which I found very helpful in implementing what I needed to replace the Application Cache.
I am trying to find a solution of the IE white flash in a meteor app.
The website is this one (note that it's in closed beta).
IE9 gives a very bad user experience, and while I don't think it will ever be as good as with more modern browser, I really think some issues should be resolved.
And I think that the white flash on page change it's the worst one.
Basically for every action that changes the url, the page redraws itself and flashes white for a few milliseconds.
I've read other topics and tried to apply some of the suggest fixed, but nothing worked.
I've tried to insert
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
But I think it does nothing on IE9 or in this case.
I also tried to set the background of html and body to dark gray, it did nothing.
I'm actually not sure what else should I try and if this is a common issue when building website with realtime, modern frameworks.
Thanks in advance.
P.S. I also found this issue in iron-router, and it seems that IE<10 trigger a full page refresh every time, and probably that's the main cause of what I'm seeing, because Meteor needs a bit of time to load itself, thus leaving the page blank while it's doing it's magic.
this meta tags
<META HTTP-EQUIV="Page-Exit" CONTENT="BlendTrans(Duration=0.0)">
<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.0)">
not supported in IE9.
As solution for you example you can use compatibility with IE8
you can add
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I'm trying to create an offline-web app and my cache.manifest file is
CACHE MANIFEST
http://www.page.com/index.html
http://www.page.com/d3.js
http://www.page.com/list.csv
NETWORK:
*
And the beginning of my html is html manifest="cache.manifest"
To format the app and make it run full-screen, I included this tag in the header:
<meta name="apple-mobile-web-app-capable" content="yes" />
But doing that and running it from the homescreen will result in the app failing, and requesting an internet connection.
If you take that one line out and run it from the homescreen, it will open in safari with the url bar and everything, but the app will run correctly.
I've seen this problem discussed in a couple places such as here and here, but never with any working solutions or explanations.
Does anyone know why this is or how to avoid it? Thanks in advance.
<meta name="viewport" content="width=device-width, minimal-ui">
For iOS 7.1, this works as a superior alternative.