we've trying to develop a mobile web app that will provide offline capabilities, not just reading but also creating content.
Gears supports three important aspects:
- local server so we can have cached static content such as html, css, js, etc
- local database so that we can have data stored locally for offline access as well as store new content inside of it while offline
- workerpool, used for a background process that syncs data back to the server
By the looks of the gears page and some other articles, gears is being abandoned in favour of html 5 which is understandable.
However, at this stage there are two problems:
there's still a long way to have HTML 5 supported by major desktop browsers,let alone mobile ones
HTML 5 does not support workers, there is a draft http://dev.w3.org/html5/workers/ but I assume real browser support is still far away.
Do what does one do today? (e.g. within the next year)
Cheers
Rok
I think that you have slightly misinterpreted Google's position on Gears. According to an article in the LA Times:
The Google spokesman wrote to clarify in a follow-up e-mail, "We're continuing to support Gears so that nothing breaks for sites that use it. But we expect developers to use HTML5 for these features moving forward as it's a standards-based approach that will be available across all browsers."
It sounds to me like it is completely safe to continue using Gears, until and after HTML 5 is ubiquitous.
HTML5 support is a little better then you think.
Android has various support for HTML5 standards, with the inclusion of Google Gears into most versions and Android 2.0+ having native support for HTML5 (at least as far as audio/video, canvas, offline storage, and geolocation go). IPhone also supports offline storage along with audio/video tags. WebOS seems to have offline database support, but I don't know much beyond that.
http://www.whatwg.org/specs/web-workers/current-work/ is the web worker draft implemented in Firefox 3.5 and Safari 4, so they should wind up in IPhone's version of Safari eventually.
So if you can live without worker threads and don't mind limiting yourself to Android, WebOS, and IPhone, you can use a hybrid approach of HTML5 with a fallback to Gears.
I don't think supporting other smart-phones is going to be possible in a truly portable way, although Firefox for Mobile (which is nearing release on the Nokia N900) will support all the HTML5 as Firefox 3.6.
Appcache, Web storage & Web workers works on Firefox and newer Android devices.
Use this handy test http://dev.w3.org/2008/mobile-test/v2/ to profile browsers.
HTML 5 does not support workers, there is a draft http://dev.w3.org/html5/workers/ but I assume
real browser support is still far away.
I coded a working example of web workers using the WebKit engine included in Qt 4.6.2. Looking at the code history, support was incorporated sometime in 2008.
I've been surprised by the level of HTML5 already in (desktop) browsers (excepting IE of course). Mobile lags a few years. I've found this site useful: http://caniuse.com/
Related
HTML5 audio on mobile devices has many limitations and actually I would call them bugs.
My app implementing something like audio player.
Actually all it works fine for desktop but in mobile version I encounter many bugs and have to do many workarounds different for different browsers and os to get it work, and still it sucks.
I haven't dived into web audio api, but it seems to be designed for slightly different tasks.
So my question is, is it make sense (and is it possible?) to replace HTML5 audio with Web Audio API, if I need just to load files and play them (partly, sprites) just to avoid limitations and bugs of HTML5 audio?
I think you're probably going to find at least as many bugs or edge cases with Web Audio on mobile as you're seeing using the <audio> element. Plus, support for Web Audio on mobile platforms isn't great. If it were me, I'd be inclined to stick with <audio> unless you have a specific use-case that can only be addressed by the Web Audio API.
Actually, I'll disagree - if your goal is to play short snippets of sounds, particularly simultaneously - e.g., providing sound for a platform jumper game - Web Audio is going to be a lot easier to use, including on mobile. has issues managing multiple files/instances. On the other hand, if the problems you're running in to are due to decoding issues, or you're using mostly long files, it's not going to help, as Kevin and Brad said.
I recommend SoundJS which I develop, it takes a lot of the pain out of supporting audio on multiple devices. Basically it lets you write a single code base that works everywhere and already deals with edge cases where it can.
HTML Audio element implementation on mobile devices is really terrible, so if not SoundJS I would at least recommend switching to Web Audio which works well on iOS and Android Chrome but is not supported in Android Native browser.
idbehold's comment is accurate, the most common problem with mobile devices is having to play audio inside of a user initiated event (touch). I've developed a solution to this problem, shared in the Mobile Safe Approach tutorial.
Hope that helps.
My team is writing an HTML5 app that uses the appcache and localstorage heavily. Our target platform is ipad and android tablets (and design time we work extensively in desktop browsers, though that's not necessarily a must-have).
Now we want to add some offline-available features that will be beyond what the browser-based storage can support-- namely a library of video & binary content that will be bigger than the appcache can handle.
Without the major mobile browsers implementing the html5 filesystem api, it seems very much like some kind of native app approach will be required (PLEASE correct me if I'm wrong here... I'd love to be wrong on this!). So, I'd love to hear opinions/experiences folks have had. We're noodling around with a few different ideas involving one or more of the following:
Compiling in phonegap + using their file apis
Using the Dropbox sdk (which would also require some kind of native support, not sure if phonegap would work)
writing per-platform custom native apps that host webkit controls, then providing the majority of functionality with our existing, cross-platform html5 app (basically we'd be writing a per-platform custom browser using the standard webkit controls).
Note that I'm a fan of #3 because I feel like we could release a relatively stable shell but then preserve the html5 cross-platform goodness & ease of distribution of our app. However, I don't know if this approach works (and/or if Apple frowns upon this type of approach-- seems like a bit of an App Store loophole).
Very interested to hear what you've tried and/or heard about.
This might be a completely stupid idea but, if you're looking for a cheap way to get extra storage, why not just use an html or js file to contain the data? You could even, for whatever reason, store it as a 64-bit data uri and run the media natively. I think you could even save data to it by just manipulating the manifest to be reflective. It'd take a bit of tom foolery, but it should work.
If you use approach 1 you will be well positioned to move to a web app once the major browsers support the File API. You see the File API in PhoneGap is based on the W3C spec that the browsers will implement.
2, I started working on a Dropbox plugin for PhoneGap Android but I need some "spare time" to finish it.
3, Apple will probably reject your app if it is just a wrapper around your web site. They've done that in the past.
Simon
I want to make a single web application avoiding any flash code. This application must contain videoconference, and I want to implement it in pure HTML5. It is possible? I know about websockets, but don't know really if videoconference can be implemented through them with a relative performance (at least, 24fps + sound at a right resolution, minimum 640x480), and both endpoints being web apps (both endpoints should use browser).
Thanks in advance
Anyone following up this question - on Feb 4th, 2013 they produced the solution with WEBRTC in Chrome and Firefox. For examples see https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/ or http://www.html5rocks.com/en/tutorials/webrtc/basics/ or https://code.google.com/p/sipservlets/wiki/HTML5WebRTCVideoApplication
You can't really use HTML5 video for live streaming at the moment, and it doesn't have support for web cams yet.
Ericsson has modyfied a WebKit browser and is showing how this can be done with hopfully upcoming HTML5 Stream API. See Beyond HTML5 - Implementing and stream management in WebKit
It is impossible to capture web-cam images/microphone feed just through JavaScript (although there are plug-ins which let you handle output through flash), so it would be necessary for you to have some kind of application/plug-in installed.
The speed part is just for the client to worry. I mean, web sockets will be as fast as the connection permits.
You should do some research about web workers, since they would be very useful for speeding up your application (you could have microphone interface, web-cam interface and UI all with their particular worker, thus never blocking the application or rendering it unresponsive).
EDIT: the aforementioned jQuery plug-in works through the use of <canvas>.
As Jonas said, according to the situations now, we can't build video conference with HTML5. There are many limitations with browsers also. As there is no common video codec supported by all browsers. And live-streaming is also properly supported by safari only(using HTML5 video tag). As per my experience we can't build live-streaming on windows with any browser properly.
But if you wanna get some information about live streaming see https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/Introduction/Introduction.html
you can use this source to test your live-streaming examples
"http://xfunoonx.api.channel.livestream.com/3.0/playlist.m3u8"
This content will work only with safari on Mac.
a client wants to "modernize" a 5 year old web/html-based Blackberry "application".
The application allows field service technicians and franchisees to inquire on warranty
and service status. Currently they use very simple php/html pages.
Application seems slow, especially on repeated inquiries which require constant reload.
Blackberry/Java seems to be obvious choice, but client seems to think that
development and maintainace is expensive, which I suppose is true because this skill
is not very common around here.
I am thinking of maybe loading all pages in a single initial load and use a javascript
hide/show type technique to reveal pages as user requests them, and using ajax to populate/update data.
They want to target javascript enabled Blackberry devices (OS 4.5 and later). I know that issues and limitations
with css and js on early browsers. i would like to hear other people's experiences.
I know jQuery so that would be obvious choice, but it is pretty fat for wireless. Is there a better
toolkit for this purpose - I found the iqTouch site, but that was not Blackberry specific. Any sites with examples that I can harvest?
If you're targeting OS 4.5 and later, all I can say is good luck. BlackBerry support for HTML was pretty poor in older devices, and you're hit and miss at best with anything more than the most basic use of JavaScript. I've had very little luck with anything other than non-dynamic HTML websites with the older browsers.
With OS 5.0 and later you have a lot more options. Support for the Gears APIs and better JavaScript. The Widget SDK even lets you easily create HTML/JS based 'Widgets' for BlackBerry that can contain a bunch of pre-cached data. BlackBerry 6 of course, with its WebKit based browser and HTML5 support can do pretty much anything that iOS or Android devices can.
So my recommendation is to only go dynamic if you can target 5.0 and later. Or potentially a site that degrades gracefully to browsers that don't support JS well (either user agent detection or some fancy JS coding) and users with older devices have to deal with a slower experience.
have you looked at features available in HTML 5?
Do you know about useful resources about HTML5 & CSS3?
UPDATE:
I'm (and i think a lot of people) looking for practical information how and to what extent is it possible to use these unfinished technologies. I found one very useful resource:
http://caniuse.com/
For the gritty details when the metal needs to hit the road, go to the sources to lookup functions, objects, etc and get the latest info on them and their usage.
Implemented standards
Firefox
Mozilla Developer Network for Gecko engine
# https://developer.mozilla.org/en#Documentation
Internet Explorer
HTML, CSS, DOM object model
# http://msdn.microsoft.com/en-us/library/aa737439(v=MSDN.10).aspx
JScript (aka JavaScript)
# http://msdn.microsoft.com/en-us/library/hbxc2t98.aspx
Unsure about Webkit official dev docs (Chrome. Safari) but you can often use the MDC/Gecko docs because they are usually close in standards. (<< Update: Another answer provides Webkit info.)
Standards Sources
Standards also act as a good measuring rod for expected behaviour if you face a bug while developing.
This slide show is about HTML 5 standard technologies and must be viewed in HTML 5 (e..g Google Chrome works well).
HTML 5 (W3C):
http://dev.w3.org/html5/spec/Overview.html
CSS 3 (W3C):
http://www.w3.org/TR/css3-roadmap/
HTML 5 Web Sockets (W3C): http://dev.w3.org/html5/websockets/
WebGL: http://www.khronos.org/webgl/
Web SQL Database: http://dev.w3.org/html5/webdatabase/
Application Cache API for offline apps (W3C): http://dev.w3.org/html5/spec/Overview.html#offline
Web Workers for background processes (W3C): http://dev.w3.org/html5/workers/
Web Sockets for 2-way communication with host (W3C): http://dev.w3.org/html5/websockets/
Drag and Drop (W3C): http://dev.w3.org/html5/spec/Overview.html#dnd
Geolocation to pinpoint yourself (W3C): http://dev.w3.org/geo/api/spec-source.html
Web Storage to store more data in the browser (W3C): http://dev.w3.org/html5/webstorage/
Canvas Tag for on-the-fly visuals: http://dev.w3.org/html5/spec/Overview.html#the-canvas-element
and many more .... There are many parts.
A Strategy to find more info ...
See this great slide show (using an HTML 5 capable browser - it'll get you in the mood) for the overview...
Then look up the spec you want at the W3C.org website or Google its contents using a search terms to target the site like "site:www.w3.org "html 5" YourTerm" for example the Google Canvas tag.
As far as HTML5 goes, I frequently check out:
https://html5doctor.com
Dive Into HTML5
And yes, the HTML5 spec, which I recently visited to find out more about supported input types and form field attributes in HTML5:
https://w3c.github.io/html/
https://w3c.github.io/html/sec-forms.html#sec-forms
As for CSS3, I often find myself at:
http://www.css3.info/
Safari reference material, which may or may not be HTML5/CSS3 specific:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html
Believe it or not, wikipedia: comparison of layout engines CSS3 and HTML5 is actually pretty good at very detailed comparisons. Modernizr is very coarse grained.
You can also take a look at HTML5 Laboratory which is my own HTML5 experiment site.
As mentioned above, HTML5 Doctor and Dive into HTML5 are two great resources.