In the late 2000s, 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 a vast majority, those were desktop screens (most of them 17 inches) and some percentage of them were laptop displays. If you were lucky, your website didn’t need to be modified much to look good on most screens.
With the mass adoption of smartphones, everything changed.
Now you have numerous screen sizes, ranging from 5-inch phones to >22 inch wide Full HD monitors. A professional-looking Website 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 websites that look good on any screen size with relative ease.
Current date. The vast majority of users access the Web with their mobile devices. Whether you are waiting for the bus, drinking coffee, or taking a break 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 a 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 phones 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 Website interact as if it`s a Mobile App, but without the 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:
- Progressive - Work for every user, regardless of browser choice because they are built with progressive enhancement as a core tenet;
- 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 manifests[6] 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.
On computer devices, a Website 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 Website, you would then be given the option to use that Website as PWA with a single click of a button. If you choose that, you would be given a shortcut with a link to the Website on the home screen of your device. In the background, using the services, the Website would be installed similarly to a native App. After the install, you would have the option of using the Website (with all of the site's services) even in the conditions of bad or no signal at all. Uninstalling the PWA App would be done with a simple shortcut delete.
Frontend technologies and trends are changing daily. Just look at the number of JS frameworks appearing and the new things each of them is bringing. 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 for a little, to see how PWAs would evolve, now that they have their foot in the ground.
Slobodan Prodanović