Hi we have a mobile app (iOS and Android) that needs to display a few web pages using embedded UIWebView or WebView. These pages need to support offline browsing for 7-10 days. We are considering two alternatives - AppCache and cache-control header:
cache-control: max-age=604800
We ran many proof of concepts using both approaches. Both approaches seem to give us what we need. Cache-control seems to have the slight advantage that we can set its value in web server configuration using wildcard for all JS, CSS and image files. Where as for cache manifest we need to list each file individually.
Having said all that, I do not find anyone attempting to build an offline app using cache-control. Nearly all article and blog post uses AppCache. Is there something I am missing here?
One problem with using cache-control for offline is that the user would need to visit all the pages in the app before leaving, otherwise they would not get cached for use next time they visit. The App Cache lists all the required pages and caches them all straight away.
cache-control is also not designed to support offline apps (it would seem), and there are catches, such as browsers not loading from the cache in some circumstances. So you cannot guarantee that the browser will not try to send a request for the resource while offline (resulting in the page showing network failure).
Basically, if you want it to work reliably, you should use App Cache or Service Workers.
Related
I am making an ASP.NET application and would like to be able for my file upload to allow attachments to be dragged straight from Gmail. The problem is that I cannot load the data from the links dragged in because of cross-origin rules.
There are 2 problems:
First, cross-origin rules prevent me from making requests to the gmail attachment server.
Second, even if I were to make the request with cross-origin, the cookies would not be included.
I am using Chrome and only interested in doing this on my own computers.
One option is I could make a Chrome extension which allows cross-origin requests but only from my website.
Another option would be for my locally hosted server to communicate with Chrome to make the request itself.
Which of these would be the best option and how would I do it?
I have a site whose pre-production environments use HTTP basic authentication to prevent unauthorized access. Recently, we've added a CDN (AWS Cloudfront) and we intend to use basic authentication (FWIW, using Lambda#Edge) for those pre-production CDN environments, as well.
While we've already implemented basic authentication on the web application (we're able to access the site after authentication), and have rudimentarily implemented basic authentication on the CDN (we're able to, say, access an image directly, after authentication), we're having trouble combining the two.
The web application includes images in the normal ways (e.g., via HTML and CSS includes). For instance, my site, https://www.example.com, has the following in its HTML:
<img src="https://cdn-files.example.com/foob.png" />
Using Chrome, when hitting the web application, I get a double-challenge (one for the app's domain and one for the CDN, each in turn), and the image loads.
Using Firefox, I get a single challenge, and the page loads, but the image fails to load (that request's response is 401).
Question 1: (Most streamlined option.) Is it possible, through the right configuration settings, to get the browser to pass through the credentials from the app's domain to the CDN domain? If so, what configurations are needed?
If not:
Question 2: (Less streamlined: Double-challenge.) What's the right combination of configurations (presumably, headers, etc.) to get the images, etc., to load on the web app?
I would prefer not to embed the credentials in the URLs, if at all possible.
We have a simple web site for our company, deployed under IIS. it contains 5 html pages with CSS, and some HTML web pages have links to other HTML pages, such as go to home page. now i want to check if my web site generated cookies at users machines or not? so can i do so? and usually does HTML web sites that do not have any login generated cookies?
Edit:
Using chrome development tools (F12) i have found the following:-
Load the development tools in your favourite web browser, then load your website.
In Chrome, the cookies will appear in the 'Application Tab' of the development tools, and under 'Storage' you will see 'Cookies.' Microsoft Edge has them in 'Debugger> Cookies'
Expand that and it will show all the cookies that have been delivered by your website.
It's possible for a 'HTML only' site to be delivering cookies, especially if you have 3rd party content.
Most of the cookies are generated on your Server Side and sent to the client.
You will have to go through your code and see whether it generates cookies.
Usually, if it's a regular HTML page, your server won't create a session for that and most likely that no cookie be sent to the client.
Otherwise, If you use .aspx pages or MVC (for example..) most likely that your server will generate Session Cookie and send it with the response to the client.
Another thing you'll have to check is whether your pages contain references to 3rd-party websites i.e includes of .css / .js files from CDNs like
Cloudflare - these CDNs usually put their own cookie in your client's browser.
And lastly, your pages might contain scripts like Google Analytics which put some cookies in your client's browser.
A HTML Page is not creating any cookies. Maybe you are mixing up Cache with Cookies? For example in PHP you have to define what shall be saved into a cookie. If you don't define any Cookie Variables, there won't be any cookies.
I've developed an iPad web app that uses the appcache. It's not intended to be a fully offline app but I use the appcache to store large image files so that they're not sent over 3G. Problem is when the manifest is updated the appcache updates whether the iPad is on wifi or 3G, which could be expensive.
Is it possible to have the user decide if the appcache can be updated or not? From what I've seen, this isn't possible, it all happens automatically, you just get events. But perhaps there's some trickery like writing the manifest on the fly or similar.
Using PHP on the server side if that helps. Thanks.
Connection Type: Theory & Future
There is a draft spec of Network Information API on W3C that provides the information of the connection type (ethernet wifi 2g 3g 4g etc.), but it hasn't been implemented on any browser yet apart from:
the stock Android browser on Android 2.2+ (not the Google Chrome browser)
navigator.connection.type // Based on W3C draft, (Implemented on stock Android browser)
and PhoneGap which is not exactly a browser
navigator.network.connection.type // on PhoneGap
Having that information in the future you could detect if the user has cellular data, then temporarily remove the src of the images and ask the user through a confirmation dialog.
You will also probably have to cancel the app cache update using:
window.applicationCache.abort() (documentation)
Reality
Unfortunately, the Net Info API is not available (at least not widespread) at the moment, but certainly will help in the future.
Long shot
There is a database that includes network speed (DIAL = dial up, DSL = broadband/cable, COMP = company/T1), but I haven't used it and I doubt it will help.
Dynamic App Cache
While checking into this, I tried to generate the html tag along with the manifest declaration on the fly, in order to combine it with the Network Info API but the AppCache manifest is loaded before javascript execution and is not affected afterwards.
So altering the manifest file on the fly through Javascript is not possible and data URI is not an option.
Alternative solution
HTML5 application cache is an untamed beast at the moment and there are talks to improve it. Until it changes to support more complex configurations (bandwidth level flag would be awesome), you could change perspective on the solution, although App Cache may be the best you have at the moment.
Depending on how big your images are you could rely on the normal browser cache. You could combine localStorage and far-future expiration HTTP headers. LocalStorage in order to keep track of the loaded/cached images.
First add a far in the future date for expiration on your images HTTP headers
On page load, remove all src from imgs
Loop the images and check localStorage if each image was loaded in the past
If there are images that were not loaded in the past, display a dialog confirming for the downloading of those images
If the image was loaded in the past, then put back the src on the img
For every image that is downloaded, save its URL on localStorage
I don't know what the status of indexedDB is on the iPad, but this could be an alternative solution.
In short: Indexeddb is a clientside database. Data is stored in object stores which are key/value pairs. The maximum storage capacity is in theory the maximum of your disk space. For more information about indexeddb:
Specification
My blog
What you could do with the indexeddb:
When someone navigates to a page:
Check every image tag if it is present in the indexeddb
if present
Get the image from the indexeddb and put it in the image tag
if not present
Download it
store it in the indexeddb
put the image in the image tag.
As extra (in the future) you can do as discribed by Sev: check the connetion type and only download the image when working on a fast internet connection.
I have 'invented' a working solution developing a webapp on the iPad (iOS 6.0.x) that may answer your question.
The idea is first to check if a localstorage variable is set/defined or not yet (I use the title of the page, thus the webapp name.)
If this localstorage variable exists, then assume (in webapp sandbox context) that its the first time the app is being run. At this point I populate a UUID in conjunction with $PHP_SESSION($uuid) to avoid 'cross app contamination' in server-side PHP land.
In addition to this I have a dynamic manifest.appcache.php which includes in the CACHE section a list of files to add to the manifest. Thus;
<?
echo $manifest_file_list[0]."\n";
?>
Using the JS appcache manifest event listeners I then monitor the progress to something like $('#manifestappcache').html(result);
I have an application manifest working nicely now to cache my app. However, I have one section that polls the server regularly and will render back different images depending on the state of the app. These images are not cached (it is not realistic to consider caching them), so they show as broken whenever that ajax call tries to draw new images on the screen.
Everything works fine when I have the appcaching off... how do I allow the app to look to the web for certain files instead of only looking at the cache?
You put those files in a NETWORK section in the manifest file. Anything in the network section will always be fetched from the network. Of course, you still have to set appropriate HTTP headers to prevent the browser cache storing those images, and any file in the NETWORK section will, by definition, be unavailable when the app is being used offline.