I'm looking into creating an Web or iPad application that will use HTML5. After some research I've discovered that HTML5 has Database caching, and was wondering how large that cache is?
I'd be looking to provide an offline solution so the users can still fill out forms, and pull information from the database if they're out in the field and cannot obtain a 3G signal. The database caching would be fairly large ( a couple tables with thousands of records each ), and would have re-cache weekly.
Is there a limitation to how much data HTML5 can cache?
I haven't been able to find anything regarding a hard size limitation or any indications of a size limit through searching any HTML documentation.
I believe that Safari has a 5MB cap on application storage for iPhone / iPad (You had mentioned using an iPad.)
Here is the HTML Standard regarding Offline Web Application's / Caching
Here's a good link involving implementing an offline cache with HTML5 - it also has several good links towards the bottom.
Hope this helps you out!
Related
I have lot of forms with data being submitted to the system and lot of views with data being pulled from database. I want to convert my web application into online and offline mode. I have gone through HTML5 local storage and web storage concepts and already started
implementing. I had to refactor my code a lot for this.
I am feeling that this approach is not the right one. Does anyone have a better suggestion as to create an application which works both offline and online and can save and retrieve lot of data.
Currently my application is a web application written in Groovy & Grails. My application is intended to be used on all possible browsers and smart devices. Its a Proof of Concept still work in progress and I need guidance on this
Thanks
HTML5 is still a web technology, and optimized for online usage. Making offline web app, even using HTML5 features, is very limited.
If you're really need full functional offline app, it's better to take a look at desctop/mobile tools. Some of them, like Apache Cordowa (was PhoneGap) or Appcelerator Titanium, can reuse some web techologies, like JavaScript. But it's totally different way, and you'll need to have 3 version of your app: web (grails), desktop (titanium, or swing maybe) and mobile (cordowa/titanium)
Our company develops big corporate solution for business (web-site). After approving to support Apple iPad we saw, that our site is very slow on it. So, I was tasked to optimize performance for iPad by optimizing GUI (Html, JS...), because server part of application is pretty fast.
I've found some solutions tricks with customer's approve:
* Reduce grids columns count and leave only the most useful.
* Turn off all the animation.
* Decrease resizing as much as possible.
And of course, I minified all the scripts and stylesheets.
Can you make me some additional advises how to improve performance?
There's several things, many of which apply to desktop web as well as they are just part of good practice.
In no particular order:
Remove extra whitespace and HTML/CSS/JS comments
GZip all text based content (HTML,CSS,JS)
Optimize all your images (e.g. use a service like http://Smush.it )
Move your images/static content to a separate server (increased HTTP pipelining), and don't serve cookies on that server
Don't serve up anything to "mobile" that they don't need (where possible)
Don't scale down images on the client, served scaled down versions from the server
Since most mobile browsers handle CSS well, convert "lists" of data that render in tables, to use unordered lists etc.
Serve common scripts like jQuery from a CDN like Google
most mobile browsers support some kind of offline caching, or local lightweight database - if there is anything that you can cache to reduce future loads consider doing so
If you want to get really fancy, you can do things like not directly loading images... and then checking on the page which images are currently in view (or delay slightly), and loading them as needed... the helpfulness of this will depend highly on the content
Consider delaying the load of search results if applicable (e.g. like a Twitter stream that might only load the first 20 items, then only load additional items on demand.
Some of the practical things which i would like to tell are;
Avoid use of iframes on your pages. They do not work well on iPad.
Use a library like Sencha touch which is highly optimized for the iPad.
Make links or buttons to have large touvh areas, as users can get frustrated with incorrect link clicks..
Avoid use of CSS absolute positioned elements.
Also to add a few more points;
It is best to use the meta viewport setting as width=device-width...This ensures that your viewport is set based on your device and not hard-coded.
Avoid use of CSS :hover properties in your iPad CSS...They can cause unnecessary issues (false hover's)
I'm using Google's Custom Search API to dynamically provide web search results. I very intensely searched the API's docs and could not find anything that states it grants you access to Google's site image previews, which happen to be stored as base64 encodes.
I want to be able to provide image previews for sites for each of the urls that the Google web search API returns. Keep in mind that I do not want these images to be thumbnails, but rather large images. My question is what is the best way to go about doing this, in terms of both efficiency and cost, in both the short and long term.
One option would be to crawl the web and generate and store the images myself. However this is way beyond my technical ability, and plus storing all of these images would be too expensive.
The other option would be to dynamically fetch the images right after Google's API returns the search results. However where/how I fetch the images is another question.
Would there be a low cost way of me generating the images myself? Or would the best solution be to use some sort of site thumbnailing service that does this for me? Would this be fast enough? Would it be too expensive? Would the service provide the image in the correct size for me? If not, how could I change the size of the image?
I'd really appreciate answers that are comprehensive and for any code examples to be in ruby using rails.
So as you pointed out in your question, there are two approaches that I can see to your issue:
Use an external service to render and host the images.
Render and host the images yourself.
I'm no expert in field, but my Googling has so far only returned services that allow you to generate thumbnails and not full-size screenshots (like the few mentioned here). If there are hosted services out there that will do this for you, I wasn't able to find them easily.
So, that leaves #2. For this, my first instinct was to look for a ruby library that could generate an image from a webpage, which quickly led me to IMGKit (there may be others, but this one looked clean and simple). With this library, you can easily pass in a URL and it will use the webkit engine to generate a screenshot of the page for you. From there, I would save it to wherever your assets are stored (like Amazon S3) using a file attachment gem like Paperclip or CarrierWave (railscast). Store your attachment with a field recording the original URL you passed to IMGKit from WSAPI (Web Search API) so that you can compare against it on subsequent searches and use the cached version instead of re-rendering the preview. You can also use the created_at field for your attachment model to throw in some "if older than x days, refresh the image" type logic. Lastly, I'd put this all in a background job using something like resque (railscast) so that the user isn't blocked when waiting for screenshots to render. Pass the array of returned URLs from WSAPI to background workers in resque that will generate the images via IMGKit--saving them to S3 via paperclip/carrierwave, basically. All of these projects are well-documented, and the Railscasts will walk you through the basics of the resque and carrierwave gems.
I haven't crunched the numbers, but you can against hosting the images yourself on S3 versus any other external provider of web thumbnail generation. Of course, doing it yourself gives you full control over how the image looks (quality, format, etc.), whereas most of the services I've come across only offer a small thumbnail, so there's something to be said for that. If you don't cache the images from previous searches, then your costs reduces even further, since you'll always be rendering the images on the fly. However I suspect that this won't scale very well, as you may end up paying a lot more for server power (for IMGKit and image processing) and bandwidth (for external requests to fetch the source HTML for IMGKit). I'd be sure to include some metrics in your project to attach some exact numbers to the kind of requests you're dealing with to help determine what the subsequent costs would be.
Anywho, that would be my high-level approach. I hope it helps some.
Screen shotting web pages reliably is extremely hard to pull off. The main problem is that all the current solutions (khtml2png, CutyCapt, Phantom.js etc) are all based around QT which provides access to an embedded Webkit library. However that webkit build is quite old and with HTML5 and CSS3, most of the effects either don't show, or render incorrectly.
One of my colleagues has used most, if not all, of the current technologies for generating screenshots of web pages for one of his personal projects. He has written an informative post about it here about how he now uses a SaaS solution instead of trying to maintain a solution himself.
The TLDR version; he now uses URL2PNG to do all his thumbnail and full size screenshots. It isn't free, but he says that it does the job for him. If you don't want to use them, they have a list of their competitors here.
Why HTML5 rocks now ?
If just use one word to answer, I think probably it will be "cross-platform".
You can build products using HTML5 one time , distribute for different platform such as Web and iPad etc.
But after some research, I found that several problems with HTML5 family tech
Not robust : there are a lot of randomness , and not easy to control
Storgage limited : even no clear answer for max size (?) , and sure there are limitation of storage
Not best user interaction : compared with native iOS app
Any other problems you think ?
And if you are HTML5 guru,maybe you will correct some wrong understanding of mine.
The biggest problem for me is that right now HTML5 is not a standard. It's not even a complete specification.
But this has always been the problem with building web applications; everyone implements them to different degrees of completeness, and you have to be constantly vigilant of implementation variations.
If I end up having to maintain multiple versions of the same code for each browser anyway, I start to question whether the "it works everywhere" argument is even sound anymore.
I have a IPad noob question.
Here is the task I am trying to achieve:
I need to build an IPad/IPhone app that will display a lot of images and data. The problem is that this app needs to work offline as well as online. So, the data needs to stored in some way on the IPad.
I am looking for some opinions on techniques/architecture/development.
To provide a bit of background I work mainly in C#.NET and this is my first IPad app. So far I know that I can either create a native app using objective C, or go for an HTML app which later may or may not be converted to a native app.
Furthermore, I am currently testing by creating a simple html page with an image, and trying to cache the image and page so it will work offline. This so far, however is not working as the image or page do not seem to be cached.
EDIT: Does anyone know how much is the caching limit. I believe I have somewhere around 10-15 mbs of images.
I will appreciate any ideas/opinions/resources on this task.
use CoreData to store your images offline Apple CoreData Docs
I am unsure wot you need the online bit for, are you retrieving images off the net or uploading them?