Responsive design and progressive web apps

In late 2000’s, with the introduction of Android and iOS based smart phones, web developers and designers started to think more and more about screen sizes. Before that, of course, there were also different size displays by which users experienced the web. By vast majority those were desktop screens (most of them 17 inches) and some percentage of them were laptop displays. If you were lucky, your web site didn’t need to be modified much to look good on most screens.
With the mass adoption of smart phones everything changed. Now you have numerous screen sizes, ranging from 5 inch phones to >22 inch wide Full HD monitors. A professional looking web site needs to be pixel perfect on all of them. To ease development, the concept of responsive design came to help. Numerous CSS libraries, like Bootstrap and Foundation, were introduced to the open source world to show that you can develop web sites that look good on any screen size with relative ease.
Current date. Vast majority of users access the web with their mobile devices. Whether you are waiting for the bus, drinking coffee or taking a brake from work, it’s easy to pick up the phone and surf the web. But for the companies that are trying to get their piece of the market there is big problem: on mobile, people are used to apps, not browsing. Studies show that average users install from 0 to 1.5 apps on their phone per month. Not many users like to read news from a phone's browser. But maybe now there is a solution.
We are finally at the turning point for progressive web apps. The term was introduced in 2015 by Frances Berriman and Google Chrome engineer Alex Russell. With this, they wanted to describe the process of taking advantage of new features in web browsers and the operating system in mobile devices. In one sentence, this means that you can make your web site interact as if it were a mobile app, but without a trouble of installing it as you would a native app. This Google duo described the characteristics that a progressive web app needs to fulfill like so:

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

On computer devices, a web site would appear as SPA (Single Page Application - most of the PWA are based on SPA architecture). In a real life example, this means that you would visit a web site, you would then be given the option to use that web site as PWA with a single click of a button. If you choose that, you would be given a shortcut with a link to the web site on the home screen of your device. In the background, using the services, the web site would be installed similarly to a native app. After the install, you would have the option of using the web site (with all of the site's services) even in the conditions of bad or no signal at all. Uninstalling of the PWA app would be done with a simple shortcut delete.
Frontend technologies and trends are changing on a daily basis. Just look at the number of JS frameworks appearing and the new things each of them is bringing. Every now and then, the potential of some of those technologies is recognized by many, and it goes on to take part in mainstream development. One of those is the concept of progressive web applications. It brings together laptops, desktops, smart TVs and mobile devices. It could shorten the developing time for apps intended to be used on all of these platforms. And time equals money. We just need to wait a little, to see how PWAs would evolve and would they take, now that they have their foot in the ground.

Slobodan Prodanović

back to top