Progressive Web Apps

Progressive Web Apps are websites that use the latest technology to behave and display the characteristics of an app. Originally proposed by Google in 2015, they have been gaining more publicity and popularity among users and developers. One example of this is Twitter with the new Twitter Lite which has increased the amounts of tweets by 75% while managing to minimise the data consumption. Why are they becoming so popular and what are their features?

‍

Key aspects

‍

Many people associate specific characteristics with progressive web apps. Some of these include:

• Progressive: They work for every type of user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
• Connectivity independent: They are enhanced with service workers to work offline or on low-quality networks.
• App-like: PWAs use the app-shell model to provide app-style navigation and interactions.
• Safe: They are served via HTTPS to prevent snooping and ensure content has not been tampered with.
• Re-engageable: They make re-engagement easy through features like push notifications.
• Installable: PWAs allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

‍

Why are they already so popular? 

‍

Bearing those aspects in mind, the popularity of these apps have flourished. Progressive Web Apps have been becoming more popular among developers recently due to their relative ease to deploy and maintain. As they are websites, all users will run the same version of your code, no matter the software they have. This, in comparison to the version fragmentation of apps, allows for less time developing the app, and less time can be spent on maintaining and updating the app. This creates an attractive platform for developers to develop their apps on.

‍

Previously, functions such as push notifications and appearing onto the home screen, which help achieve up to three times more retention, were only available on native apps severely limiting the functionality of mobile optimised web apps. However, with the introduction of PWAs and their new web APIs, characteristics and functions that help to retain the user base have been implemented helping to continue user attraction and ultimately, improve user and developer satisfaction. This along with new abilities such as, being able to work offline, make PWAs feel like more traditionally native. This ultimately improves user use and will help the app grow in popularity and functions.

‍

User retention and satisfaction has increased, not only with the aforementioned app characteristics but also with the ease of first use. As they are essentially websites, they are able to run first time without the need for long download and installation times. This also combats the issue that between the first contact and first use, there is a 20% decline in usership. In addition, on second use, the user can be prompted to download the full app allowing them to benefit from the characteristics of an app and improve the chances of user retention with native features such as push notifications.

‍

How do they work? 

‍

Service workers are one of the new tools that allow or Progressive Web apps to work. They provide great functions but, they are also incredibly complex. These service workers are JavaScript files that work independently of the app and instead, they run in conjunction with events like connectivity changes and push notifications. Due to the complexity of these scripts, pre-made scripts called “Recipes” allow developers to have a working script to implement along with their code to provide a service like offline support. GitHub has a list of available pre-made “recipes”.

‍

PWAs also implement app shells to allow for the loading of the website to appear seamless to the user and allow for offline loading of the app if previously cached. An app shell is a design concept whereby the initial load of an app provides the shell for the Apps user interface, but the content is loaded afterward. This design approach allows for the UI to be loaded separately and cached independently. This also allows for the app to be shown without any network if it has been cached already. This, whether it does improve the performance or not, makes the perception of the performance seem faster.

‍

One other way the app works is by using a web app manifest. This is a JSON file that follows the W3C’s specs. This allows the web app to run in fullscreen mode as a separate application, the ability to display an icon for when it is installed and the ability for user customisation with themes and background colour. This all allows for the web app to feel more like a traditional app. With the web app manifest file, some browsers, such as chrome on android, will prompt the user to install the web app.    

‍

Conclusion

‍

Progressive Web Apps are amazing pieces of technology that use the newest Web APIs and design patterns. They allow for mobile web apps to provide services and functions that were typically only available from native apps. This is due to developments such as service workers, which provide background functionality, App shells, which provide seamless interaction and homescreen support through app manifests. They prove that websites and web developers can provide mobile app experiences.

‍

By Ibrahim Khan