I built a Todo App in Ruby on Rails (With a Passenger and Nginx), i used this app as a PWA with apple-mobile-web-app-capable and apple-touch-fullscreen meta tags on my iPhone (IOS 12.3.1). When I create tasks via the browser and switch back to the PWA, they are not displayed. If i close the app very often or wait a long time, they will be displayed in the PWA. I think IOS cached the Web-page. My question is how can I disable caching for the page ? I've already tried the following meta tags, they did not work. Does anybody know how to fix this?
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
Related
Our website works in harmony with mobile website. That's meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=6.0" />
In order to facilitate the access of our website, we have given instructions to our customers to add them to the home screen.
However, our site, which is added to the home screen by IOS, is opened in the form of an application, not a website. Our customers want to zoom and scale through the website. These operations cannot be performed because the page is opened like an application on IOS.
Anyone have an opinion on this topic? Thanks
We have a webapp that we add to the home screen from Safari. It's built with Ionic /Angular. Now whenever we switch to another page within the app, the white bar at the top appears where you can change the page zoom and access other settings (change between mobile and desktop website and access further website settings). It's covering part of the webapp and does away when you click on "Done" on the left side - until you access another page, then it re-appears. It's the same behaviour on iPad and iPhone, iOS 13.1 and 13.2 (beta).
Is there a way to prevent this from appearing?
The webapp has set the following meta tags, among others:
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-title" content="MyWebApp">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
If the new page that you’re opening is from a different website, such as an oAuth login, I don’t think you can fix this issue yet.
However, if the new page is on the same domain, you can simply adjust your app’s scope in your web app manifest. If you don’t already have a manifest, it looks like this:
{
"name": "My web app",
"short_name": "Web App",
"description": "This is a web app",
"lang": "en-GB",
"start_url": "/app/home.html",
"scope": "/app/",
"display": "standalone"
}
That scope item means that all files, and pages, in the app directory will work in your PWA like a normal native app (ie. no popup windows). All files outside this scope will open in the normal web browser, with a back button to your PWA. It’s not ideal but it does give a much better UX than before. You can read more about the scope setting here.
I would recommend using a manifest.json generator like this one, just because they make this process so much easier. You’ll find the scope setting under the ‘start url’ box in this example.
I have the same problem... I have only been able to find a solution to remove the word "Done" from the left side of toolbar.
change any redirects from location.href='yourUrl' to location.replace('yourUrl') and it should remove the word "Done"
I cannot take credit, and I cannot find the post where i learned this.
It actually stopped the redirection out of the web-app which is a good first step. I will continue to look for a way to remove that URL bar...
Hope this helps
I am trying to set up App Links so that:
a) When I tap on a link on the Facebook app, it opens my app if installed
b) If not installed, Facebook should not prompt the user to be directed to the App Store, and instead open the link in the in-app browser
I have been experimenting with the al:web:should_fallback meta tag, but there have been some mixed results:
When al:web:should_fallback is set to false, scenario a) as above works correctly, as expected. Scenario b) is not fulfilled, as expected, because I've indicated that the system should not fall back to the web.
However, when setting al:web:should_fallback is set to true, even though the app is installed, scenario a) no longer works.
Why is this? I am under the impression that al:web:should_fallback controls scenarios for when the target app is not installed
Some setup details:
My website's meta tags are as follows (Actual values replaced by "_"):
<meta property="al:ios:app_store_id" content="_" />
<meta property="al:ios:app_name" content="_" />
<meta property="al:ios:url" content="_://_" />
There are no outstanding warnings on the OG Debugger
There is only one warning on the App Ads Helper, and this relates to Deferred Deep Linking, which according to the App Links iOS documentation, is no longer supported
Any insight would be greatly appreciated!
I developed an HTML5 webapp, and so far my local server tests worked fine (running in the desktop browser, iOS Safari browser, and homescreen bookmark webapp). This also holds true for the offline use (with the cache.manifest file).
When I uploaded the files to my website, I tested to confirm it still works on the desktop (Chrome shows the Application Cache logs), also works in iOS Safari. Both online and offline.
The Problem
When I bookmark the page from my website as a homescreen icon and try to launch it from there, the webapp freezes on the startup image.
What could be causing this particular issue?
Checklist:
HTML tag contains: <html manifest="cache.manifest">
HTML does contain: <meta name="apple-mobile-web-app-capable" content="yes">
HTML does contain: <meta name="apple-mobile-web-app-status-bar-style" content="black">
Not sure this would matter but: <meta name="viewport" content="width=1024, minimal-ui, user-scalable=no">
The apple-touch-startup-image and apple-touch-icon link tags are appended dynamically to the <head> tag via Javascript.
Only the necessary file-names in cache.manifest are included.
The webhost supports the manifest mimeType (no need to change .htaccess).
The website does use an .htaccess password authentication setting.
NOTE: I will investigate whether or not my use of apple-touch-startup-image & apple-touch-icon dynamically appended with jQuery could be the issue here.
It dawned on me once I listed the .htaccess password authentication bit in the checklist above.
It seems iOS's chromeless browser cannot initiate a username & password prompt at startup.
Sure enough, allowing full access to the page resolved the issue for the homescreen app. To do so, I've included this in a separate .htaccess file in the same directory the webapp is placed in:
Satisfy Any
That's it!
Although I'm not very fond of this solution, then again I wouldn't want to enter a username & password everytime I launch the webapp.
I'm trying my hand at building an HTML5 driven offline app for my iPad 2 which has iOS 4.3.4. I followed instructions I've seen on several websites to a tee, and was even able to verify using Chrome's Developer Tools that the cache is working:
Creating Application Cache with manifest http://localhost/experiments/test.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 2) http://localhost/experiments/offlineApp.js
Application Cache Progress event (1 of 2) http://localhost/experiments/offlineApp.css
Application Cache Progress event (2 of 2)
Application Cache Cached event
I have a home screen icon as well as a "startup screen" image in play. I can download the app to the home screen just fine, and I see the icon there. However, when I have the Wi-Fi off and I try to open the app I get the dreaded " could not be opened because it is not connected to the Internet" alert.
Does anyone know if something changed in iOS 4.3.4 (or an earlier version of the OS) that changed the requirements to get this feature of HTML5 working?
Thanks!
Edit
I tried this again outside of a "localhost" setting. This is my HTML:
<!DOCTYPE html>
<html lang="en" manifest="/experiments/cache.manifest">
<head>
<meta charset="utf-8"/>
<title>cache.manifest test</title>
<link rel="stylesheet" href="cache-manifest-test.css"/>
<link rel="apple-touch-icon" href="icon.png"/>
</head>
<body>
<h1>cache.manifest</h1>
<p>Let's see if this thing works...</p>
<script src="cache-manifest-test.js"></script>
</body>
</html>
And this is my cache.manifest file's contents:
CACHE MANIFEST
cache-manifest-test.css
cache-manifest-test.js
I see the proper results in Chrome's developer tools. I get the "Application Cache Cached event." It just doesn't work offline. I'm really stumped here...
Does anyone know of any pages that have full blown code I could just copy to my server and try?
Thanks...
The messages you posted from Chrome are when the page is served from localhost.
Check that it works on Chrome using the server rather than localhost.
If it doesn't, check that you are serving the correct type (text/cache-manifest) for an appcache on the server.
If you're serving the correct type on localhost but not on the server, that would explain the different behavior.
Also, I've read that the file must be named "cache.manifest" on the iPad. If you have named it something else, try that.