PhxMobi Festival

Luis Montes

@MONTESLU

YAY Apps!

But Javascript !?!

ES2015 (ES6),

or Typescript,

or CoffeeScript,

or Emscripten,

or one of many, many others...

185,572 reasons why

but I still need native apps

For Gaming!

Web GL ?

Unreal Engine 4

Three.js

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75,
    window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );
					

but I still need native apps

For the Camera!

Web RTC

Camera and Mic

navigator.getUserMedia(constraints, successCallback, errorCallback);
					

function success(stream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(stream);
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
}
					

RTC Peer Connections

Peer to Peer Data Channel

How about:

• GPS data
• Accelerometers
• High performance Audio

Yup:

navigator.geolocation.getCurrentPosition(myCallback);
					

window.addEventListener("deviceorientation", handleOrientation, true);
					

var myContext = new AudioContext();
					

but the web couldn't possibly :

BLE Devices:

• Advertising packet
• Services
• Characterisics
• Descriptors

Node.js:

Browser behind a flag:

navigator.bluetooth;
					

Chromebots Browserbots

Acting like an app.

Step 1: Be "Installable"

manifest.json

{
  "short_name": "Luis's Amaze App",
  "name": "Luis's magic unicorn app.",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    ...
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}
					

Step 2: Work offline

Step 2.1: HTTPS Only

Register ServiceWorker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('myServiceWorker.js')
  .then(function(reg) {
    console.log('Yey serivceworker!', reg);

  }).catch(function(err) {
    console.log('Boo no serviceWorker!', err);
  });
}
					

myServiceWorker.js

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('static-v1')
    .then(function(cache) {
      return cache.addAll([
        '/',
        '/myScript.js',
        '/css/styles.css',
        new Request('//storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css', {mode: 'no-cors'})
      ]);
    })
  );
});
					

handling fetches

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});
					

debugging:

Demo Time!

Step 3: Cloud Messaging

update manifest

"gcm_sender_id": "123456789012",
"gcm_user_visible_only": true
				

update client registraion

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('myServiceWorker.js')
  .then(function(registration) {
		return registration.pushManager.subscribe({userVisibleOnly: true});
  })
  .then(function(subscription){
		isPushEnabled = true;
		sendSubscriptionToServer(subscription);
	});
}
				

push event in ServiceWorker

self.addEventListener('push', function(event) {
  var title = 'Yay a message.';
  var body = 'We have received a push message.';
  var icon = '/images/icon-192x192.png';
  var tag = 'simple-push-demo-notification-tag';

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag
    })
  );
});
				

Messaging Demo

Bridging Communication

• A page can postMessage() to the ServiceWorker
• The ServiceWorker can message its page
• Another client or IoT cloud can post to the ServiceWorker

Thank You!

Luis Montes

@MONTESLU