An Early Look At Google Chrome Web-Apps

chrome-webapps

It’s no secret that I’m a fan of Googles Chrome browser. Which is why I followed Google’s instructions on enabling web-apps in the newest dev builds of Chrome. Here’s what I found out:

  • Making a Chrome web-app is as simple bundling a  few icons with a URL in a .js file. Which incidentally is also how you build Chrome extensions.
  • The bundling of icons with the .crx web-app bundle solves the problem of small 16×16 favicons doubling as launch icons. This is clearly more elegant than the stylized 8-bit converted favicon approach Mozilla experimented with for Prism back in the day.
  • One immediate benefit of using Chrome web-apps is that once you’ve clicked “Install” on a web-app, you’ve automatically given it all the permissions it needs, such as access to notifications, geolocation and local storage.
  • Installed web-apps show up on your new tab page. As seen above.
  • When you open a web-app, it shows up as something other than a pinned tab. The design argument is for it to look distinct from your tabs, which you’re likely to have a lot of.
  • When you click a web-app tab, the entire addressbar including navigation buttons and even the extension shelf, are hidden, maximizing the available real-estate.

For those worrying about Chrome web-apps not being “open”, it’s worth noting that as of this version of Chrome, all a web-app consists of is a URL. Just look at this code sample:

{
  "name": "Gmail",
  "version": "3",
  "icons": { "24": "24.png", "128": "128.png" },
  "launch": {
    "web_url": "https://mail.google.com/"
  },
  "permissions": ["notifications"],
  "web_content": {
    "enabled": true,
    "origin": "https://mail.google.com/"
  }
}

This is still a very early look at Chrome web-apps, but I can see it working, if nothing else then for the fact that it’s so easy to create a Chrome web-app. So yeah, it may just be a super-bookmark, but it’s so convenient. Imagine a Twitter for Chrome web-app. You click “Install”, and it’s there on your browsers new tab page, synced to your Google account, and it’s got geolocation and notification permissions without any extra clicks.

Chrome Webstore

Announced at Google IO is a Google Chrome web-store, no doubt created to bring good content to Chrome OS. You’ll be able to — just like on the iPhone app store — buy web-apps which are then installed in your Google Chrome browser or later this year, Chrome OS.

Thoughts:

  • They demoed Plants vs. Zombies. Which tells me the first Chrome OS hardware release will be a tablet, not a netbook.
  • Interestingly, Plants vs. Zombies was built in Flash, which kinda explains why Google chose to integrate the Flash Player in Chrome.
  • A Unity app was also demoed. Does that mean a Unity plugin is about to be included in Chrome?
  • So maybe Google realises their Chrome OS HTML5/JavaScript strategy may be a few years in the future, so they’re using Flash and Unity as transitory technologies for web-apps.
  • It’ll be interesting to see if the Chrome web-store will work in browsers other than Chrome. My guess is: yes.

VP8 Video Codec Rebranded WebM, Also Open Sourced

It’s what many of you hoped for: Google has open sourced VP8. It’s all documented on the new official webpage, The WebM Project.

Some quick thoughts and notes:

  • YouTube is converting all its video to the WebM codec, starting with 720p video. You can opt in to the beta HTML5 version of YouTube today, and play the videos using Google Chrome dev channel.
  • So H.264 is “patent encumbered”, WebM is not. Which is why this is a big deal.
  • Microsoft previously announced they’ll only support H.264 in Internet Explorer 9. With Opera, Chrome and Firefox supporting WebM, IE is further digging into irrelevance unless they adopt this.
  • The interesting thing is whether Safari will adopt WebM. My bet is they will, eventually.

The Branding Of Google Chrome

Google is firing all its cannons with its Chrome browser. It’s out for all the major platforms, and it’s even got a dedicated operating system in development. Part of such a cross-platform effort is a strong need for visual branding — a unique look which will subconsciously tell the user which browser they’re using. For two reasons, I’ll talk about Google Chromes branding today; first and foremost, to illustrate that a tab is not just a tab. Secondly, because Chrome has recently changed branding in a few key areas (which serves to illustrate the first reason).

A Tab Is Not Just A Tab

My good friend Chris called me on referring to Google Chromes tab design “unique” and “branding”:

@noscope It’s a tab. Of course that needs to be there. I don’t see what anyone could do to change that or, make it look brand specific.

Let’s look at Google Chrome at launch:

Google_Chrome_UI

Google Chrome (development channel) today:

Google_Chrome_UI_april_2010

Aside from the addition of an extensions pane, we notice a number of changes:

  • The frontmost tab and toolbar is now monochrome as opposed to bluish previously.
  • The reload button is now integrated in the addressbar field, and the favourite star has been moved inside the addressbar.
  • I can’t recall if the old version would show the site favicon also in the addressbar, but in the newest version you’ll see the favicon only on the tab.
  • Did you notice the Google logo is gone?1.

What’s interesting here, is what Google did not change. And that is what I would argue is the most important branding. The tab design and layout.

Tintins Silhuette

Comic artists have worked for decades to create unique silhuettes for easily identifiable characters. Here’s comic artist Hergés Tintin:

Tintin

If they made a movie, do you think they’d leave out this silhuette?

Games do it. Team Fortress 2, notably:

TF2

In the same vein, for software, the wireframe is the silhuette of the application. Here’s Firefox 4s wireframe look:

Firefox_4_wireframe

Clearly, the wave in browser interface design is tabs on top and minimal UI to save space for web-apps. It must’ve been a challenge for the Firefox designers (good job, by the way) to revamp towards this norm yet keep Firefox branding intact. Looking at the wireframe, the standout Firefox branding is now the App button and the Home Tab. The back/forward “keyhole” design not present on this wireframe is also an important Firefox branding element.

Usability Is Not A Jackson Pollock Painting

The design of the Chrome interface may be grounded in a rethinking of the browser — webpages are apps, tabs are app buttons — but the unique tab design is not an accident. Look:

Chrome_design ChromeOS_design

One of the above is a Windows app, the other is a standalone OS. Sure, it’s iconified, but it illustrates the uniqueness of the tabs. These images are from the Chromium project’s Visual Design article, which also gives the following explanation for the design:

While it doesn’t show through today, we drew early inspiration from The Designers Republic’s work on the then-Psygnosis games WipEout and WipEout 2097; the focus on blinding speed, and iconography that could be recognized instantly even in the depths of your peripheral vision were both key attributes we admired.

The word “branding” may be thrown around a lot, these days. But in the case of the mysterious Google  Chrome tabs, I would consider it appropriate.

  1. There’s a chance it’s gone because this is the dev channel, and that it’s present in the stable channel — I cannot say because I’m running only the dev channel. But my guts say it’s gone for good []

More On WebKit 2

WebKit2 is not a fork of WebKit:

WebKit2 is NOT a rewrite of the whole WebKit stack. Webcore will continue mostly unchanged, and all ports currently building on top of it will keep working. It is also not a fork – the code lives in the same tree as the current version of WebKit, which will allow us to progressively move towards using this new, improved layer. WebKit2 is not Apple-only, and it is not dropping Linux support. Initial builds of the code that is being landed will likely show up building on Linux in the near future (specially because us porters are already eager to play with it).

In Memoriam: http://

In the most recent development build of Google Chrome for Windows, you will no longer see http:// as part of any URLs. Look:

Chrome_address

Takes some getting used to, but in comparison, http:// is looking rather quaint now, isn’t it?

IE8_address

What about the https protocol then? Well Chrome still shows that:

Chrome_https

It’s a nice change, and I think there are very few arguments against it. I predict it will gain widespread acceptance — for those that notice the change at all. Rest in peace, http://, 1990-2010.

WebGL In Google Chrome

WebGL now easily available for Google Chrome dev channel users:

WebGL is running inside the sandbox under the –enable-webgl flag (i.e. this no longer requires the –no-sandbox flag to run). Browsing with the –no-sandbox is dangerous and we strongly recommend that you not do it.

Google has been working hard to get WebGL 3D hardware acceleration working properly — you may have seen a Quake 2 demo in HTML5 one of these days — no doubt to have it ready for the impending release of Chrome OS.

Interesting turn of phrase, also: “browsing with the –no-sandbox is dangerous”. To my knowledge, browsing without sandboxed processes means browsing with any other browser than Google Chrome.