Why does google.com look different on blackberry & phonegap vs. blackberry & browser - browser

I'm tyring to get phonegap up and running on blackberry storm (9530 simulator). I had been testing my webapp from withing BB's built in browser, and it was looking ok, but then it totally bit once I tried to look at the some code from within phonegap, even though I was pointing phonegap to the same url (I hadn't yet gotten to the point of running code locally on the device).
I tried a test case on google and got similiar results. see below. I suspect that I'm missing something basic here. I would have expect both images to be nearly identical.
Browser
http://www.eleganttechnologies.com/outside/ImgDeviceBB9530WebGoogle.jpg
Phonegap
http://www.eleganttechnologies.com/outside/ImgDeviceBB9530PgGoogle.jpg
[Update]
To shed some light on what is happening, I ran the browser and the embedded browser (phonegap) against the W3 mobile web acid test: http://www.w3.org/2008/06/mobile-test/
I definitely notice differences between the two, but I don't yet know the 'why' and the 'how-to-address'.
Acid via built-in browser
(source: eleganttechnologies.com)
BTW - I ran this earlier today and got a couple more green square than just now.
Acid via browser embedded into phonegap
http://www.eleganttechnologies.com/outside/ImgDeviceBb9530PgAcid.jpg

Disclaimer: I don't know anything about phonegap, but have a pretty good theory. By default the embedded browser control on BlackBerry uses an older version of the rendering engine than the BlackBerry browser itself does.
At the BlackBerry developer conference last year, a talk was given about this, and there's an undocumented option to use the newer rendering engine. \
The option ID is 17000 (yes, a magic number, which could change, use at your own risk etc), and should be set to true. Not sure how you'd pass this option through phonegap (I'm not familiar with the toolkit) but using the BlackBerry APIs it's something like:
BrowserContent content;
...
content.getRenderingOptions().setProperty(RenderingOptions.CORE_OPTIONS_GUID, 17000, true);

I don't know the specifics of the browsers you are using, but I do know that most of the big sites will detect your OS + browser combination to decide what HTML to show you.
If Google is seeing a different user agent, you might get a generic mobile version of the HTML instead os the Blackberry specific HTML you get for the built in browser.
If you have access to a web server, try hitting it with both browser setups and see if there is any difference in the log file. That might tell you something interesting.

As we can see in your Acid tests...
One browser (the built-in one) is reporting correctly as a BlackBerry9530, and the other (phonegap) is not presenting the user-agent ["Testing with ."].
In this case, Google is providing you with the default view of their homepage, whereas when you are reporting yourself as a BlackBerry device, you will get the BlackBerry specific rendering.
By the sounds of things, using phonegap is removing the default user-agent (most probably because it's not recognising your device). As phonegap is open-source, the best bet is to get in there, and debug it and find out what happens with the user-agent when the http requests leave the device and track it back from there.

Maybe one browser has capabilities that another one does not?

Hm. By looking at the screenshot I would say that the second page is probably missing some resources. It may be missing some images, scripts and the CSS files, which would explain different l&f. Knowing how Blackberry Browser Field API works, I would guess that the implementation that uses the BrowserField was not done correctly. Just my guess. In addition to that, when the browser field is initialized the caller needs to configure it properly by enabling the appropriate browser features - scripts, styles etc. Again, the API is done in a very weird way, I have gotten myself into this trap once. When setting the options, you cannot just create one mask (like CSS | WML | SCRIPT) and make one call. Options are numeric and, I believe, non-overlapping - but you still need to call the API for setting each option independently.
Also the way asynchronous loading of the resources for BrowserField takes time to understand.
Just my $0.02.

Related

Why do user agents / browsers lie

I have read several articles on feature detection and that it is more reliable than browser detection because browsers lie.
I couldn't find any information on why they lie. Does anyone know the reason why they would do that?
As far as I understand it, Webmasters do browser sniffing to find the capabilities of a browser and limit what they send to the browser. If a browser lies about it's capabilities they will receive more from the webmaster, you can read more:
http://farukat.es/journal/2011/02/499-lest-we-forget-or-how-i-learned-whats-so-bad-about-browser-sniffing
http://webaim.org/blog/user-agent-string-history/
The reason is simple:
Because web sites look at the user agent string and make assumptions about the browser, which are then invalid when the browser is updated to a new version.
This has been going on almost since the begining of the web. Browser vendors don't want their new versions to break the web, so they tweak the UA string to fool the code on existing sites.
Ultimately, if everyone used the UA string responsibly and updated their sites whenever new browser versions come out, then browsers wouldn't need to lie. But you have to admit, that's asking quite a lot.
Feature detection works better because when a new browser version comes out with that feature, the detection will pick it up automatically without the either browser needing to do anything special nor the site owner.
Of course, there are times when feature detection doesn't work perfectly -- eg maybe if a feature exists but has bugs in a particular browser. In that case, yes, you may want to do browser detection as a fall-back. But in most cases, feature detection is a much better option.
Another more modern reason is to just avoid demands to install mobile apps (where product owners contol what I can and can't do with content. No thanks!).
Today Reddit started to block viewing subreddits in case they detect a mobile browser in UserAgent so I had to change it just to be able to view content.

Can I embed a browser inside a screensaver? On both Windows and Macs?

Here's the deal. I've animated + coded a variety of 'screensavers' in Actionscript3/Flash. They make extensive use of the timeline, AS3 code, the TweenLite library, and embedded fonts. That's the limit of my programming knowledge. I've tried, to no avail, to convert my .SWFs into screensaver files using a variety of software, such as InstantStorm. Somehow it never works, the code never executes properly, it's a disaster.
So, I'm wondering if it's possible to make a screensaver that simply contains an embedded browser, and have it point to my .SWF file, hosted on my web-server. Basically, imagine a full-screen website acting as a screensaver.
If this is possible, what is the EASIEST and FASTEST way for me to whip up a solution for both PCs and Macs? Language, etc. I'm hoping something that has a library I can simply draw from to embed the browser view :)
My startup is developing a product to do exactly this, it's called Screensaver Ninja and you can find it at https://Screensaver.Ninja.
You can set many different web pages with different timers. The configuration tool allows you log in and navigate to the page you want to display:
It uses WebKit, on Mac OS X it uses Safari's and on Windows it uses Chrome's and in both cases it has a separate session from any other browser installed on the computer.
Here's a small Windows-only solution:
https://github.com/cwc/web-page-screensaver/releases
You could modify this open-source one for the Mac so that it's hard-coded to your URL:
http://www.liquidx.net/blog/2010/11/13/webviewscreensaver-for-mac/
Modify hasConfigureSheet() to return NO and change the URL in kScreenSaverDefaultURL. And change the name!

How to make Mobile version of website

I am looking for something that will help me learn how to set up my site so that when people go to it there is the regular version and the mobile version. Problem I am having is that most of the sites I see on google are pay sites that help you set that up. Can I just make two versions of my site and load them both on my hosting? Also how does it know when to load the mobile versus the regular? These are the types of things I am looking to learn, any suggestions of places to start?
Please please please make sure you do the following:
Only do a mobile version if it adds value.
If a user requests a deep link from a mobile device, don't redirect to the mobile home page
Allow the user to choose to view the full version
Make sure tablets such as the iPad uses the full version by default
Don't serve WML to the hi-res smartphones such as the iPhone
If your full sized website is unusable on a phone, consider tweaking it to be more suitable (don't print content text too wide).
Modern iPhones and iPads are perfectly capable of handling most full sized websites, there is little need for a mobile version unless it actually improves the user experience. I hate to get redirected to a baby interface that doesn't provide the information I need.
Good examples of mobile versions include:
Google website
Gmail website
Mediocre examples include:
Any blogpress site
Bad examples include
anything that uses WML
Here's Apple's advice on providing mobile versions to the iPad:
Note that the Safari on iPad user
agent string contains the word
"Mobile", but does not contain the
word "iPhone". If you are currently
serving mobile content to any browser
that self-identifies as "Mobile", you
should modify your user agent string
checks to look for iPad and avoid
sending it the wrong version of your
site. The version numbers in this
string are subject to change over time
as new versions of Safari on iPad
become available, so any code that
checks the user agent string should
not rely on version numbers.
Something to look into would be the #mobile css media type, which is used to load a different styles when loading in a mobile device. I am not sure which devices support it, but I imagine it would be most of the popular models. As far as your suggestion, you can certainly host two separate sites, but I would defiantly go through Alex's suggestions before you go through the trouble.
http://www.w3.org/TR/css-mobile/
Alex had some good suggestions, but if you really want to serve up a specific version based on mobile or non-mobile you can take a look at the http header. In some cases the User Agent will give it away, but not always. Check out this link for details: http://detectmobilebrowsers.mobi/

What quirks are in the Blackberry Web Browser that a developer should be aware of?

Before I start pulling my hair out on any "known issues", is there any quirks or problems that I should be aware of.
Specifically with cookies, JavaScript, HTML, CSS and images.
PS I have a copy of the docs provided by RIM, but I'm hoping others know of some lesser known issues.
Here are a few that I've noticed:
For some reason, the BB browser doesn't seem to handle underscores in the hostname correctly. I don't remember what happened, but if you hostname is like this: http://some_host/blah, I remember it having problems.
This can be corrected with a DNS entry that removes the _
Another thing we've seen is serving up .jad files for Java downloads. If your module contains _ or other special characters, the BB browser displays a HTTP 500 error when trying to fetch the .jar or parse the .jad. This is especially annoying because it's not actually an HTTP error, the server is serving up a file, but the BB browser just can't parse it, so it blames the server.
We fixed this by using Fiddler to hit the .jad URL and view the contents of the HTTP response. If your .jad has any special characters (or sometimes URL/HTTP encoded strings) you might need to simplify your module name to only use A-Za-z0-9
I know those aren't exactly html/css things, but thought I'd post this anyway!
I had used the blackberry browsers on emulator versions to test my web pages.
These are some i would like to point out.
Please forgive me in case of any deviation with a real case because these are specific to emulator versions on windows 7 OS. I dint have the devices to check and verify.
When we are coming down to a BB OS version below 5.X (eg. BB 9630), the browsers support for java script will be turned off by default. So you need to go browser options turn on it manually.
When we go further down to BB OS version 4.2, the style sheet support will be turned off by default. Causing your webpages to render without applying style sheet. So that time you need both the java script and style sheet supports to be turned on manually.
Even when i was on a OS version 7.X or 6.X, the internet connection was working and i could connect to pages. When i went down to version 5, those emulator browsers shown issues for connection. On googling i found that MDS is a requirement when we go down the versions and seek internet access.
I installed MDS, still it was not working for versions below 6, reason being the JAVA_HOME environment variable was not set in my advanced system settings in my-computer properties. But it was not even pointing out the issue and the MDS was closing instantly.
So after setting my JAVA_HOME to "C:\Program Files (x86)\Java\jre1.6.0_07" the place i installed JDK(we need JDK for MDS), internet connection started working.
Also if you are using g zip compression for your pages, below Blackberry OS version 6, the browsers no longer requests for a compressed one. (found it on OS version 5 emulators BB 9700,BB 8520).
Also when you are going to use a css property or html entity that you doubt support, be sure to go to the corresponding OS version content developer guide and find from which version are they providing the full support and partial support.
Check out the BlackBerry Browser Version 4.2 Content Developer Guide. It is for the older 4.2 browser but still has lots of good info about what HTML, CSS, and javascript is supported.
My experience with BB 8700 is that you should not use JavaScript, neither depend on CSS to be rendered correctly. It also has no flash player by default so you're off to plain server-side HTML form processing/ASP/CGI. Also beware of size, as internet can get pretty slow while on the road.
One known issue is that the Blackberry browser completely ignores the css display property, so you can't use display:none to hide content.
We've also had trouble with basic form submittal - sometimes, the POST doesn't happen at all, other times it happens but some or all of the form fields go AWOL. We haven't been able to get to the bottom of this issue, but it seems to occur mostly with the BB Curve series.

How to create a browser window in J2ME?

How can i create a browser component in J2ME which can display web pages inside an application? Is there any API available for this ? or is this really possible ?
My experiences:
J2MEPolish has HTML browser. It costs 990EUR per app and you need to use J2MEPolish to use it. But be warned: their HTML browser has many issues, it supports forms and other advanced elements, but if you try to get something you like then rendering quality is bad (e.g. no spacing, defaults to center view etc). Free evaluation/GPL is available.
PocketLearn J2ME HTML Component - http://www.j2mehtml.com/ seems to have less features but much better rendering quality. This is not free as well, and there they do not provide any useful evaluation download or public license fee info.
J2ME cHTML browser is free and open source, but no docs (and probably no quality too)
As far as I know, the only browser written in J2ME is Opera Mini (not to get confused with Opera Mobile, which is a different thing). It runs amazingly good even on very low end phones, but most of the HTML handling is done on a special server that Opera hosts, and the client gets optimizes, preformatted, binary data to display.
Doing everything on the phone using Java might be hard or even impossible. You'd be able to code up a browser that displays very basic HTML pages, but doing it right even for more complex pages seems to be impossible on J2ME because of the limited memory and CPU.
I could imagine that some high end phones come with a custom API to embed a native browser into you Midled, but the standart J2ME definitely does not have this.
The only portable way to display a web page in the browser is with:
MIDlet.platformRequest(String URL);
On some mobile, this will terminate the J2ME application though.
The Content handling API is what you're looking for.
That's JSR 211.
Unfortunately, to do what you want, you would need to find a handset that contains an implementation of JSR211 that is both complete and correct.
That doesn't exist yet as far as I know.
The only J2ME emulator that I know that may allow you to launch a web browser window (outside of a MIDlet) is the Nokia Series60 emulator. That doesn't have a complete implementation of JSR 211.
Try this
http://sourceforge.net/projects/fire-j2me/
Unfortunatley there are no built-in components in Java ME to render html.
You can try htmlBrowser component of the j2mePolish toolkit (www.j2mepolish.org)

Resources