Firefox/Projects/Firefox Start/Snippet Service

From MozillaWiki
< Firefox‎ | Projects‎ | Firefox Start
Revision as of 23:18, 15 February 2011 by LesOrchard (talk | contribs)
Jump to navigation Jump to search

The about:home snippet service is a simple, highly-cached content management service. It is intended to assemble and deliver content snippets to the about:home page in Firefox.

The content delivered is determined by details about the installation of Firefox requesting content - including mainly details about the browser's build, locale, platform, and distribution channel, but not the person using the browser.

Overview

About about:home

about:home is a page built into Firefox 4 and above. By default, it fetches content from the production snippets service once every 24 hours. If content is available, it gets is stashed in localstorage for the page and displayed from there until the next fetch.

Source code for service

If you'd like to contribute or just run an instance, get the source from here:

See bug 592431 for historical context on this service.

Using a non-production service with about:home

For testing against staging (snippets.stage.mozilla.com) or a private development instance of the server, you can use this add-on to switch services and force a refresh of content:

How this works is that there is a user preference modifiable in about:config that allows you to switch the service URL (browser.aboutHomeSnippets.updateUrl, see bug 603674).

However, switching the service URL doesn't get around the 24 hour wait between service fetches. You can do this by hand with Firebug or other tools to modify the localstorage variables used by the page. The add-on manages all of this.

Getting access to the production snippet service

This resource is highly protected, since it serves up content to all installations of Firefox. Access is limited to Mozilla employees, so file a bug or ask someone who knows about the snippet service.

Managing snippet service content

Client match rules

The first aspect of getting snippets served are client match rules. These are rules matched against the URL of a request to the service, which should contain the following client details:

  • Product name (eg. Firefox)
  • Product version (eg. 4.0b12pre)
  • App build id (eg. 20110214030347)
  • Build target: (eg. Darwin_Universal-gcc3)
  • Locale: (eg. en-US)
  • Channel: (eg. nightly)
  • OS version: (eg. Darwin 10.6.0)
  • Distribution: (eg. default)
  • Distribution version: (eg. default)

A client match rule defines criteria for one or more of the above attributes, optionally using a regular expression. One or more client match rule may be associated with any given snippet. When a request URL matches a rule, any associated snippets are included in the response.

The exception is when a rule is flagged as an exclusion rule. In that case, the snippet is excluded from the response, regardless of any other rules matching.

Snippets

A snippet is an arbitrary block of content - which includes any combination of HTML, CSS, and JavaScript. Snippets associated with client match rules matching the current request URL are included in the response.

For the sake of scaling, any images or other external resources should be encoded as data: URIs so that everything required for the snippets is delivered in the same request.

All HTML content must also be well-formed XML.

Since multiple snippets can be included in the same response, the Sort order priority field is used to provide a sort index. So, for example, if you have some JavaScript to include after all snippets, a value of 9999 will place it after than the default of 0. If you have CSS to place before any other snippets, a value of -9999 will place it before the default of 0.

Service response as a whole

The response from the service is the result of snippets associated with client match rules triggered by the request URL, sorted by the sort order priority.

Keeping this in mind is important in considering what the response to any given client will look like. It means you can do things like:

  • serve up common CSS and JS snippets for all locales
  • include localized HTML content sandwiched between CSS and JS, using the sort order
  • serve up multiple blocks of HTML, all hidden by CSS and selectively revealed by JS at random

Example