Web Bluetooth is ready!

and it's....

Jen Looper

Senior Developer Advocate, Progress
@jenlooper

What is this even

Web Bluetooth is a new API provided to allow interacting with devices from the web

so?

IoT + web = 💓

use beacons with NO mobile app install

I 💓 beacons!

awesome use case:

Dharavi Slum beacon project

Evolution of beacon tech

iBeacons

You need an iOS mobile app

Evolution of beacon tech

Eddystone

You can use iOS, Android with or without a mobile app

Evolution of beacon tech

Physical Web

You need to manually enable it on mobile device*

*but it works on iOS!

Physical Web consumes Eddystone-emitted Urls*

*and that's it!

Evolution of beacon tech

Web Bluetooth

You need to be on Chrome

Failover to Physical Web on iOS

How to: enable the Physical Web on iOS

Enable bluetooth, get Chrome app, swipe down, enable Today Widgets

How to: enable the Physical Web on Android

Enable Bluetooth +  'Settings > Google > Nearby'

🙄​

Use web bluetooth to smooth the beacon onboarding process

Use web bluetooth to interact with ALL bluetooth-emitting devices

Use cases

connect smart kitchen scale to recipe web site to ensure precise measurements

Use cases

connect smart jewelry to web browser to receive reminders

My use case

connect web site to connected beacons to enhance a historical visit!

hint ☝️

Web Bluetooth brings a lot to the table!

• Open a web site
• Press a button, interact with a beacon proactively
• Create a more cohesive, interactive experience than basic Physical Web URL push
• YOU CAN DO MORE

Web Bluetooth API

"Allows web sites to communicate over GATT with nearby user-selected Bluetooth devices in a secure and privacy-preserving way."

terminology

BLE: Bluetooth Low Energy

Bluetooth low energy (LE) is the version of Bluetooth that was built for the Internet of Things (IoT).

terminology

GATT: Generic ATTributes

The Generic Attributes (GATT) protocol defines the way that two BLE devices transfer data back and forth.

The GATT Data Structure

GATT Characteristics

GATT Declarations

GATT Descriptors

GATT Services

bluetooth devices can tell you a lot about your surroundings

caveat emptor

Let's build anyway!

🤷

#yolo

Giant 1: Uri Shaked

Giant 2: Wassim Chegham

The magic tool

ng-beacon

a super-beacon!

• supports iBeacon
• supports Eddystone / emits Physical Web URLs
• supports web bluetooth
• on/off switch to preserve coin battery
• some with LED and temp/humidity sensor
• "full-stack JavaScript" beacons!
  • JS library 'Espruino' embedded
  • comes with admin app to fork
• handcrafted by Uri

web site connection via Wassim

• angular/web-bluetooth library
• consume all the GATT characteristics
• connect to your devices w/in Angular app
• easy config with Angular CLI

https://github.com/manekinekko/angular-web-bluetooth

Task:

• build a website to enhance a place
• configure a fleet of ng-beacons to activate a web page on user approach
• needs to work on iOS and Android
• Physical Web + Web Bluetooth

Inspiration 👎:

Inspiration 👍:

Locale:

The Battle Road

Lexington, Massachusetts

A day in Lexington!

Tools

• Bootstrap (styling)
• Angular CLI (site building)
• Firebase database (content and checkins)
• Firebase hosting (https)
• Kendo UI charts (showing checkins)
• Beacon admin tool

tools: bootstrap

tools: Angular CLI

tools: Firebase database + AngularFire library

tools: Firebase hosting (https)

tools: Kendo UI Charts

tools: Beacon admin

connect your beacons to website routes*

*use https and bit.ly shorteners!

code walkthrough

1. Listen for beacon signals

ngOnInit(){
    this.getDeviceStatus();
    this.items = this.db.list('/Locales');
    //sanitize images
    this.items.subscribe(queriedItems => {
        for (let prop in queriedItems){
              this.cleanedImage = this.sanitizer.bypassSecurityTrustUrl(queriedItems[prop].Image);
              queriedItems[prop].Image = this.cleanedImage.changingThisBreaksApplicationSecurity;
        }  
    });
}

code walkthrough

2. Connect to a beacon via service

connect() {
    return this.ble
      .discover$({ filters: [{ services: [BleUartService.UART_SERVICE] }] })
      .mergeMap(gatt => {
        this.gatt = gatt;
        return this.ble.getPrimaryService$(gatt, BleUartService.UART_SERVICE);
      })
      .mergeMap(primaryService => this.connectRxTx(primaryService));
  }

code walkthrough

3. get info back from beacon, navigate

getDeviceStatus() {
      this._beaconService.getDevice().subscribe(
        (device) => {
          if(device) {
            //get the beacon's name
            this.router.navigate(['/locale',device.name]);
            this.device = device;
          }
          else {
            // device not connected or disconnected
            this.device = null;
          }
        }
      );
    }    

Demo!

Prize!

Questions?

@jenlooper