I'm using BootUp.js (https://github.com/TradeMe/bootup.js) to load and store CSS and JavaScript files into HTML5 LocalStorage. The site is mobile focused so the time saving and speed boost this creates is great! However, I've noticed the odd occasion were the CSS (never noticed it with JS) becomes corrupt in the storage and so the site renders horribly until the storage is cleared and the CSS files are refetched from the server.
I've seen this happen very sporadically on Safari on an iPhone 4 (iOS 6), Chrome on a Galaxy S3 and Chrome on a Nexus 7 - so it doesn't seem to be limited to any particular device, browser or OS. Is this an issue any one has come across before? Is it possible that the data has just somehow become corrupt? Are there any known issues with WebKit (I guess) that could cause it?
I'm planning to implement a work-around by storing some kind of checksum that can be generated in JS to ensure the data is fully there. If not, clear it out and fetch from the server.
I'd first use this:
http://arty.name/localstorage.html
Mobile browsers tend to cut back on storage space due to obvious memory limitations. Your CSS and Javascript might be too big, even when minified.
Other thing I can think of for this behavior is that localStorage might become corrupt when starting a save, and refreshing the page at the same time. I'm not familiar with the exact works of browsers, but I'm guessing they might stop a save in the middle.
Also, have a look here:
http://hacks.mozilla.org/2012/03/there-is-no-simple-solution-for-local-storage/
Related
I'm doing some research on whether or not it's possible for a web app (meant to be used and distributed internally) to scan and read files from a local directory (on user machine). I came across a couple of terms as following:
NPAPI: no longer supported by majority of web browser
ActiveX: IE only
Sandbox: Chrome uses this kind of technology, plus it's not fitting to the requirement so I have to look elsewhere
I feel like ActiveX might be the only option even though I haven't actually written any ActiveX control before (not sure if it's possible).
Also the goal is to support more than one kind of web browser, so other than IE I thought Firefox might be capable of achieving the requirement, since no search result so far said otherwise.
Could someone please give me some pointer? I just need to know if it's at all possible to build a ActiveX control or Firefox extension to scan and read files from a local directory. If it is, then what is the downside other than security vulnerability.
I'm currently working on an application, that utilises SoundJS. I inherited the codebase after it was found not to work correctly on an iPad - the issue being it creates a manifest of around 16 MP3 files, totalling approximately 35.7mb. This obviously causes the iPad issues, and at 16mb it crashes.
The crash log shows it's due to the Per Process Limit according to the Diagnostics and Usage Logs.
I've done some digging in to the underlying structure of SoundJS and can see it's default behaviour is to utilise WebAudio, via a XHR. This is then parsed as an ArrayBuffer (or an array of ArrayBuffers).
At the moment this means that, after preloading, we have 35.7mb of data in ArrayBuffers - not good. This is after crunching the file size down! There will only ever be one audio file playing at any one time - and this is one file per section of the app; apart from during transitions, where two may be fading in to eachother.
Is there an easy way to free the resources up from the underlying structure; i.e the ArrayBuffers? As far as I'm aware, the previous developer did try using calls to the SoundJS .removeSound() method to free up some memory, but the results weren't good.
At the moment I'm looking at creating an object acting as a registry of all the filenames, and rather than loading them through a manifest - loading them individually and removing them as soon as they are used. However, I'm expecting this to cause headaches with easing one file in to another during playback. Furthermore, I expect that may actually result in a problem akin to the Images one where MobileSafari didn't release the memory allocated to image - even after deletion. (The correct fix being to reset the 'src' attribute of the image element prior to deletion)
Does anyone know of a surefire workaround for loading such large amounts of data in a web app targeting iPad?
testing SoundJS has shown some issues with iPad not releasing the memory properly. Unfortunately from a library perspective, there isn't much we can do about it.
If you only ever play sounds 1 at a time, I would suggest loading them only as you need them and removing them after use. The biggest issue you will find with that is waiting for sound to load, so you may want to implement a smart preload of the next sound you expect to use (meaning you always have the current and the next sound loaded). In theory this can keep you below the iPad 16 mb memory limit. However, if the iPad refuses to free up the memory, you may need to introduce some form of cache busting.
Another solution would be to reduce the file size through lossy compression, which it sounds like has already been attempted.
A third option might be implementing some form of streaming audio, but this is not something SoundJS can help with.
Hope that helps.
Now that I have upgraded to IE10, it's very difficult to get my javascript changed files to get recognized.
In IE9, you could simply use the 'clear the cache' button in the develepor panel and could see your javascript changes.
This no longer works (apparently) -- is there some other way to get IE10 to dump your cache? This is brutal!
On Windows 7, using VS2010 and just upgraded to IE10.
I think I found out the answer... it appears that IE10 either added (or added this as a default) a setting 'PRESERVE FAVORITES WEBSITE DATA' ... this was checked (by default) and although I havent thoroughly tested it, I think this is why my js files were not being purged.
It's incredibly easy to get bugs due to bad caching. Developing with caching turned on (and manually purging the cache) is mission-impossible.
If you're using a server-side scripting language to generate your page you can use fingerprinting.
You can add a querystring to the URL that is always different, this makes it so browsers will never cache the scripts. Very useful for development, terrible for live :P
Eg: script.js?fingerprint=123456 where 123456 is a different number each page load.
A more involved solution would look at actual changes in the source code.
In my web-based mySQL application, IE-10 (with default settings) often refuses to show the present state of the mySQL database. It usually shows the state of an earlier visit (showing records that were deleted, or not showing records that were added).
This is a consequence of a changeable IE-10 setting. (Unfortunately I have only access to a Dutch-speaking IE-10, MS refuses me to download an English speaking browser). In rough translation: go to Internet options/General. You see "Browsing History" with a button "Settings". Hit it and you will see radio buttons determining the search for fresh pages. The default is "automatic", change it to "search for fresh page on every visit". This fixed my problem
Unfortunately however, I don't know how to set this from within my app, so I have to inform my users about it. This is awkward.
It seems Apple have (once again) added restrictions to Safari Mobile and javascript HTML5 development with the iOS 5.1 update. However, finding the facts about these changes is frustrating due to the level of gossip.
Some say only localstorage objects have been moved to the cache, while globalstorage and sessionstorage work as before (since larger sites use these, like facebook, to log in through partner websites).
Some also say that databases are still persistent, while others say that these are now also stored in the cache of the browser - and will thus be flushed whenever iOS feels like it.
Could someone please enlighten us with the facts? Preferably with source references if possible.
The broken localStorage for WebViews is documented, (see http://www.sencha.com/blog/html5-scorecard-the-new-ipad-and-ios-5-1/#date:15:00)
"In iOS 5.1, this data is no longer considered persistent and is
treated as temporary or transitory data, so iOS can destroy it at any
time, without warning, including during low memory scenarios."
For phonegap, there are fixes around this issue: http://community.phonegap.com/nitobi/topics/phonegapbuild_localstorage_on_ios_5_1
I've had no issues working with localstorage and iOS 5.1
It seems to be okay for me, using PhoneGap.
I've lately been running into odd issues, which I'm starting to think are related to resource starvation in the browser.
In FF:
I'd been testing one of our web apps and suddenly things that should disappear after a couple seconds stopped disappearing. I tracked back to setTimeout just flat out refusing to work. After reloading the browser it was all clear, no issues.
In IE:
I regularly see issues where IE will refuse to do transparency all the sudden, simply reloading the page clears this up.
In both:
Though I can't say its related for sure, I see unexplainable behavior, things along the lines of variables not being available (undefined) when they should be.
Both browsers also show a steady increase in memory usage over time (memory leaks).
The javascript in the web app is heavy and it is a single load page (making those memory issues mentioned all the more painful). There are lots of in-efficiency, and various things that make one say "why would you do that?".
Has anyone encountered such things? Can you point out general resources that will help identify and resolve these issues?
You could try running your application against the Chrome Profiler http://code.google.com/chrome/devtools/docs/overview.html. You can profile the CPU and get snapshots of the browser heap, that should help locate any rogue stuff.
If your application is designed to work with the Internet Explorer: The Developer Toolbar also has a profiler.