FirefoxOS/Pin the Web/Optimising Content

From MozillaWiki
Jump to: navigation, search

Optimising Content for Pin the Web

Pin the Web allows users to pin any piece of web content to their Firefox OS device, represented by a card on the homescreen which stores key metadata and deep links back to the original page. Users can also pin a whole web site or web app to the device, represented by an icon on the homescreen which launches the site at its start URL. Pinned content is displayed with collapsed browser chrome for an app-like experience.

Pinned Sites and Pages

This page provides the latest advice on how to optimise web content (Both in Gaia and third party content) to take advantage of the Pin the Web features coming in Firefox OS 2.5. These features are under heavy development and all of the below is subject to change.

The great news for web developers is that the kinds of things you need to do to optimise your content for "pinning" are exactly the same things you already need to do to optimise your content for consumption by search engines and social networks, using existing web standards. There is no Firefox OS specific code here.

Page Metadata

Basic (HTML & RDFa style meta tags)

The most basic requirement for making a piece of content pinnable is to give it its own URL, anything with a URL can be pinned. You should also give every resource a meaningful title in the <title> tag.

If an icon isn't provided in an app manifest, one can be included in the page with a <link rel="icon"> tag.

You can also optionally provide a description meta tag and a theme-color meta tag.

This will be enough to generate a basic card when the content is pinned the homescreen. The title and optional description are included in the card, the theme-color is used as a background colour if provided and the icon is used to "pin" the card to the screen.

Basic Example: 

 <head>
   <meta charset="utf-8">
   <title>My Page</title>
   <link rel="icon" type="image/png" href="icon.png" sizes="64x64">
   <meta name="description" content="This is my page">
   <meta name="theme-color" content="#0000ff">
 </head>

In order to create a more interesting and useful card which goes beyond the basic template, you can specify a type for your content and provide additional metadata using RDFa style meta tags and the popular Open Graph vocabulary. RDFa is a W3C Recommendation which can be used to embed metadata in HTML and Open Graph is a simple vocabulary for RDFa style meta tags which is already widely used on the web and consumed by social networks like Facebook and Twitter.

Article example: 

 <html prefix="og: http://ogp.me/ns#">
 <head>
   <meta property="og:type" content="article" />
   <meta property="og:title" content="My Article" />
   <meta property="og:description" content="This is my article." />
   <meta property="og:url" content="http://example.com/articles/my_article.html" />
   <meta property="og:image" content="my_image.jpg" />
 </head>

Video example: 

 <html prefix="og: http://ogp.me/ns#">
 <head>
   <meta property="og:type" content="video.other" />
   <meta property="og:title" content="My Video" />
   <meta property="og:url" content="http://example.com/videos/my_video.html" />
   <meta property="og:image" content="my_thumbnail.jpg" />
 </head>

Advanced (JSON-LD)

For more advanced use cases like representing complex structured data, linked resources and associated actions, we will have limited support for JSON-LD and the Schema.org vocabulary. JSON-LD is a W3C Recommendation for how to express metadata in JSON and Schema.org is a popular vocabulary already in wide use on the web and consumed by search engines like Google, Yahoo, Bing and Yandex.

Person Example: 

 <head>
   <script type="application/ld+json">
     {
       "@context": "http://schema.org",
       "@type": "Person",
       "address": {
         "@type": "PostalAddress",
         "addressLocality": "Seattle",
         "addressRegion": "WA",
         "postalCode": "98052",
         "streetAddress": "20341 Whitworth Institute 405 N. Whitworth"
       },
       "email": "mailto:jane-doe@xyz.edu",
       "image": "janedoe.jpg",
       "jobTitle": "Professor",
       "name": "Jane Doe",
       "telephone": "(425) 123-4567",
       "url": "http://www.janedoe.com"
     }
   </script>
 </head>

Site/App Metadata

Basic (HTML meta tags)

The most basic metadata you can provide for your web site or web app is a name and an icon, which you can do with simple HTML tags.

Simple example: 

 <head>
   <meta charset="utf-8">
   <meta name="application-name" content="My App">
   <link rel="icon" type="image/png" href="icon.png" sizes="64x64">
 </head>


Advanced (JSON web app manifest)

For anything more complex you might want to consider providing a web app manifest for your site. Web App Manifest is a W3C Working Draft which defines a JSON-based manifest format for describing a web app. This format is already in wide use and is supported by Chrome and Opera on Android.

You should link to an app manifest from every page of your app using a manifest link relation, this tells the browser that the current page belongs to an app. 

 <head>
   <link rel="manifest" href="manifest.webmanifest">
 </head>

An example of a JSON web app manifest is shown below: 

 {
   "lang": "en",
   "name": "My App",
   "short_name": "App",
   "icons": [
     {
        "src": "/myapp/icon.png",
        "sizes": "64x64",
        "type": "image/png",
     }
   ],
   "start_url": "/myapp/index.html"
   "scope": "/myapp/",
   "display": "standalone",
   "orientation": "portrait",
   "theme_color": "blue"
 }
Retrieved from "https://wiki.mozilla.org/index.php?title=FirefoxOS/Pin_the_Web/Optimising_Content&oldid=1085844"