Now is the time to brush up your web products

Making your HTML5 efforts worthwhile

firefox phone

Promises, promises…

Sea Monkeys

That's how I feel about HTML5…

iPhone without an SDK

Jobs' original vision - no third party native apps

A failed extension of our reach…

WTF mobile web

http://wtfmobileweb.com/

What happened?

questioning fox

We have incredible tooling…

Firefox devtools

Giving us detailed control…

Requestanimationframe

Browsers are friggin awesome…

Browser ponies

And yet we get…

Terrible mobile login interface

Blinded by products…

windows95

A new beginning…

Firefox OS

Upgrading the mobile world

Nokia couldn't take photos
  • Targeted at new, emerging markets
  • Very affordable hardware
  • No credit card needed - client billing
  • Web technologies through and through
  • 18 mobile partners, 4 hardware partners

Find app by content

The search interface of Firefox OS

Defined by manifest

        {
          "name": "My App",
          "description": "My elevator pitch goes here",
          "launch_path": "/",
          "icons": { "128": "/img/icon-128.png" },
          "developer": {
            "name": "Your name or organization",
            "url": "http://your-homepage-here.org"
          }
        }
      

App manifest

Three levels of access…

  • Hosted apps - stored on your server, easy to upgrade, limited access.
  • Privileged apps - reviewed by the App store, uses a Content Security Policy, hosted on trusted server
  • Certified apps - part of the OS, only by Mozilla and partners

App permissions

Web APIs (hosted apps)

  • Vibration API
  • Screen Orientation
  • Geolocation API
  • Mouse Lock API
  • Open WebApps
  • Network Information API
  • Battery Status API
  • Alarm API
  • Push Notifications API
  • WebFM API / FMRadio
  • WebPayment
  • IndexedDB
  • Ambient light sensor
  • Proximity sensor
  • Notification

Using WebAPIs to make the web layer more capable

Install apps from the web

        var installapp = navigator.mozApps.install(manifestURL);
        installapp.onsuccess = function(data) {
          // App is installed
        };
        installapp.onerror = function() {
         // App wasn't installed, info is in 
         // installapp.error.name
        };
        

Battery API

          var b = navigator.battery;
          if (b) {
            var level = Math.round(b.level * 100) + "%",
                charging = (b.charging) ? "" : "not ",
                chargeTime = parseInt(b.chargingTime / 60, 10),
                dischargeTime = parseInt(b.dischargingTime/60,10);
            b.addEventListener("levelchange", show);
            b.addEventListener("chargingchange", show);
            b.addEventListener("chargingtimechange", show);
            b.addEventListener("dischargingtimechange", show);
          }
        

Web APIs (privileged apps)

  • Device Storage API
  • Browser API
  • TCP Socket API
  • Contacts API
  • systemXHR

Using WebAPIs to make the web layer more capable

Contacts API

          var contact = new mozContact();
          contact.init({name: "Christian"});
          var request = navigator.mozContacts.save(contact);
          request.onsuccess = function() {
            // contact generated
          };
          request.onerror = function() {
            // contact generation failed
          };
        

Web APIs (certified apps)

  • WebTelephony
  • WebSMS
  • Idle API
  • Settings API
  • Power Management API
  • Mobile Connection API
  • WiFi Information API
  • WebBluetooth
  • Permissions API
  • Network Stats API
  • Camera API
  • Time/Clock API
  • Attention screen
  • Voicemail

Using WebAPIs to make the web layer more capable

Why not all for hosted apps?

Pouting dog

Giving control to the user

Pick activity

Web Activities

  • configure
  • costcontrol
  • dial
  • open
  • pick
  • record
  • save-bookmark
  • share
  • view
  • new, f.e type: “websms/sms” or “webcontacts/contact”

https://wiki.mozilla.org/WebAPI/WebActivities

Sending a number to the phone

        var call = new MozActivity({
          name: "dial",
          data: {
            number: "+1804100100"
          }
        });
      

Get an image from the phone (1/2)

        var getphoto = new MozActivity({
          name: "pick",
          data: {
            type: ["image/png", "image/jpg", "image/jpeg"]
          }
        });
      

Get an image from the phone (2/2)

        getphoto.onsuccess = function () {
          var img = document.createElement("img");
          if (this.result.blob.type.indexOf("image") != -1) {
            img.src = window.URL.createObjectURL(this.result.blob);
          }
        };
        getphoto.onerror = function () { // error
        };
      

Activities/Hosted Apps on Android

Foxkeh loves android

You want some of that?

Pawing Puppy

Developer Hub

Developer Hub

Firefox OS Developer Hub

Simulator in the browser

Simulator

Firefox OS Simulator 1.0 is here!

Firefox OS Boilerplate

Boilerplate App

Boilerplate App on GitHub

Phones for developers

Geeksphone

Geeksphone.com

Re-use and level up!

Nokia couldn't take photos
  • A whole new audience
  • HTML5 without the lock-out
  • Your web site is your ad!
  • Minimal extra work, it works across platforms

Thanks!

that's all firefox