use localStorage to cache processed files

[CheloXL]

It would be nice if you could cache processed css files on localStorage (if available). In that way, you would not need to process files on every request.

Of course, that would imply that:

1. The developer has to provide a way (version info?) for PF to know it has to reload/process all the files again, or
2. If there are already CSS files on localStorage, PF should immediately use those files, and then request the real files from the server, process them and replace items on localStorage if they were changed.

Currently I'm developing an app that is completely designed using CSS3 and the delay in terms of visuals between the original and the prefixed version starts to be important. Maybe in this way that effect could be minimized a lot.

[LeaVerou]

I've thought about it. The main problem, as you point out, is how you know when to refresh the cache. Using the cache before the file downloads is not an option, as the user may have a very outdated version of the file. And I don't like to force developers into changing urls when they redesign. If you have any ideas, they're welcome...

[CheloXL]

Well... maybe as an opt-in option? So, it will only work if you actually pass a version string to a initialization method (if not, the current functionality will be used as default).

In the header I then can have the usual script src="js/prefixfree.js" and right after that, I can have another script where I can do something like PrefixFree.UseVersion("xxxx").

Another option (maybe more convoluted) could be to have a "version" variable inside the PF code. If that is empty/null/undefined, you use the standard behavior. If it has some value, you use that value as the version# (just like above, but no need for an additional method/check). This option can work quite well with an automated build system, where the version number can be directly injected inside PF.

[CheloXL]

Ok, I modified the latest version (1.0.6 I believe) to add this functionality. Basically, I'm checking for a dummy link with a data-pfversion attribute. If that link doesn't exists OR the version# is different from the version# stored on the localStorage, files are read from the net. If the link/attribute is present and there is already a cached version, files will not get requested and the already cached/processed files will be used instead.

I don't want to do all the setup I should to make a pull request (I don't use Gitub). I uploaded the modified file here

[mkantor]

If you're going to go this route, why not make use of HTTP caching headers? That way you'd have the same behavior as browsers.

[CheloXL]

Because that would mean that PF will have to re-process the files, even if they are cached on the browser. The version I'm using caches the already processed files in the localStorage so the next time PF needs the CSS files, it already has them ready to apply without any further processing.