I've got a simple little web app that's aggregating a couple views from some ethernet enabled cameras around my house. This is basically a little dashboard, so that I can easily tell what's going on around the house. I've got it refreshing the images every so often by appending new Date().getTime() to the base URI.
Everything works happy days, except for one little issue. If I leave the dashboard up on my iPad for awhile, it runs out of memory and crashes back to the home screen. I know that its because Mobile Safari is caching each of these images in RAM and it eventually ends up with far too many of them.
Since these images are being hosted on embedded devices; I really have no ability to modify the caching headers directly. I would like to stay away from making a wrapper on my server side as well.
My question is; can anyone think of a way to prevent Mobile Safari from caching these images so aggressively that it crashes?
You might try to reuse your img tags and/or set the src attribute to an empty string before removing an image. It's probably not an aggressive cache that's crashing mobile safari, but how the browser doesn't deal well with releasing image references when image tags get deleted.
You might find more useful information here:
http://www.vargatron.com/2010/08/ipad-html5-js-memory-management/
Related
This started about a month ago, that random images in my browser have been replaced by crazy things, usually a seagull picture. It is very distracting.
I've tried everything. Chrome, Firefox, Safari. I've cleared all my internet history.
If you are SPECIFICALLY talking about a screaming seagull image, this is a well known virus. There is an image floating around the internet that appears like a benign animated GIF, but it contains meta code that is able to infect PCs via an instant messaging tool named Slack. It is most likely to happen with users that frequently use that emoji.
If you reinstall Slack it should clear out that cache and therefore the virus.
Confirmed I reinstalled Slack and my issue is resolved.
There has been very little changed to this page since it just recently stopped loading properly on Chrome.
If you click the link three times things usually load up fine. I've looked through the developer tools and can see that it's hanging up on the js the first load. The second load has pending on most/all of the .jpgs, and then finally another click/load works.
I know it's a heavy site, but the other pages are fine, in terms of actually loading and not just going idle, and this loads well enough in Firefox. I don't think this site is even the largest of the pages in terms of images and video.
I've gone through others solutions to this problem by changing the "https" and renaming files incase an adblocker was causing it, but nothing seems to work.
Any idea of what in the page is causing the issue?
Well all right, maybe it doesn't kill web development completely... but it's certainly irritating. =)
I have been testing a site recently using various desktop and mobile browsers. So far, the only one that has given me significant trouble is Safari running on the iPhone 5, which uses a level of caching beyond anything I have seen before that seems nearly impossible to get rid of, which I now call Super Caching. This Super Caching has prevented me from testing my site as I am unable to test any changes - not to the css style, back-end c#, front-end javascript, aspx design, nada. I have tried the following methods to attempt to clear the cache for this page (both separately and all together):
Close all tabs in Safari, then close Safari entirely (double tap home button, close Safari icon there)
Settings -> Safari -> Clear History + Settings -> Safari => Clear Cookies and Data. Checking the Website Data after doing this confirms there is nothing there and shows 0 bytes of stored data.
Shut down my phone completely (not just sleep)
Change the url to my site by appending garbage information like ?random=pleasedontcacheme&random2=123
Add code to my site to try and prevent caching... which of course doesn't work because these changes are never retrieved by the phone's browser.
In short, testing has become a small nightmare at the moment. While any tips for how to actually destroy Safari's obnoxious caching would be greatly appreciated, I am more interested in making sure that this does not happen during development in the future. So my question is, for the current Safari browser, what is the best way to stop it from caching a website?
So far I have added the following to the Page_Load of my site's default page:
HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
HttpContext.Current.Response.Cache.SetValidUntilExpires(false);
HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
HttpContext.Current.Response.Cache.SetNoStore();
Response.AppendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");
I have also seen others use meta tags, though they have been described as a bit hacky. (As found here).
I am still working towards a way to retake control of my iPhone's cache, but in the meantime, I would like to ask those who might be more experienced with this particular issue how well the above methods work for getting around the caching issue (during development mostly, but also good to know for future reference). Or, are there other solutions that have been found helpful for this browser/system combo?
Thank you very much in advance for any tips or advice. =)
I'm looking to target a website specifically for an iPad but we don't have any Macs in house for testing. What's the most accurate way to test the site on a PC? I image I could use the Safari browser and shrink the window down to approximate the iPad screen size but I wonder if there's a better method out there.
If you target a website specifically for a particular device, buy that particular device. This doesn't only apply to iPad.
Two caveats I noticed a lot of websites have for a touch-oriented device like an iPad, iPhone:
The mouse-hover event isn't generated. So, the HTML/CSS/Javascript menu structure which works without clicking on a WebKit browser (like Safari) on a mouse-oriented device might stop working completely.
The scrolling event (coming from a flick of a finger) is not passed to elements inside a page; instead it just scrolls the entire page. A subelement shown with a scroll bar on a non-touch-oriented device might be shown without the scroll bar at all. So, sometimes you lose the ability to scroll inside a subelement.
There might be other caveats. It's really difficult to imagine all the way a device might behave differently from a mouse-oriented device; so, buy an iPad.
By the way, it's of no use to buy a Mac in this situation: Safari on a Mac still behaves (as far as the mouse/touch events are concerned) rather differently from Safari on an iPad/iPhone. An iPad can be paired with a Windows PC.
See this Apple document for a few advices for preparing a web page for the iPad.
I'd just use Safari, as the mobile version uses the same rendering engine (though possibly modified to fit the iPads resources).
It should display the same, if not close.
You can try to use online imitation services.
For example http://app.crossbrowsertesting.com/, or https://saucelabs.com/. They provide lots of imitations environments, for different devices and OS. You can test the site, that is already in the web, or your local files.
I myself am working currently with app.crossbrowsertesting.com for the first time. It really shows the problem, that the client encountered on his iPad. Also have good notices about these services from experienced developer, a friend of mine.
I'm using Mobile Safari's cache manifest file to store a multi-page data entry application that is run on an iPod Touch (version 3.1.3) in offline mode. The application writes to the client-side database by way of the persistence.js ORM. This all works fine.
However, I run into the occasional, extremely hard to reproduce problem whereby Safari just seems to forget that the pages are cached. When this happens, the "Cannot Open Page" alert appears, which is the same one that comes up when you attempt to visit a non-cached website with the wi-fi turned off. The only way that I've found to fix this is to reconnect to a wireless signal and visit the site while online, which seems to set the cache straight. This is easy to do when you're in the office, but not so easy to do out in the field.
I'm not trying to reference anything outside of the cached resources, and I've verified that the application is cached by running through the entire site while disconnected, sometimes successfully for days on end. I feel like there's a bug in the OS that messes with the validity of the cache. I'm not necessarily looking for a solution to the problem (but that would be nice), but rather just some confirmation that others have encountered this problem.
Using a cache manifest and lot of troubleshooting, I am able to reliably cache an entire application; Do note that this is a single page app with only a few separate file resources.
As a further enhancement, I have been trying to modify the DOM based on
window.applicationCache status
to inform the user about updates, ie:
tap here to apply update
If that were possible, I could swap the cache
window.applicationCache.swapCache();
Which would allow me to swap in the updated cache and then restart the page to provide a streamlined update mechanism.
Potentially even more streamlined than apps from the apple store.
I suspect that the applicationCache API was hamstrung by Apple to hinder web apps for this very reason. Having said that, I believe the level of support for "html5" APIs on mobile devices is among the most robust in apple's safari.
Following are a few problems I have noticed so far, in no particular order. Please note that this is not a comprehensive list of bugs.
I never get an 'updateready' event; this alert line never runs:
window.applicationCache.addEventListener('updateready', function(e) {
alert('updateready event status=' + window.applicationCache.status );
}, false);
I can not manually check for updates. The following code gives me an exception
try{
window.applicationCache.update();
}catch (err){
alert('exception:\n' + err);
}
It seems that as soon as I start to interact with the cache state at all, the caching stops working. The bugs are fiendishly elusive; pinning down & isolating any one issue can take a lot of time, especially since all this code runs flawlessly on other browsers (chrome).
Now here's a good one:
I suspect that if you pin an app to your home screen, iCloud "backs up" resources and restores them after you run the app for the first time from the home screen. To avoid this issue, you may sometimes have to rename files. I have proven that apple makes discrete backups of obsolete components by
removing them entirely from my app server
deleting the pinned web apps from home screen
clearing all the caches
opening the app url in safari
verify that its the newest version
pin to home
verify that the pinned app the newest version
close it
run again - and its back to the old one, no longer on your server.
Finally, if you run the pinned app while the phone is in airplane mode, iCloud will not be able to restore the obsolete files. This proves that it's coming from over the air.