Progressive Web Apps (aka PWAs): how to use them for a better user experience

Progressive Web App (PWA) is a term coined by Google to refer to web applications that, when opened by smartphone browsers, behave similarly to apps that can be downloaded from stores. Progressive Web Apps are thus a hybrid between regular web applications (or websites) and native applications.

This is, technically, the description of PWA. Well, I realize that this definition might seem a bit vague or even controversial to a web neophyte. Fear not: in this article I will try to explain to you as simply as possible what PWAs are and why they can be an attractive opportunity for your site. Let’s go.

What are Progressive Web Apps?
A PWA is a web application (a browser-navigable site) that behaves like a cloud-managed native application, that is, like a downloadable app that can be installed on your phone’s home screen.

To better explain how PWAs work, I want to tell you a personal anecdote. Just a few days ago I had to fulfill one of the main tasks of a son towards his parents: configuring my mother’s new smartphone. She wished to have “Iliad’s app” on the new smartphone to control her massive traffic. To my surprise, I noticed that no official app of the phone company was available on the Play Store, although she was sure she had seen it on the home page of a friend’s phone. Trying to look up information on the official site, I discovered that Iliad has never developed a proprietary mobile app, but rather has made the private area of its site a PWA, thus keeping the user experience unchanged.

Another example: have you ever, while browsing a site, been prompted by the browser to “Add to home screen?” There, in that case you were visiting a site that was developed to have a PWA version.
By giving consent to this notification, the logo of the site you were visiting will be added to your smartphone’s home screen along with the other apps you downloaded from the Play Store or App Store.

progressive web app

The merit of PWAs is to bridge the gap between browsers and native apps. Sites have always sought to achieve reliability performance on par with native apps and to gain a place in the notification bar and home screen of users’ smartphones. PWA provides a number of additional features over and above a normal site, made available by the use of the “Service Worker,” a script that sits between the server and the browser, adding a new level of background functionality.

The most interesting features introduced by a PWA
In my opinion, the most interesting features introduced by a PWA are:

  • Ability to add the icon of one’s own site/web app to the home of the phone, which can be reached in this way through a “shortcut” that does not require opening the browser or classic search via search engine.
  • Sending push notifications. This is one of the features that I find most useful: the ability to notify your users of the release of a new article on your blog or the renewed availability of a much-needed product from your e-commerce that had been discontinued.
  • Fruibility in offline mode thanks to the pre-memorization of resources in the client cache (i.e., your smartphone). In fact, the Service Worker decides how to respond to requests from the app by choosing whether to download a resource from the web or retrieve a previously downloaded version.
  • Automatic updates without the user having to take any action.
  • Linkability and indexing. As with any site, PWAs have URLs and can therefore be processed by crawlers and indexed by search engines. Unlike native apps, users can find PWA pages directly in Google SERPs. The user acquisition cost will therefore be lower than that of native apps
  • Reduction of steps between discovering an app and loading it on the home screen, thus eliminating friction for installation.
  • Store independence. Unlike native apps, which must meet the often stringent requirements of stores in order to be published, PWAs provide greater freedom in development.

How to ensure reliable speed and performance from the first load?
The question arises. Well, this is where PWAs meet Accelerated Mobile Pages, or AMPs.
The technology leveraged by AMP is based on an Open Source project by Google. AMP pages are nothing more than pages composed of the same elements as all traditional pages, but which respect certain restrictions given by the use of specific development rules and tags. Basically, all those elements that “slow down” the site are eliminated, allowing a significant reduction in the weight of a page and its loading time.

Google integrated AMP into its mobile search results in 2016, and pages that use AMP enjoy an inherent priority in search results, being marked with the “AMP” badge. Sites using the combination of AMP and Service Worker will provide reliable speed comparable to native apps. Once the page is loaded (quickly), the site, thanks to the intervention of the service worker, caches the resources.

In conclusion, we can summarize as follows: PWA technology, through the features provided, enriches user experience and engagement; while AMP technology, through the improvement in performance, increases acquisition.

In addition, upload performance also greatly impacts positioning. As we mentioned, PWAs can be indexed by the search engine and help your brand appear more prominently in organic search results.

Performance progressive web app

The Case Study of RCS MediaGroup
RCS MediaGroup is to date one of Europe’s leading multimedia groups: it publishes newspapers, magazines and online content mainly in Italy and Spain. Newspapers published include Il Corriere della Sera, La Gazzetta dello Sport and El Mundo,while magazines include Oggi, Amica, Io Donna, Living, Style, Dove, Abitare, Sette and Sport Week.

RCS MediaGroup’s technical team had long ago identified AMP as the technology to keep up with the mobile sector. Reporting the words of Michela Colamussi, head of Digital at Corriere della Sera, “The decision to develop in AMP came as a natural shift to the latest developments in the sector, given the growing number of readers accessing from mobile devices.”

The company soon began using PWA technology as well, mainly for notifications, bookmarking, and offline access. RCS MediaGroup now uses AMP technology on all of its main online titles, including Corriere.it and Gazzetta.it.

The company quickly achieved remarkable results: unique users grew by 98 percent, month after month, with +119 percent in page views. In addition, loading times were 72% faster on AMP-optimized pages than on the traditional site.

rcs media group performance app

PWA: the next big thing?
We cannot yet say that PWA technology will supplant native apps in the future. One limitation of PWAs, for example, is the inability to access system resources and communicate with other native apps installed on the phone. In case these were basic requirements for one’s app to work, PWA would not be a viable avenue.

However, 5 years after their inception, interest in this approach to app development continues to grow, particularly for blogs, e-commerce, and service apps for which a PWA may prove to be the winning choice.

Leave a Reply

Your email address will not be published. Required fields are marked *