We live in an increasingly fast, dynamic, ever-changing world. The incremental innovations that have an impact on people follow one another, with an increasingly clear focus on:
- performance, think of the increasingly powerful devices we use every day or the tasks that allow us to do more quickly;
- experience, to eliminate any friction in the use of software/hardware;
- intelligence, with algorithms that now work in a predictive perspective.
It is in this direction, focusing primarily on performance and User Experience for the end user, which goes the Progressive Web App (PWA) development, a solution that wants to combine the best of native apps and Web technology.
What are the Progressive Web App (PWA)?
A Progressive Web App (PWA) is an app that uses modern Web capabilities to offer users a very similar (if not better) experience to a native app.
Unlike traditional apps, progressive web apps are a hybrid between regular web pages and mobile applications. The term “progressive” refers to the fact that they introduce new features and, from the user experience’s point of view, they are initially perceived as normal websites but progressively behave more like mobile apps, among other things multiplatform.
Pros and cons of the Progressive Web App
The main features are:
- Progressive — They work for every user, regardless of the browser chosen because they are built at the base with progressive improvement principles.
- Responsive — They adapt to the various screen sizes: desktop, mobile, tablet, or dimensions that can later become available.
- App-like — They behave with the user as if they were native apps, in terms of interaction and navigation.
- Updated — Information is always up-to-date thanks to the data update process offered by service workers.
- Secure — Exposed over HTTPS protocol to prevent the connection from displaying information or altering the contents.
- Searchable — They are identified as “applications” and are indexed by search engines.
- Reactivable — Make it easy to reactivate the application thanks to capabilities such as web notifications.
- Installable — They allow the user to “save” the apps that he considers most useful with the corresponding icon on the screen of his mobile terminal (home screen) without having to face all the steps and problems related to the use of the app store.
- Linkable — Easily shared via URL without complex installations.
- Offline — Once more it is about putting the user before everything, avoiding the usual error message in case of weak or no connection. The PWA are based on two particularities: first of all the ‘skeleton’ of the app, which recalls the page structure, even if its contents do not respond and its elements include the header, the page layout, as well as an illustration that signals that the page is loading.
Weaknesses refer to:
- iOS support from version 11.3 onwards;
- greater use of the device battery;
- not all devices support the full range of PWA features (same speech for iOS and Android operating systems);
- it is not possible to establish a strong re-engagement for iOS users (URL scheme, standard web notifications);
- support for offline execution is however limited;
- lack of presence on the stores (there is no possibility to acquire traffic from that channel);
- there is no “body” of control (like the stores) and an approval process;
- limited access to some hardware components of the devices;
- little flexibility regarding “special” content for users (eg loyalty programs, loyalty, etc.).
The importance of Manifest and Service Workers
The new features of modern browsers that allow PWAs to offer the best are “manifest” and “service workers”.
Manifest
It is a simple JSON file that defines the basic parameters of PWA, to control how the app should appear to the user and define its appearance at launch: icons, other basic features such as colors, fonts, screen orientation and possibility of being installed on the home screen.
Service workers
They are the real key to the advanced experiences that a PWA can offer. A service worker is a script that the browser runs in the background, separated from a web page, to use functions that do not require a web page or user interaction.
Today, SWs already include features such as push notifications and background synchronization. In the future they will support functions such as periodic synchronization or geofencing. The main function is the ability to intercept and manage network requests, including programmatic management of a cache of responses. It is an API that supports offline experiences by giving developers complete control of the experience.
With the addition of support to service workers in the latest version of iOS, Apple has opened the door to PWAs to reach, to all intents and purposes, the entire mobile market.
What are the most used technologies for PWA?
There are several technologies for the creation of a Progressive Web App, mainly based on JavaScript, with different characteristics.
Among the main we have:
- React
A powerful JavaScript library for building dynamic and modern user interfaces - Polymer
A combination of components, tools and models designed to create PWA - Angular
A JavaScript framework for creating dynamic web applications that uses HTML as a template language - Ionic
A JavaScript framework for creating powerful applications for multiple platforms using a basic code - Accelerated Mobile Pages (AMP)
An open source project to improve the performance of web pages
How to choose between a PWA or a native solution
The moment of choice comes, what solution to adopt?
It is preferable to choose the development of a PWA when:
- The app must be easily distributed to an even wider user base
- The available budget is not high
- There is little time available for go-live
- Proper indexing on search engines is important
- Cross-platform compatibility is required
- More updates are needed in a tight time
On the contrary, it is preferable to develop a native app when:
- It is necessary to move on the stores
- Speed and responsiveness are key points for the success of the app
- The app requires an important use of the hardware features of the device
- The business model is based, for example, on the cost per download and / or IAP (In App Purchase)
- The app must be integrated with other third-party apps
The differences in the installation process: PWA vs native app
The general process of installing native apps follows this flow:
- Access to the reference Store (App Store or Google Play)
- Search for the app
- Click on “Install”
- Acceptance of the various authorizations
- Opening and launching the app
- Use of the app
In the comparison, the PWA installation includes:
- Visit the site
- Addition to the device home screen (optional)
- Opening of the app
- Use of the app
The main examples of a Progressive Web App
There are already many examples of PWA “distinguished” that users use on their devices and among the main we report:
To know more:
Addy Osmani on Medium > A Pinterest Progressive Web App Performance Case Study
The current PWA is very similar to the native app and has all the main interaction features, from notifications to the ability to view Stories.
Google Maps
To know more:
The Next Web > Google’s lightweight Maps Go is just a Progressive Web App
Tinder
To know more:
Addy Osmani on Medium > A Progressive Tinder Web App Performance Case Study
Twitter Lite
To know more:
Twitter Blog > How we built Twitter Lite
Google Developers > Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
Paul Armstrong on Medium > Twitter Lite and High Performance React Progressive Web Apps at Scale
YouPorn
The decision to use PWAs is mainly to bypass the limitations that Apple and Google place on pornographic content in stores, as well as to ensure a better user experience.
To know more:
YouPorn Blog > YouPorn App Experience
VentureBeat > YouPorn goes progressive with new mobile web apps for Android and iOS
Some references to deepen the theme of the Progressive Web App
Google Progressive Web App > https://developers.google.com/web/progressive-web-apps/
Google PWA Checklist > https://developers.google.com/web/progressive-web-apps/checklist
Appscope, directory for Progressive Web Apps (PWAs) > https://appsco.pe/
So is the future “progressive”?
The answer is, as always, depends. The decision to develop a PWA follows analysis and reflections that must be done from time to time, from project to project, from user to user. On the contrary, we could add a further complexity: that of positioning on the search engine: have we managed everything correctly or are we cannibalizing the traffic on our website?
The factors that lead to the choice are many, as anticipated in this study, so there is not a defined and standard recipe but the one that gives the context fits correctly with strategy and objectives. Let’s talk about it together.
If you like this article, let us know with your claps!
