This is my first time coding for HTML5 with offline capabilities using MVC 3. Although I have a problem where mobile devices doesn't seem to cache and fails to load from cache when offline.
I have my header setup:
<!DOCTYPE html>
<html manifest="#Url.Content("~/offline.manifest")">
With my offline.manifest file located at the root of the application.
Since my app has a /Account/Login/Index route, I added it to my manifest file:
CACHE MANIFEST
#version 0.0452
CACHE:
#Pages
Account/Login
also tried ~/Account/Login for the pages.
The good news is, my manifest file works on Chrome. All files are loaded and are cached. However, this is not the same for my mobile devices.
My iPhone running 5.1.1 and Nexus S running Chrome on ICS doesn't seem to load from the cache when offline. I just turn off the Wifi radio and refresh the page, but Safari and Chrome doesn't load from cache.
Am I missing something here?
Any clues would be appreciated. Thank you
Thanks to the iPhone's built-in console log, I found out that my IIS is serving the manifest file on an incompatible MIME type.
I changed a few things. First, I renamed the cache file to cache.appcache and added a new MIME type in IIS, for the extension .appcache with type text/cache-manifest.
After I made those changes and reloaded my page, Mobile Safari cached my page. Chrome for Android is also now working well.
Related
Im new with Android. My task is to create a mobile application based on a responsive WordPress website. I would like to be able to download some of the content of this site. Website uses HTTPS. In the first, most primitive version, I tried to use WebView. I wanted to use the following: WebView load website when online, load local file when offline. Unfortunately, only the white page appeared and nothing more. In the case of "Google.com link" a page has been loaded in an external browser (Oreo Android).
Any suggestion how should I start? The easiest way would be to download an HTML page or have access to files on the server. Unfortunately, I do not have that access.
As always -1 without even trying to help....
As I said load from cache when Internet is disabled not working. Work only WebView (without login, because CORS). So how should I face it?
I have below iframe in one of the page in my website.
<iframe src="http://www.pdf995.com/samples/pdf.pdf" id="iframe1">
But when I open same page in android mobiles chrome browser it is automatically triggering download of file which is mentioned in the iframe. How can I prevent auto triggering of download in mobile devices?
You can use this format:
https://docs.google.com/viewerng/viewer?url=http://yourfile.pdf
Just replace http://yourfile.pdf with the link you use.
Ideally, it is important to think on the availability to use the convert/viewer in offline mode!
Why and Because...
If you use an iframe for a stored document on your server and you would made an webapp, you will must play over HTTPS/SSL. (Offline is over https).
It is not sure that the PDF viewer provides a secure url (1), you will probably problems with CORS and others with the « Same origine » to embed the iframe src (2), and finally, it service must delivers online and offline ! So it recommended to embed in application cache all the resources needed to convert the PDF in canvas.
An all in one solution is strongly recommended I think.
Using PDF.js and its worker with a runtime script is a good way...
I am developing an app on Android using Crosswalk that show files that I need to download from a web service. I would rather download the files to the external storage. But when I try to load them into the Crosswalk WebView I get a "Not allowed to load local resource:" error. I tried opening them directly and through a json manifest with csp properties like this (and some variations):
"csp" : "default-src 'self' file:// http:// https://"
My current setting are rather permissive:
mXWalkView.getSettings().setAllowContentAccess(true);
mXWalkView.getSettings().setAllowFileAccess(true);
mXWalkView.getSettings().setDomStorageEnabled(true);
mXWalkView.getSettings().setAllowFileAccessFromFileURLs(true);
mXWalkView.getSettings().setAllowUniversalAccessFromFileURLs(true);
mXWalkView.getSettings().setJavaScriptEnabled(true);
But still no success. Any ideas? Is this even possible?
UPDATE
To clarify and so that it doesn't get lost in the comments:
I am using the following code to load the file:
String url = "file:///storage/emulated/0/wh_files/index.html";
mXWalkView.load(url, null);
OK, I was finally able to track down the problem and it didn't have anything to do with the implementation. There seems to be a hardware problem on the device and the file that I wanted to load was corrupted.
I guess that the important lesson to learn is that the "Not allowed to load local resource:" error not always means what it says.
I have a simple web app built with Phonegap and Android that call external ressources (js, css, html) from server instead of storing it in Phonegap assets folder. I prefer using external ressources because my server can deliver html pages taking in charge internationalization.
This web app work fine on my android device when WIFI is on but it fail when stopping WIFI. My index.html file delivered by my server contain a valid manifest file with correct mimetype ('text/cache-manifest') that list every files the app need to work.
My Android Activity class is supposed to have caching enable:
this.appView.getSettings().setDomStorageEnabled(true);
this.appView.getSettings().setAppCacheMaxSize(1024 * 1024 * 15);
String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();
this.appView.getSettings().setAppCachePath(appCachePath);
this.appView.getSettings().setAllowFileAccess(true);
this.appView.getSettings().setAppCacheEnabled(true);
It may worth mentionning that my app use ajax call with urls like /aaa/bbb/ to call web pages from server and I don't know if that may be the problem (l'm not calling physical pages directly like index.html)... However, this web app work well in desktop browser (Google Chrome) when offline...
Any idea what more can I do to enable this HTML5 cache feature on my Phonegap app?
Thanks a lot
After playing around for a while I get it to work. Here is some points you should verify when stucked with this type of caching problem:
Take care about url parameters passed with GET method... I was passing parameters when navigating between pages of my app and those parameters was making my urls different from the ones in manifest file making cache to fail.
When testing offline mode on my phone, I was only shutting down the WIFI thinking this was enough to trigger cached version of my app but it was not... As I was testing my app published under a local network IP (like 192.168.2.11), it appear that my app was trying to reach that IP trough the 3G network that was still ON... So use airplane mode when testing offline.
Not sure if this one was necessary as I read it on some others threads but I renamed my manifest file to cache.manifest.
Regards
Apparently you need "to fix the Android Shell Native App to enable HTML5 caching".
If you haven't already, please check out: http://tmkmobile.wordpress.com/2012/03/04/html5-offline-solution/
I am developing a similar system. What I did was I created the Phonegap webpages and stored them in the www folder of my WAMP server. Then what I do is I basically super.LoadURL("insert_ip_address_here/insert_name_of_folder_where_webpage_is_located") in the onCreate method and this loads the phonegap application perfectly (yes all you need is just only line of code in the Android app itself). However you still have to make sure that the config.xml, manifest and all configurations needed for phonegap are properly done (for instructions on this see https://www.adobe.com/devnet/archive/html5/articles/getting-started-with-phonegap-in-eclipse-for-android.html).
Let me know if this the path you choose to pursue. I can provide extra support with things like making the ip-address (in the line super.loadurl(...)) dynamic for the local system using multi-casting, etc.
I have a website caching pdfs offline with a .manifest-file.
On the desktop version of Chrome the PDF can be viewed offline inside Chrome. But on the Android Chrome nothing happens when I'm trying to open the cached PDF. No error message, just nothing.
I'm guessing the android default pdf-reader can't find the cached pdf?
Anyone who knows how I can view the PDF in Android Chrome?
Thanks!
That's correct, browsers differ in terms of their built-in PDF support. One method you could explore is using Mozilla's pdf.js, which is a pdf reader built entirely in javascript that works just about everywhere. Make another web page that calls pdf.js and loads the PDF, and make sure all of that is in your cache manifest and you should be good to go.