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?
Related
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 am getting ready to develop an HTML5 application. It's not a game but for sake of discussion let's call it a simple game.
Let's say I host the app/game on my web server.
User clicks to my web server, downloads the game (may take several seconds, to a minute?), sends a high score to the server, is put on a leaderboard.
Tomorrow the user comes back and wants to play again. Does the user need to download the game again?
Or, is this where the cache manifest can be used to prevent a re-download?
And, if they don't have to download the whole thing everytime, how can I force a download if I want an update to the game?
Browser Cache
If you do nothing the browser will download and cache copies of any static files your application uses the first time it encounters them. This is automatic and the files are stored in the browser cache.
The next time the file is requested by your application the browser will send a request to the server and include the date and time of the copy it already has. If the file has changed on the server a new copy will be provided. If not, the server will respond with a 304 code - Not modified and the browser will use its existing copy. In this case a request is always sent to the server, but the file is only downloaded if it's changed.
You can configure your server to add an expiry date to static files. The browser still caches the file locally as before, but on the next access the browser checks the expiry date sent with the copy it already has. If that date hasn't passed no request is sent to the server. Now, you've saved the round-trip time of every request that refers to a cached file.
A manifest
A manifest works differently. When the initial file is downloaded the cache maifest is read and every file listed in it (apart from some specific exceptions dependent on the content of the manifest) is downloaded and store in the application store. Often, this requires the user to give permission for it to happen.
On subsequent access the manifest file is requested from the server. If the manifest hasn't changed nothing more is done and the application is loaded and run from files stored in the application store.
if the manifest has changed in any way then the new manifest is used to download and update the existing application store files.
Pros and cons
Browser cache
For
Automatic & transparent
Largely maintenance free
Many files need not be downloaded or checked
Against
Distribution of new files may be delayed
Application must run online
Manifest
For
Application can run offline
Manifest gives good control over update distribution
Against
User permission often required to use the application store
Additional maintenance is required to update the manifest appropriately.
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.
From my experiences so far, I've concluded that the HTML5 Manifest scheme was really terribly designed.
My site serves a manifest file when a user is logged in. Unfortunately, when they log out, they can still access the cached protected materials. Can anyone think of a way to fix this?
A manifest file is designed to take a website offline and still be able to navigate. It essentially just tells the browser to download and keep that stuff in cache. If your adding secret stuff to the manifest and the user goes offline, he needs to be able to still access it - or whats the point of having a special logged-in-manifest-file if he has to be loggedin (therefor online)?
You could add javascript that checks if the user is online again and if he is, tries to validate the "login state" and redirects or removes the secret stuff from localstorage (if you would use localstorage to save the "secret" stuff and javascript to display it instead of a manifest file )
Lets say the secret stuff is an image and you are not using a manifest file, but just displaying images when the user is logged in and its crusial, the user cant view that image after logout, you would need to set the http headers to no-cache and cache-expire to some random date of the past, so that a normal user would see it anymore. Problem then is, that the image is downloaded everytime somebody visits the website..
You need to approach the HTML5 Application Cache in a different way. It is not useful for caching server-side dynamically generated pages, especially those that require a login to reach. The Application Cache has no concept of logins, nor securing a page from somebody with a different/no login.
It is much more appropriate for an AJAX-based site, where all HTML/CSS/JavaScript is static and registered in the Application Cache, and data is instead fetched via AJAX then used to populate pages. If you need to cache data in the application for offline use, then use one of the offline data storage mechanisms such as Local Storage/Session Storage, or IndexedDB, for data.
You can then make your own judgement on how much data you want to cache offline, since there's no way to validate a login without making a call to the server that is naturally inaccessable whilst offline.
What if when the user logs out or is not logged in they get a manifest with only network:*
I have a website and when I check page speed with Google plug-in, I receive:
Leverage browser caching
The following resources are missing a cache expiration
Searching only returns information on using htaccess under Apache, but my site is running on Windows 2003 Server, in plain HTML language, and I don't even have access to the server.
Is there any way to specify expiration and gzip compression, as it recommends?
Have a look at Content Expiration, that should do the trick for you on the caching.
http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/0fc16fe7-be45-4033-a5aa-d7fda3c993ff.mspx?mfr=true
To set the expiration of Web site content
In IIS Manager, double-click the local computer; right-click the Web Sites folder, an individual Web site folder, a virtual directory, or a file; and then click Properties.
Click the HTTP Headers tab.
Select the Enable content expiration check box.
Click Expire immediately, Expire after, or Expire on, and type the appropriate expiration information in the corresponding boxes.
Click OK.
You can also Gzip by adding the code below to the top of your PHP pages.
It works great.