Super powerful apps: PWA + IoT (WoT)

Marta Wiśniewska
PWA Blog
Published in
6 min readJul 29, 2018

This article describes two technologies that significantly boosted the power of the web in the last few years. Providing Progressive Web Apps for IoT (Internet of Things) devices could be a huge step forward for real-world applications. Nowadays, web applications are not the only apps running on a desktop by a web browser. Browser-based applications should work (and look good) across all modern browsers, independently of the device (e.g., mobile, tablet as well as TV and smartwatch).

Progressive Web Apps are the way to users’ hearts

The idea of PWA is to enhance a web application progressively and give immers. Our app should be fast, user engaging and connection-independent (e.g., should works Offline). Progressive Web Apps provide a new approach for developers. The mobile-first strategy goes out of date. The progressive concept refers to taking advantages of capabilities that are available in the application environment.

PWA with example features available in the web; source: IEEE: Towards a definition of the Internet of Things (IoT)

Accessibility of the web and JavaScript are more and more. Nowadays, we can use capabilities that are not regular for web apps. New web standards and APIs allows using new features like geolocation, Bluetooth, push notifications, camera and more. Additionally, modern web browsers provide us with capabilities to connect with other devices; for instance, we can use:
-Web USB API (The WebUSB API allows Web applications to interact with the Universal Serial Bus-compatible devices available in the system),
-Web RTC API (Web Real-Time Communication is a technology which enables Web applications and sites to capture and optionally stream audio or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary),
-WEB NFC API (Near Field Communication enables wireless communication between two devices at close proximity).
These examples are pretty crucial for the Internet of Things technology.

Let’s talk about the Internet of Things
In IEEE’s report on the Internet of Things issued in March 2014 (IEEE, “Internet of Things”, 2014), IEEE described the term “ Internet of Things” as :

A network of items- each embedded with sensors- which are connected to the Internet.

The architecture of IoT is three-tiered, with the following layers: applications, networking and data communication, sensing. My concept is to use Progressive Web Apps in the “Applications” layer. The ability for PWA to be run from a uniform resource locator (URL) makes it easy to use the application on any device with a modern browser.

Three-tire architecture of IoT

IoT is an application domain that integrates different technological and social fields. The potential of IoT is enormous. IoT devices can be used in various markets, for instance: healthcare, energy, media. Because of that, there is also a need to control these devices remotely and develop apps to do this.

Markets where we can find IoT devices; source: IEEE: Towards a definition of the Internet of Things (IoT)

Let’s focus on the problems of IoT and try to find solutions with PWA. For me, essential issues are:
1) getting devices connected to the network,
2) different tools to create apps for various devices (needs the universal solution),
3) no unique and universal application protocol.

One of the fundamental features of Progressive Web App is connectivity-independence. Service worker is a kind of a web worker, that is registered with the first app running in the browser and works independently of the app. This PWA standard allows application work even in the Offline state. After successful Service Worker registration process, the app will work in the device’s web browser. Machines don’t require connectivity to the network. For example, we have an app to monitor the temperature in the home. This app should present our data even if we don’t have access to the Internet or we can’t connect to the device with the temperature sensor. PWAs allow cache and synchronize some data. If we are in the Offline state, an app will work and will return the latest cached data. That is the magic of PWA.

Is it possible to find a universal tool to develop application works across different devices? JavaScript language can be a cure to all evil for this issue. Using the same code written in JS we can create few apps on various devices. A variety of JS framework allows creating products on a mobile (e.g., Ionic framework) as well as on a desktop (e.g., Electron framework for cross-platform apps). NodeJS makes web apps more powerful. IoT loves NodeJS. The framework supports running JavaScript on a wide variety of machines. Moreover, the number of JS libraries and new tools for IoT is still growing. It makes a good stack for web developers to develop IoT apps. Nowadays, the problem of JS is access to the device (to the hardware). Emerging web standards and APIs are continually evolving but yet insufficient.

A primary need for IoT is to find a single universal application layer protocol for devices and applications to connect with each other. It doesn’t matter how they are connected. The limitation of the IoT becomes visible as soon as one wants to integrate devices from different manufacturers into a single system or application. Maybe we can use the Web itself? Let’s reuse something that is already used for building scalable and interactive applications. This is what the Web of Things is all about: reuse and leverage readily available and widely popular Web protocols, standards and blueprints to make data and services offered by objects more accessible to a larger pool of (Web) developers.

Differences between IoT and WoT; Source: Building the Web of Things: book.webofthings.io

In the Web of Things, devices and their services are fully integrated in the Web because they use the same standards and techniques as traditional Web sites. This means that you can write applications that interact with embedded devices in exactly the same way as you would interact with any other Web service that uses Web APIs.

Source: Building the Web of Things: book.webofthings.io

Summary:

  • Applying PWA to IoT devices is an immensely exciting topic. Combination of these technologies allows creating apps to connect and control various devices.
  • The Web is powerful. This technology makes developers happy because of the possibility to easy creating different kinds of app.
  • The Web of Things — a technology that needs some love and care. That could be a simple solution for lack of unique and universal application protocol in the IoT.
  • Browsers compatibility and standardization are obstacles for web developers. PWA and IoT are relatively new technologies and need time to evolve.

Extra bonus:

http://pwa-detector.firebaseapp.com — My application to detect browser compatibility for Progressive Web App (PWA) and Internet of Things (IoT) features. Developed to test browser support on different devices and browsers.

https://pwafire.org/ — an open source javascript and json bundle that allows you to convert your existing website into a progressive web app or build one in a few. I’m a part of PWAFire authors team ✌

✔Check it out!

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.

--

--