Building a Web Bluetooth Progressive Web App

A few months ago I started looking around the internet for weird and wonderful Bluetooth Low Energy devices that I could incorporate into my Getting Physical with Web Bluetooth in the Browser talk; suffice to say, there are quite a few. Long story short, Barry Byford pointed me towards a company called Novalia.

Utilising Novalia's technology, you can create an interactive experience using paper; and more specifically for me, you can utilise BLE. It has now been just under a year since the post that brought a BB-8 to life using the power of Web Bluetooth and Web Audio using ChromeOS. Since then, I've learnt more about Bluetooth Low Energy and the Physical Web.

PWA

Progressive Web Apps are the new standard of web app and something all web developers should be striving for. If you haven't heard of the term PWA or Progressive Web App then get ready to hear it some more, and then some more and then some more again; it is the new benchmark for Web Apps and not just mobile ones at that.

So Nimble Ape set out to help show Novalia the power of the Web and its new technologies, specifically PWAs and Web Bluetooth.

The key thing with the Novalia PWA was that a PWA allowed us to create an application that worked the same as a native application. Once a user had been to the website, they could be offline with no internet connectivity, LieFi as Jake Archibald would put it, or they could just have Airplane mode turned on and still be able to connect to a Novalia Audio Poster, just the same as the native apps Novalia had already created.

Utilising Progressive Web App techniques, the Physical Web and Web Bluetooth (and some magic from Chrome Canary), we get an awesome user experience from this BLE Poster.

Polymer & Web Bluetooth

This PWA is built using the Polymer CLI tool, which constructs the basis of your Web App and allows us to use Polymer components - a really nice and quick way to create a Web App utilising already created Components; in this case, the Polymer Paper Elements, but there are a load out there already!

Once we had the base web app setup, we used the Web Bluetooth Generator from Francois Beaufort at Google to create a JavaScript class for connecting to Novalia's Audio Poster. With less than 30 lines of code, it was dealing with translating Bluetooth Characteristic values to which sound to play and adding the right classes to elements to show and hide them based on the connected state of the poster.

And that's it, we were done.

The only thing remaining was to test it against Lighthouse; a tool for testing how well Progressive Web Apps perform in certain situations. With little to no effort from us, it scored 99 out of 100 - its missing H2 and a few other optimisations that we didn't get to. This is a really simple app that does barely anything - hence the great score with little effort.

With that, we had a device that emitted a Physical Web Eddystone URL, that took us to https://novalia.nimbleape.xyz when pressed, which opened up the installed PWA, and interacted with the device using Web Bluetooth.

Pretty cool huh?

You can take a look at all of the code for this demo on GitHub.

Confused by the Physical Web or by Progressive Web Apps? Check out our upcoming posts about both of them in modern day app development - coming soon.