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.
Related
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">
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've made a small PWA in RoR; following and I followed Google's guide on having "Add to Homescreen" banners. Everything in devtools is fine: the service worker is registered, the manifest.json is found, the "Add to Homescreen" link is displayed and runs in the tool drawer.
I even installed Lighthouse like they said and ran the report; it says everything should work. However, I have yet to see the banner (yes, it isn't already on my homescreen; yes, I visited at least five minutes apart).
Does anyone have an idea on what the threshold is WRT users activity to make the banner appear?
(ps. does anyone want to try it out here?)
There's actually a google chrome flag for bypassing those engagement checks, it's called "Bypass user engagement checks".
So you'll need to go to chrome://flags, then find that flag, enable it, and then restart chrome.
The banner should show up every time once that flag is enabled, assuming everything is in line with your manifest.json and service worker.
I saw you referenced two manifests on your page:
Line 20:
<link rel="manifest" href="/manifest.json" />
Line 27:
<link rel="manifest" href="/assets/favicon/manifest-71676a3789f8b2a25498b2271ddc3288b14553d94e25c37030e6d69d46d72b81.json" />
When I frist load the page I see the mainfest definition in chrome dev tools, but when I reload the page the manifest is gone.
thanks for the responses; I waited like a day, cleared my caches completely, and got the banner. I still don't know the threshold for how many times you have to visit, but at least it works.
Why is one metarefresh to YouTube failing while another is succeeding? And why does it have anything to do with whether Youtube as an app is installed?
We have two metarefresh links that take users to videos from an iOS app.
(1) This page refers properly to Youtube whether the Youtube iOS app is on your device or not:
The invoking link is: http://ourURL/videos/ourpage.html
The receiving HTML page is this:
<!doctype html>
<html>
<head>
<meta http-equiv="Refresh" content="0; url=http://youtu.be/tJ08IHetnbU" />
</head>
<body>
</body>
</html>
(2) The referral page that breaks is designed the same way but works only if the Youtube app is NOT on your iOS device. If the Youtube app is on your device, we see "Playback error. Tap to retry." "Error loading Tap to retry"
The invoking link is: http://ourURL.com/videos/ourpage2.html
<!doctype html>
<html>
<head>
<meta http-equiv="Refresh" content="0; url=http://youtu.be/0FZbh-Cqfg4" />
</head>
<body>
</body>
</html>
The answer turned out to be a caching issue in the YouTube app.
It appears the Youtube app relies on the Safari cache. The Meta-refresh had referred to different video links before - so the new updated links failed.
Interestingly, for whatever reason, Safari is not using its cache and showed the proper video.
After going to Settings, Safari and "Clear cookies and data" - the YouTube App started showing the referral pages properly again.
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.