santatracker.google.com

Question

Hello,

Every year google launch this website for christmas and there are a lot of web games. My question is, which technologies and programming languages have google been using to build this website?

Thank

Answer 1

On the web, Santa Tracker is a large, interactive site with many unique 'scenes'—written using Polymer—that supports most modern browsers. The assessment of whether a user's browser is 'modern' is determined through feature detection: Santa requires Set and the Web Performance API, among others.

In 2016, they upgraded the engine behind Santa Tracker to support an offline experience for most scenes. This excludes scenes backed by YouTube videos or those that deal with Santa's live location, which is of course only available with a direct connection to the North Pole! 

Santa, built with Polymer

It's worth stepping back and talking about Santa's overall design before diving into how we upgraded it to an offline PWA.

Santa is a single-page application, originally written in Polymer 0.5, and now upgraded to Polymer 1.7. Santa is made up of a shared set of code—the router, shared navigation assets etc. It also has many unique 'scenes'.

Answer 2

Each scene is accessible through a different URL—/village.html, /codelab.html and/boatload.html—and is its own web component. When a user opens a scene, we preload all its required HTML and assets (images, audio, css, js), which exist under /scenes/[[sceneName]] in the Santa Tracker repository. While that happens, users see a friendly preloader that shows progress.

This approach means that we don't have to load unnecessary assets for scenes the user doesn't see (which is a lot of data). It also means that we need to keep an internal 'cache manifest' of all the assets required for every scene. The cache manifest is a JSON file storing a mapping from filename to an MD5 hash of its contents.
Load what you use

This model saves bandwidth, only serving resources required for the scenes a user visits, rather than preloading the whole site at once. Santa Tracker leverages Polymer's ability to upgrade custom elements at runtime, rather than at load time.

Answer 3

Santa Tracker takes the following steps to load a scene, e.g., boatload-scene:

All scene elements (including <boatload-scene>) are initially unknown and are all treated asHTMLUnknownElement with some additional attributes.When the selected scene is changed, the <lazy-pages> element is notified.The <lazy-pages> element resolves the scene's element and path attribute, loading the HTML import scenes/boatload/boatload-scene_en.html. This contains the Polymer element and its dependant elements.The friendly preloader is shown.Once the HTML import is loaded and executed, <boatload-scene> is transparently upgraded to a real Polymer element, full of holiday cheer.

This approach has its challenges. For example, we don't want to include duplicate web components. If two scenes use a common element, e.g., paper-button, we strip it out as part of our build process and instead include it in Santa's shared code.

Answer 4

Santa Tracker is already neatly segmented into scenes thanks to Polymer and lazy-pages; plus each scene has its own directory. We designed Santa Tracker's service worker, the core piece that enables offline which runs on a user's browser, to be aware of the shared code versus 'scene' distinction.

What's the theory behind Service Worker? When a user on a supported browser loads your site, the frontend HTML can request that the service worker is installed. For Santa Tracker, the service worker lives at /sw.js. This fires an install event that will precache all of Santa's shared code, so nothing needs to be fetched at runtime.

Answer 5

The Service Worker, once installed, is able to intercept all HTTP requests. For Santa Tracker, the simplified decision flow looks like:

Is the request already cached?Great! Return the cached response.Does the request match a scene directory, like "scenes/boatload/boatload-scene_en.html"?Perform a network request, and store the result in the cache before returning it to the user.Otherwise, perform a regular network request.

Our flow and install event allows Santa Tracker to load, even while a user is offline. However, only the scenes a user has previously loaded will be available. This is perfect for replaying a game and beating your high score.

Keen observers may note that our caching strategy doesn't allow for changes in content. Once a file is cached in a user's browser, it will never be changed. More on that later.

Answer 6

https://developers.google.com/web/showcase/2017/santa