FirefoxOS, OpenWebApps and Developer Tools

FirefoxOS, OpenWebApps & Developer Tools

FirefoxOS

FirefoxOS Workshop

L'Aquila, 2013/06/21

Luca Greco <luca.greco@alcacoop.it>

a new Mobile OS powered by Web technologies

FirefoxOS https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS

Developed completely in the open

Open Photo by eelssej_

Platform Layers

FirefoxOS Layers
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture
FirefoxOS Layers
FirefoxOS Internals

Security Levels

FirefoxOS Security Levels
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model
FirefoxOS Security Levels

OpenWebApps

App Types

Webapp + manifest.webapp = OpenWebApp

Mind the Gap Photo by bowbrick

manifest.webapp

{
  "name": "MyAppName",
  "version": "1.7",
  "launch_path": "/index.html"
  "description": "...",
  "developer": {
    "name": "...",
    "url": "..."
  },
  "locales": {
    "en-US": {
      "name": "...",
      "description": "...",
    },
  },
  "default_locale": "en-US",
  "icons": {
    "128": "/style/icons/Blank.png"
  }
}

manifest.webapp

      Content-Type: application/x-web-app-manifest+json
      

Simple Python Static OpenWebapp Server

import SimpleHTTPServer
import SocketServer
­
SimpleHTTPServer.SimpleHTTPRequestHandler. \
  extensions_map['.webapp'] = \
  'application/x-web-app-manifest+json'
­
httpd = SocketServer.TCPServer(("", 3000), \
  SimpleHTTPServer.SimpleHTTPRequestHandler)
­
httpd.serve_forever()

AreWeMobileYet.com

arewemobileyet.com

manifest.webapp

- Permissions
...
"type": "privileged",
"permissions": {
  "contacts": {
    "description": "Required for ...",
    "access": "readcreate"
    },
  "alarms": {
    "description": "Required to ..."
  }
}
...

The Web is the Platform...

... and we can use all our web development tools

Web is the Platform Photo by kumar

The Web is the Platform...

  • desktop browsers web developer tools
  • javascript frameworks
  • css frameworks
  • any server side language & frameworks (hosted apps)
  • consolidated (and new web) development best practices
  • same webapp / phonegap development workflow

FirefoxOS Developer Tools

Developer Tools Photo by zzpza

FirefoxOS Simulator Addon

https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator

Features (3.0.1)

  • Installable as a Firefox Addon
  • Simplified Install / Update / Remove Hosted & Packaged Apps
  • Integrated Manifest Validation
  • Connect Remote Developer Tools
  • Integrated Push App to Device (MozHacks article)
  • Simulated Screen Orientation Lock/Unlock/Change
  • Simulated Geolocation

Features (NEXT - 4.0)

Refresh & Refresh + Clear keyboard shortcuts

Simulated Touch Events

Simulated Payments Receipts

Updated B2G & Gaia

More Issues Fixed

Current Limitations

  • Not all the new WebAPIs are fully supported/simulated
  • Not all the developer tools works as remote developer tools
  • "Remove an app" needs a simulator started (and starts it automatically)
  • "Switch Orientation" works only when screen orientation is unlocked (e.g. Browser App)
  • "Lock Orientation" doesn't support array parameters (e.g. ["portrait-primary", "landscape-primary"])
  • Not all the media codecs are available
  • Not all gaia application works correctly

Gaia Developer Profile

https://github.com/mozilla-b2g/gaia

Features

  • All firefox devtools are available:
    • e.g. WebConsole, Javascript Debugger, DOM / CSS Inspector, 3D DOM Viewer, Network Viewer

Current Limitations

  • Not intended to be used by app developer (its main target are gaia developers)
  • Needs to be run on a custom developer profile
  • Not all the media codecs are available
  • Not all the new WebAPIs are fully supported/simulated
Gaia Developer Profile
        $ git clone https://github.com/mozilla-b2g/gaia.git
        ...
        $ cd gaia
        gaia$ make DEBUG=1
        ...
        gaia$ cp -rf test_apps/template test_apps/mypackagedapp
        ­
        gaia$ edit test_apps/mypackagedapp/manifest.webapp
        ­
        gaia$ firefox -no-remote -profile ./profile
        ...
      

Marketplace Validator

Marketplace Validator

Marketplace Test Payments Generator

Marketplace Test Payments Generator

OpenWebApps

Firefox Apps

Hosted Apps

  • Hosted Apps are installable webapps
  • You already know how to develop an hosted app
  • ... then add a manifest.webapp

Hosted Apps

how to support offline mode?

  • appCache
  • indexeddb / localstorage
  • online / offline events
manifest.appcache
        CACHE MANIFEST
        # v1 2011-08-14
        ­
        CACHE:
        index.html
        cache.html
        style.css
        image1.png
        ­
        # Use from network if available
        NETWORK:
        network.html
        ­
        # Fallback content
        FALLBACK:
        / fallback.html
      

Hosted Apps

DO NOT CACHE THE MANIFESTS

eg. on Apache:
        ExpiresByType text/cache-manifest "access plus 0 seconds"
        ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
      
manifest.webapp & appcache_path
        {
          ... 
        "appcache_path": "/manifest.appcache",
          ...
        }
      

launch_path, appcache_path, icons urls

are ALWAYS RELATIVE to the app origin

Hosted Apps

1 HOSTED APP x ORIGIN

Same origin (protocol + domain + port):
        http://name.domain/folder1
        http://name.domain/folder2
      

Hosted Apps

On FirefoxOS you can use new experimental APIs:

  • webactivities
  • network information
  • vibration / webfm
  • proximity / ambient light
  • screen orientation
  • alarm
  • simple push
  • persona / webpayments

Hosted Apps

and standard ones:

  • location
  • device orientation
  • battery
  • fullscreen
  • multitouch
  • websockets
  • webgl (with care FirefoxOS)
  • webrtc (under construction on FirefoxOS)
  • ...

Hosted Apps

Restrictions

  • no privileged APIs
  • no cross domain requests (but you can use CORS)
  • same "webapp in a browser tab" constraints (mostly)
  • ... but more relaxed storage limits (appcache, indexeddb, localstorage)
MDN WebAPI
Marketplace Developer Hub & MDN App Development API reference
https://marketplace.firefox.com/developers/ https://developer.mozilla.org/en-US/docs/Web/Apps/Reference
WebActivities API
        var pick = new MozActivity({
          name: "pick",
          data: {
            type: ["image/png", "image/jpg", "image/jpeg"]
          }
        });
        ­
        pick.onsuccess = function () {
          var img = document.createElement("img");
          img.src = window.URL.createObjectURL(this.result.blob);
          var viewer = document.querySelector("#image-viewer");
          viewer.appendChild(img);
        };
        ­
        pick.onerror = function () {
          ...
        };
      
WebActivities API - check before use
        if (typeof MozActivity == "function") {
          ...
        } else {
          console.log("FALLBACK: call WebActivity 'pick image'");
          return;
        }
      

Packaged Apps

This, Jen, is the Internet!

the internet box
Photo by iamthechad

Packaged Apps

  • Server-less webapps packaged into a zip file
  • "app://" url
  • If you've used phonegap before... it's even simplier
  • Packaged apps MAY be privileged

Packaged Apps

and privileged apps can use some interesting experimental apis:

  • cross domain requests
  • tcp sockets
  • contacts
  • device storage
  • file handle
  • browser

Examples and Demos