I am displaying an image from my application's local folder in my metro application developed using Html/WinJS.
app.onactivated = function (args) {
document.getElementById('img').src = "ms-appdata:///local/test.jpg";
}
what i am doing is editing the image in some other application and getting it reloaded again on button click
function update() {
document.getElementById('img').src = "ms-appdata:///local/test.jpg";
}
but the image is not getting updated. It gets updated only after app relaunch.
Does "ms-appdata:///local/" cache data and refreshes only on app relaunch ?
Or where i am going wrong, kindly suggest.
Thanks.
I believe that setting img.src to the same value as before won't trigger a reload, and the rendering engine won't automatically update the image based on file changes. One trick you can try is to attach a ?foo= parameter on the URI, incrementing each time to effectively change the URI and triggering a reload.
Alternately, open the file using StorageFile.getFileFromApplicationUriAsync(new Windows.Foundation.Uri()). Then you can pass the StorageFile to URL.createObjectURL, and assign the result to the img.src. That should completely refresh the image.
Note that for consumption purposes where you don't need to load all the pixels (as you would for editing) it's best to get a thumbnail from StorageFile.getThumbnailAsync (or getScaledImageAsThumbnailAsync on Windows 8.1) and pass that result to URL.createObjectURL instead. This will avoid loading the whole image, especially for smaller display sizes, thus lowering your memory overhead and increasing performance.
Related
We created a simple Flash animation that reads from an XML file in another server. This XML file has tags with the path of several images that will be displayed in the Flash. The xml tag looks like this:
<image_name><![CDATA[assets/images/image1.jpg]]></image_name>
When I tested locally I realized that, even after I changed the image in the XML, the SWF was still showing the image from the browser cache. So the developer ended up adding some random function so that the cache would not be an issue. That fixed the issue.
Unfortunately, the webhost that will publish the SWF tells me that they can't upload the SWF because the system doesn't allow SWF files that use random functions. So I can remove it and resubmit, but then the problem with the cache will be there.
Is there another alternative?
Thanks.
Preventing caching at all isn't a good idea in general, it's very useful feature that safes server traffic and decrease swf loading time.
Some of the solutions here can be to change URL in the xml config by adding version of the image manually:
<image_name><![CDATA[assets/images/image1.jpg?image_v1]]></image_name>
or generate this version automatically with script as md5 of the image bytes:
<image_name><![CDATA[assets/images/image1.jpg?5d41402abc4b2a76b9719d911017c592]]></image_name>
but it's required much more setup work.
Or add the version of the swf application:
<image_name><![CDATA[assets/images/image1.jpg?app_v1]]></image_name>
the last solution is a compromise between two options - maintaining version of each image file and removing cache at all. In this case you have to maintain only the version of swf file, but you have to update it each time you change some of the images.
Preventing cache isn't good, but here is my solution: use a "random" number (current time in seconds) as a param assets/images/image1.jpg?t=RandomNumber.
STEPS TO REPRODUCE THE PROBLEM:
Step 1: Let´s say you have cleaned up your cache history on your browser (firefox).
Step 2: You type www.stackoverflow.com on your browser to could get some new data on your cache folder.
Step 3: you type on your browser "cache:about"
Step 4: you click on "Disk cache device/List cache entries"
Step 5: I search for some ".png" file that has been downloaded to my cache folder. And taking notice that the data size is actually 16425bytes.
Step 6: Copy the path where the image has been stored on your computer.
Step 7: I take a fast look how the image looks like by clicking on this link before I continue with the problematic issue.
Step 8: Checking image
Step 9: Start/run/ and pasting the path we have copied recently, where the image has been stored on your system.
Step 10: Here is the image! But we have to type manually ".png"
Step 11: I take a look how it looks like:
Step 12: I edit the image I want to change the size of the file and have another size than the real one that the browser cached. So I make the image smaller and save it.
Step 13: I check so the size of the file have really changed.
before was 17kb now 3kb.
Step 14: I remove the ".png" text i added to the file name so the browser can read it
Step 15: Now I press reload on my browser and the file don´t gets readed!
EXPECTED RESULT:
- On the example to make it simple to understand I used a ".png" but you don´t get the same result. On my real issue amb trying to make the cache read a FLASH .swf file that I hade change it activly the original data size..
Any ideas? links? I can´t find info on internet about how to say to the browser to read again the file that has been downloaded, even if the size has changed!!
The point is that client will never check the server again if it is cached, until (and if) the cache has expired for that element. Set a max age on the HTTP header to 10 minutes say, for client to redownload it if it has been more than 10 mins since last downloaded. You cannot update just because size changed. Unless you have a JS or ajax or something that will update the client cache based on some result that is retrieved when the client checks the server to see if there was a recent change, other that it is impossible.
So if you have to have it, you will have to keep track on the server if something changes, based on existing data on the server. For instance, server keeps track of the initial size. If you change the image size (or suppose something in your web application changes it), the server will know that this has been changed on the server (because it will always get the current image size too on the server). So then you also need to keep track of the image size on the client when the image is downloaded, with either a cookie or with html5 localStorage.
So then the client part of your script requests the server on page load (sending the image size too that is stored in cookie or localStorage) and the server script will then compare the size of current image with the size sent by the client. If it is different it expires the client cache explicitly which means the client has to redownload the image explicitly. Otherwise it does nothing and just uses the cached image.
So basically you will need to treat your image much like you would a login cookiet(where server explicitly tracks it, expires it, sets new one, expires it, etc.) if you want this kind of functionality.
i was facing the same problem, finally got a work around, thanks to this thread.
this is for firefox only.
goto about:config
edit the variable "browser.cache.check_doc_frequency" (default 3) to 2
(http://kb.mozillazine.org/Browser.cache.check_doc_frequency)
edit the file in the cache directory. (doesn't matter if the new size is different!)
no need to change the file size entries in chache_001.
hope this helps you.
Edit: just make sure you keep the file size less than the original one for swf files.
Reason: I don't really know, but when I tried editing a swf for an online game, the game could no longer load with the new cache file (like firefox reserves x memory bytes for the thing, x was specified by the server .. but the file is larger than x bytes, so the whole file will not be loaded, and the flash movie wont load).
I edited some of the images in the swf to blank images of the same size, recompiled and recompressed to get a filesize lower than that of the original swf, and it worked!
Can you create a html form that can be housed on a USB flash drive and opened up in a browser that allows someone to enter info and then allows them to save what they entered as a .txt file back to the same USB? Any ideas or resources you can point me to?
Not a full solution, but maybe it gets you on the right track:
Generate a usual HTML page with a form to enter all information necessary.
Then use JavaScript to build a string containing all data you want to store inside the textfile.
Create a Blob() object out of it (MDN docu) - the type application\octet-stream is important to force a download later on:
var myBlob = new Blob( content, { "type" : "application\/octet-stream" });
Convert that blob to a DataURL using window.URL.createObjectURL (MDN docu):
var dataUrl = window.URL.createObjectURL( myBlob );
Update the location of your browser tab using window.location and set it to your data url:
window.location = dataUrl;
The user will then have the usual "Save file as ..." dialog for your generated textfile. Note, however, that this way you are not able to set the name of the textfile!
Not directly. Since this type of form processing has to occur server-side, you need a web server.
Now, it is entirely possible to run Apache or something similar from that flash drive, and have PHP or something do your file writing. This isn't as straightforward as you are looking for, but is possible. Keep in mind that not everyone has autorun enabled, that folks use different OSes, and that firewalls are often picky about new applications opening up ports.
I'm inserting a new file, and using the returned File object to store a thumbnail. Intermittently, getThumbnail() returns null for .pdf files.
I'm guessing that the explanation is the thumbnail is generated asynchronously and there are times when the processing is incomplete before the insert() call returns with anincomplete File object.
Is there any way I can make this behave more deterministically?
Alternatively, anybody know if the subsequent processing of the thumbnail constitutes a "change" that would be returned by a get changes call?
AFAIK yes the thumbnails are calculated asynchronously. The delay can be different based on server loads, file type and file size but in my testing the thumbs for PDF were available very shortly after the file has been created.
Probably at this point the best you could do is try a subsequent request and keep trying until you get a thumbnail but don't forget to use exponential back-off not to overload the server and kill your quota in some case.
I don't think that when the thumbnail is ready this counts as a change in the changes feed in that case.
I'm workin' on a web project where performance is a very important issue.
EDIT:
The situation:
I wanna add some details about the user's workflow:
The user visits the welcome page of my website http://example.org/ .
He clicks a link in order to visit the page http://example.org/mypage
onclick-Handler of the link's executed.
The handler loads data usin' XHR.
The handler creates http://example.org/mypage dynamically.
The handler saves mypage locally usin' FileSystem API at filesystem:http://example.org/mypage. EDIT: ( filesystem:http://example.org/mypage is a local ressource stored in the FileSystem at the client side)
The handler extends the history and changes the URL of the location bar usin' History API from http://example.org/ (URL of the welcome page) to http://example.org/mypage (the page which the user wants to see) .
The user vists another page in the meantime.
Later on, the user types http://example.org/mypage directly into the location bar.
The browser shows/loads filesystem:http://example.org/mypage (which is the locally stored version of http://example.org/mypage) instead of http://example.org/mypage. That means: The browser doesn't create a new request, it uses the local stored copy of http://example.org/mypage .
How can I get the browser to use the locally stored version of the page instead of creating a new request? EDIT: - That's what I want to do in #10 of the list above.
EDIT:
My Question:
A client-side has already created/generated http://example.org/mypage in #2 to #7 of the list above. I don't need to create that page some other time. That's why I don't want the browser to create a request for http://example.org/mypage.
That's what I wanna do:
If filesystem:http://example.org/mypage has already been created (respectively if the user has already visited http://example.org/mypage):
Use filesystem:http://example.org/mypage instead of http://example.org/mypage.
Otherwise:
Send a request for http://example.org/mypage
Tries to solve:
I can't use the Fallback section of the manifest file to do something like: EDIT: (aside from the orgin)
FALLBACK:
http://example.org/mypage filesystem:http://example.org/mypage
In order to get the browser to use the local version stored in the FileSystem because Fallback directives are just used if the user is offline, otherwise they are ignored. EDIT: But I want to use filesystem:http://example.org/mypage instead of http://example.org/mypage, even if the user's online.
I know that I can use the Expire field in the response header of a server-generated page in order to not create a new request and to use the cached version.
But what if I create an page dynamically on the client side using JS and XHRs. EDIT: (I described that case in The situation) When create a page at the client side there's no way to get the client to cache that page. That's why I "cache" the page manually usin' FileSystem API to store it on the client side.
In order to improve the performance I'm trying to store any page which the user has already visited locally. When the user visits a page again then I show him the old, locally stored version of the page and my script creates an XHR to find out if the page changed in the meantime.
But how can I get the browser to use the local version of the page?
I can save the generated page locally on the client side using the FileSystem API and I can choose an URL for the generated page to display it at the browser's location bar using the History API.
When the user now visits another site and then presses the back button I can catch the onPopState event by an event handler.
And that event handler can load the dynamically created file using the FileSystem API.
But what should I do if the user doesn't use the back button and if he types the URL, which I have registered using the History API, directly into the location bar?
Then the browser wouldn't use the locally stored version of the page, the browser would create a request to load the page from the server.
Don't put dynamic data in the application cache. If you want to put dynamic data in your pages then get it from the server with AJAX, store the data in Local Storage, and populate the page with the data from storage through JavaScript (you can hook into the History API for this).
By the way, this won't work because fallback entries have to be on the same domain:
FALLBACK:
http://example.org/mypage filesystem:http://example.org/mypage
Once your page is in the Application Cache (ie. it is locally stored) the browser will always use the version from the Application Cache until the manifest is updated or the user deletes the cache. It doesn't really matter what expiry headers you put on the page, except if you put a long expiry and you frequently update the manifest then it's likely the Application Cache will be populated from the browser cache rather than refreshed from the server. This is why the stuff you put in the Application Cache should be static files. Get your dynamic stuff with AJAX.
You might use URLs that encode the actual link within your hierarchy, e.g. "mypage", in the anchor part of the URL, i.e. http://example.com/#mypage. Then you can use window.location.hash to obtain the string after the # and do whatever magic you want. Just make sure your root (or whatever you want in front of the #) is in AppCache.