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.
Related
I have used create-react-app for the front end scripts and using firebase hosting for deployment. Every time I update the CSS and other HTML and deploy them to the hosting, the changed are not reflected on the domain unless I force clear the cache. How can I automatically clear the cache on the browser every time I deploy to the hosting?
The caching happens in your browser, and the browser typically does this based on the caching headers that you tell Firebase Hosting to send back. If you set these headers too short, you'll end up reloading files that haven't been modified, wasting both your and your users' bandwidth. If you set the headers too long, users may end up seeing stale content, as you're discovering.
You can either:
Find a nice middle ground of users seeing the latest content and minimizing bandwidth usage.
Tell your users to reload the page when there is a change.
Apply some form of fingerprinting on your URLs, which means that content generates unique URL, so new content will be served under a new URL.
Turn your app into a PWA, so that you can completely control what content gets loaded from the cache and what is loaded from the network. See When and how does a PWA update itself?
I am working on a Laravel application which is based on a social network. Images are stored on S3 bucket where pricing is based on the number of GET/PUT/DELETE.... requests. I want to reduced the number of request sent to the S3 buckets in any way.
Scenario: Imagine a facebook post and comments
A user's profile picture is being pulled from S3 bucket on a page load. In the comments section of a post a user has commented 10 times. I write a code as usual
<img src="https://s3-ap-southeast-1.amazonaws.com/somebucket/32431435696950423.jpg">
for each comment a new request is sent to the bucket? or by default the image is cached after the first request and pulled from the cache for the rest?
How do I achieve avoiding a multiple GET request for a single image?
It depends on browser implementation and your image Cache-Control header. Most of modern browsers support caching. They will cache your image if your image is allowed to be cached, and vice-versa. Check When multiple instances of same images are embedded in an HTML, does that load the image once? question.
AWS S3 can be configured to allow your objects being cached (read how to add cache control in AWS S3).
But, if your site has a high traffic, I suggest you to use AWS CloudFront instead of pure S3. It is a CDN (Content Delivery Network). It is faster and can be cheaper than normal S3.
"or by default the image is cached after the first request and pulled from the cache for the rest?" It is the correct answer only if image has the same source and the file name.
So 10 the same images from one URL will be downloaded once.
I use gifjs to generate a lot of gifs from png/jpg files once user logins success. At same time, I want to change the location.url to direct user to my website main page. But the problem is that the web worker task stopped once the url is changed. So how to execute web worker task continuously even though the location url is redirect?
If the browser does a load of a new page, the short answer is that workers will be terminated. Definitely dedicated workers, and according to Do Shared Web Workers persist across a single page reload, link navigation shared workers (that aren't being used by other windows/tabs) will be too.
But...
If you didn't use any full page loads, and made the entire site use Javascript for navigation / posting of forms, and use the HTML history API to change the URL, then the worker will survive as the user logs in and navigates the site. The worker will only be terminated when they leave the site, or force a reload in the browser.
Depending on the current setup of your site, this might mean considerable change of both the browser and server architecture, the details of which I suspect are beyond the scope of this question.
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'm working on a web application that caches html pages and saves it on the user's computer. I want to create a link, so that the user can click on the link and access the cached webpage.
Following is my link to a cached page:
BBC
When I click on the link, nothing happens. I'm not even getting any error.
Can someone please suggest how to create a link to a cached html page?
First of all, not all browsers handle local files equally, indeed, not all computers will be running windows or have a C: drive. Secondly, you don't have much control over a user's cache. Cached pages are usually handled by the browser automatically. You can use headers to specify how a browser ought to cache files, but it's not even required to do so. You can read the W3C recs on caching for more information.
It's unclear what you're trying to do here, but it sounds like it might make more sense for you to use HTML5 local storage or offline files than trying to mess around with their file system directly. The security model of most browsers is such that web apps don't interact with local files, which may be why it's not working for you with your current setup. Dive Into HTML5 has a good overview of HTML5 local storage and offline pages.
Edited based on comment below:
Most browsers' security settings won't let a page on a website access files stored locally. Only locally saved files can link to other locally saved files. Therefore, if the page with a link is on a website, your link won't work. Try creating a link to your file from another locally stored file and see if that works.
Instead of providing the .html extension in the main page where you provide the link you should do something as below:
< href="file:///C:/Users/xxx/yyy/bbc">BBC</a>