Unit 6

How progressive web apps are transforming development for web and mobile

None

Remember the early days of web applications? Or the clunky attempts to deliver business functionality via web pages. From an IT Operations perspective they were great, no more installation and patching of ‘fat client’ applications. Everything residing on a server. Upgrades and support were now so much easier. But the user experience was mostly appalling. Roll forward 20 years - Ajax, CSS, and enhanced HTML versions have all moved things forward. Then came JavaScript running in the browser – JQuery enabled modals, date pickers, grids and all sorts of other web application eye candy. But the mix of browser and server side code was becoming more and more complicated. A new architecture paradigm was needed, enter the single-page application: 

According to Wikipedia – “A Single-Page Application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application. In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.”

This led to a redrawing of the web application landscape. An SPA moved logic from the server to the client. This resulted in the role of the web server evolving into a pure data API or web service. Increasingly these APIs and Services (or micro-services) were accessed via HTML/JavaScript applications developed using client side JavaScript frameworks, such as AngularJS, Ember.js, Meteor.js, and React JS.

And so to the next step towards the ultimate in web and mobile application user experience - Progress Web Apps (PWAs).
So what are Progressive Web Apps?

Progressive Web Apps implement user experiences that have the reach of the web, and are:

  • Reliable - Load instantly and never show refresh errors, even in uncertain network conditions.
  • Fast - Respond quickly to user interactions with smooth animations and scrolling.
  • Engaging - Feel like a natural app on the device, with an immersive user experience.

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell used the term "progressive web apps" to describe apps taking advantage of new features supported by modern browsers, including service workers and web app manifests. 

According to Google Developers the characteristics of PWAs are:

  • Progressive - Work for every user, regardless of browser choice
  • Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge
  • Connectivity independent - Service workers allow work offline, or on low quality networks
  • App-like - Feel like an app to the user with app-style interactions and navigation
  • Fresh - Always up-to-date thanks to the service worker update process
  • Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with
  • Discoverable - Are identifiable as “applications” thanks to W3C manifest and service worker registration scope allowing search engines to find them
  • Re-engageable - Make re-engagement easy through features like push notifications
  • Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store
  • Linkable - Easily shared via a URL and do not require complex installation

In summary a Progressive Web App uses modern web capabilities to deliver an app-like user experience. 

Some of the core concepts of Progressive Web Apps are Service Workers and Web App Manifests.

Service Workers

Service Workers are a key technology behind a Progressive Web App. They power offline functionality, push notifications, background content updating, content caching, and much more. Service Workers are essentially a JavaScript file, running in the background responding to events.

A Service Worker is a worker script that sits behind the scenes, running in response to events like network requests, push notifications, and connectivity changes. Service Workers are complicated, so starting with standard templates is a good approach for developers to implement common service worker use cases, such as offline mode.


Web App Manifest

The Web App Manifest allows control of how apps appear and how they are launched. Home screen icons, the page to load when the app is launched, screen orientation can all be specified via a simple JSON file.


Conclusion

Within a short time Progressive Web Apps have yet again shifted the perceived wisdom on how to deliver the most engaging customer experience across web and mobile devices. PWAs are the next evolutionary step from the Single-Page Application approach and leading front end web development frameworks, such as Angular and React, are rapidly implementing PWA features. Alongside technologies such as React Native, PWAs are driving the convergence of web and mobile app development whilst simultaneously delivering the next level in truly immersive and responsive user experience.

Unit 6 implement the latest architectures and technologies to deliver engaging customer experiences across web and mobile platforms.