Frances Berriman and Alex Russell were the first to come up with the concept of ‘progressive Web apps’. ‘Service worker’, ‘manifest’, ‘Web push’, and ‘add to the home screen’ were the first components of the PWA technological stack. The PWA is accessed and installed on devices using Web browsers. On smartphones, the prompts for PWAs are safer and more engaging. PWAs are being extended to the Internet of Things through the progressive Web of things. This article outlines a few design concerns with respect to the progressive Web of things.
Native applications for mobile devices are costly and time consuming to develop. A progressive Web app (PWA) has a responsive design. PWAs are popular among enterprises because they are simple to create and deploy. A native app can be used to access a PWA based Web application. The PWA icon can be found on the device’s home screen. It starts loading immediately, regardless of the state of the network. The app’s offline functionality and behaviour can be defined at the design and development stage. You can run the app without using a browser. TLS connections are used to secure these apps. Service workers and a Web app manifest are used in PWAs. The manifest will have a name, short_name, start_url, icon, and display.
The responsive design of a PWA must account for form factors, screen sizes and mobile compatibility. To target tap, the design must take into account the correct viewport specification. On a standard device, the typical response time is roughly 5 seconds. After the service worker is installed, the response time improves. It is possible for the response time to be less than 2 seconds.
“PWAs are the future and working together on standards will make this easier, faster and less expensive in the future.”
—Eric Erway, Magento product manager
Visual transitions, fluid animations and user experience must all be considered in responsive design. Offline state management and behaviour must be considered during the design process. The offline behaviour of a PWA can be similar to that of a native app. Push alerts and background sync are two other characteristics that must be considered. A responsive design framework must use pre-cache and lazy loading to ensure rapid loading.
Progressive Web of things
The progressive Web of things is designed to allow IoT protocols to connect to devices. Browsers can execute these programs, and are capable of displaying these apps on any device. Mobile phones, desktop computers, laptop computers, televisions and smartwatches are all examples of devices. Geolocation, Bluetooth, push notifications, camera, and NFC are all elements of HTML5 Web APIs. For the progressive Web of things, APIs linked to Web USB, WebRTC and Web NFC are critical. Web RTC is a technology that allows video and audio to be streamed between two devices.
“With PWA studio, merchants can deliver app-like mobile commerce that is fast, integrated and reliable. These experiences are proven to improve SEO and to drive 50 per cent higher conversion rates, and 50 per cent better page performance on average.”
— Magento executive
Application, networking, data transmission, and sensing are all layers in a typical IoT architecture. PWA apps are in the application layer and use the data communication and sensing layers to provide functionality. The energy, media, healthcare, and telecom industries all use these applications. Progressive Web apps can help with remote device administration, which is an important feature.
Device connection, varied technology stacks, and many application protocols are all issues with progressive Web of things apps. Smart home apps use pre-caching and data sync features to provide data. These apps can work without a network connection, but they require it to access real-time data.
Ionic framework, electron framework, Node.JS, and other JavaScript frameworks are used to create progressive Web of things apps. The sensing layer of the IoT architecture contains IoT sensors and actuators. The networking layers include routers and gateways.
Discoverability of the progressive Web of things
Devices may be accessed using the progressive Web of things application via HTTP and Web sockets. These programs address design elements such as the device’s URL/resources, payload information, request semantics and responses.
W3C manifests and service worker registration can be used to find the devices. The devices can also be found via search engines. The resources will be linked from the websites.
The discovery component of the Web of Things design ensures interoperability. This component component aids in the discovery of gadgets. Metadata can be shared across devices to aid in discovery. URL, name, current location, and status are all part of the metadata. Sensors, actuators, commands, and attributes are all part of the device sensing metadata. mDNS, lightweight data models, Web item models, and JSON-LD are some of the network discovery protocols used for device discovery.
Security and IoT safety
Security is a major design consideration. With the Internet of Things and PWA apps, a connected world opens up a slew of possibilities. The main concern is security. Credit cards, personal information, sensitive information, and passwords are all security concerns. If these issues emerge from a PWA website, trust will be lost. Device security is critical in the progressive Web of things to ensure spam messages are not delivered.
Attacks on the Internet of Things are prevalent and harmful. Information regarding a person’s running time, medicines taken and other personal details is sensitive. Security is an issue for automobiles when it comes to physical devices. Clear text passwords, faulty certificates, outdated program versions, and other flaws might all be a problem.
For secrecy, integrity, and identity, Web content on the progressive Web of things must be safeguarded. If the website is collecting private and sensitive information about the user, it must be secure. Snooping, denial of service, phishing, and security breaches are all possibilities.
HTTPS helps to secure the website while having no effect on its performance. HTTP/2 is significantly quicker than HTTP. HTTP/2 is used by HTTPS-enabled websites. If the PWA website is not secure, some browsers may issue a warning. This is one of the reasons why the progressive Web of things should be HTTPS enabled.
Performance
The user experience and performance of a progressive Web of things app must be improved. Responsive design makes it easier to work with a variety of devices and form factors. Service workers are used to address offline conditions.
PWA navigations and interactions can be used to provide an app-like experience. Real-time data can be viewed if the service worker update process is applied to the PWA app. The TLS protocol is employed to avoid security breaches. A progressive Web of things can be discovered if the apps use manifests and service worker registration. Push notifications can be used to increase user engagement. The progressive Web of things app must be built with a fast response time in mind. With brief browser prompts, it can be put on the home screen. The online apps require no installation, have no friction, and can be shared.
Smooth execution of progressive Web of things
A responsive and interactive progressive Web of things is the need of the hour. Smooth interactions and animations are a must. The user’s response and feedback should be instantaneous. Scrolling should be silky smooth.
“Microinteractions are contained product moments that revolve around a single use case — they have one main task.”
—Dan Saffer, director of product design, Flipboard
Device connection, varied technology stacks, and many application protocols are all issues with progressive Web of things apps. Smart home apps use pre-cache and data sync features to provide data. These apps can work without a network connection, but they require it to access real-time data.
User interfaces for the Web of things can now be created using new platforms. The metadata information serves as the platform’s input. Real-time attributes and Web thing instructions make up metadata. The Web thing paradigm aids in the user interface’s connection to the Web of things. The device can be controlled and events can be observed in real-time after the binding is completed.
Reliability of the progressive Web of things architecture
Reliability is another crucial design consideration in progressive Web of things. PWAs must provide a seamless user experience with no interruptions. Network or device dependability might create interruptions. The user experience must be responsive, and the user must be able to obtain the necessary information.
The progressive Web of things has a bright future, thanks to 5G’s strong dependability standards. If the progressive Web app is well-designed, it can be used offline. PWA service workers can assist in storing data in the cache. The data storage needs to be addressed in the design. Data might be kept in the service cache layer or the local device store.
For instance, in a hotel, progressive Web of things applications are developed to monitor the devices in the rooms. The devices could be hotel room appliances. The idea is to keep track of the devices in different rooms from afar. The individual doing the monitoring could be in a variety of locations. It may even be a hotel guest who wishes to control the electronics in his room.
Another component of hotel room surveillance is security. Rooms, floors, lifts, and pedestrian pathways are all monitored by security cameras. For remote device monitoring, the network’s dependability is critical.
Meaningful design
You must consider the significance of the progressive Web of things’ design. The user experiences must add value. User requirements must be addressed in the user interface. The user experience must be seamless, secure, performant, fast, and dependable. Apps for the progressive Internet of Things must be responsive and discoverable.
Now let us look at the different tools for testing the progressive Web of things.
PWA Detector is a tool for evaluating the properties of the progressive Web of things.
PWA Fire is a tool for transforming a website into a progressive Web app (PWA).
What’s next?
We have looked at a variety of progressive Web of things design issues. Security, meaningful design, reliability, easy execution, and performance were all discussed in depth for PWA and PWT. The integration of IoT, intelligent services, and other technologies will be the next hurdle in the creation of a progressive network of things. Through the steps of data, information, knowledge, and services, the goal is to go from a progressive Web of things to intelligence. Sensors and devices attached to network routers, computers, assets, and storage systems can provide data. Knowledge as a service will be the way of the future, based on data from IoT sensors and gadgets.
