Custom Software Development and Engineering

Bringing the Ginger morph target demo into the progressive web app future

Ready to learn more? We're helping host Google Developer Group BayFest DevFest, October 22, 28 and November 4th. Get your ticket today!

When we released Ginger way back in 2011 it was a bleeding edge sort of demo. WebGL still had a long blacklist of driver back then and no one had yet completed a morph target demo in WebGL. Given our cross domain expertise from our animation department, we were able to create not only a demo, but something people enjoyed. People would send us screenshots all the time and it was a lot of fun.

It was on the front page of Chrome Experiments for some time (still pops up every once and a while) and to this day still draws a significant audience.

After Chrome Dev Summit this year, progressive web apps seemed to be all the rage. We weren’t strangers to Service Worker (we use it constantly) and the concept around the progressive web app idea seemed reasonable. So we decided to dust off Ginger and bring the demo into the future.

The new Ginger utlizes the latest and greatest of the web once more:

  1. Utilizes an app shell and service worker via the platinum-sw Polymer element to give us a full offline experience.
  2. Utilizes platinum-sw-offline-analytics allowing us to use Google Analytics even when offline.
  3. Utlizes Google App Engine’s ability to serve not only in HTTP/2, but also utilize HTTP/2 Push making the overall experience blazing fast. This is largely based on the work of the Google Chrome team http2push-gae and is it ohhh so sweet.
  4. Utilize manifest.json for “Add to Homescreen” capability
  5. Uses friend and fellow Google Developer Expert Zeno Rocha’s excellent clipboard.js to make sharing a pose as easy as clicking a button (sharing a pose was the most requested feature we had to the project for years).
  6. Ability to take and save a screenshot.
  7. Inline CSS and shell for fast first paint.

the latest version of Ginger running on Google App Engine

The result of the work is a significantly improved experience; a fastest cache strategy that allows the best user performance across a wide range of devices.

And unlike the first time, we’ve now open sourced the project for all to see, available on Github under an Apache 2 license.

Expect more progressive web app goodness in 2016 as we continue to push the web forward.

Ready to start?

Get in touch. We're ready to listen.