Why and How to Write Progressive Web Applications

Do you want to develop a new application, but the complexity of native application development is detering you from doing so? Maybe the new concept of software development might help you. It is called progressive web application (PWA). Is it just another buzzword or can PWAs really replace native applications?

At the beginnings of the smartphone time, native mobile applications have set a standard of quality and showed their back to web applications or more precisely web pages. Native applications provided a better UX and had a quicker start than browser applications. Packed in source files and direct access to hardware enabled a much higher performance and a larger variety of functionalities.

This development was gradually reflected by web technologies, converting towards a more app-like approach. Technologies such as HTML5 or CSS3 came up as well as new JavaScript frameworks, web browsers have gone through a solid improvement as well. Thanks to this development, web applications could start to pop up which are more like native applications than web pages in their behaviour.

Progressive web applications

In the year 2015, Google first used the term “Progressive Web Apps” to describe applications using the advantages of new functionalities of modern web browsers such as service workers and web application manifests which enable the users to “upgrade” web applications with functionalities from the native OS. Based on the Google developers, PWAs have the following properties:

• Progressive: They function for all users regardless of the browser they choose to use because the application is created with the principle of gradual loading of content.
• Responsive: Page display is optimized for all kinds of devices (smartphones, laptops, netbooks, tablets etc.).
• Connectivity independent: Thanks to the service workers technology, the application can be used offline or with bad internet connection.
• App-like: The user has a feel during the interaction and navigation like using a native mobile application.
• Fresh: Always includes up to date data thanks to the update technology service workers process.
• Secured: The operation is only possible through HTTPS in order to prevent wiretapping and changing content of loaded data. 
• Easy to find: Thanks to the W3C manifests, they are identified as “applications” and the registration of service workers helps browsers finding them.
• User engagement: It facilitates user engagement thanks to functions such as push notifications.
• Installable: They enable users to “keep” the application on their home screen without the uncomfortable and lengthy process of installation from an App Store. 
• Linkable: It is easy to share through a URL without the need of complicated installation.

PWA technology

PWAs are an upgrade of present web technologies, they do not need any separate packaging or distribution. The PWA publication is just like publishing any other website. Since 2016, PWAs are implemented into the Chrome browser as well as for example in the mobile Safari.

Manifest

Web application manifest is a JSON manifest for centralized definition of metadata by the developer of a given application. The W3C specification can be found here.

The manifest allows you to “install” a web application to the home screen using a message as the website is opened.

An example of the file manifest.json:

{  
 "short_name": "App name",  
 "name": "The best application ever made! ++",  
 "icons": [  
 {  
 "src": "img/launcher–icon–4x.png",  
 "sizes": "192x192",  
 "type": "image/png"  
 }  
 ],  
 "background_color": "#FAFAFA",  
 "theme_color": "#512DA8",  
 "start_url": "/index.html",  
 "display": "standalone"  
}  

After that, the manifest only needs to be included in the html head

Service Workers

Service workers provide programmable network proxy in the web browser to operate web (HTTP) requests. Service worker is located between the network and the device to complete the content. Service workers are using an efficient caching mechanism and allow use of the application even in case of disconnection from the network. 

• Properties of service workers
• Ability of simple operation of push notifications
• Synchronization of data in the background
• Ability to process HTTP requests coming from anywhere
• Accepting of centralized actualizations

Service worker is implemented as JavaScript code registered in the HTML head:

if('serviceWorker' in navigator) {  
 navigator.serviceWorker  
 .register('/service–worker.js')  
 .then(function() { console.log("Service Worker Registered"); });

The file service-worker.js includes the code of service worker itself, including the operation of requests. In case that the device disconnects from the Wi-Fi during the browsing of the application, service worker will still return HTTP code 200 and will deliver offline content from cache. That enables you for example to finish reading your article. :)

You can browse your registered service workers in Chrome on the URL

chrome://serviceworker–internals

Architecture of the application shell

Application shell is the minimal HTML, CSS and JavaScript needed for correct run of the user interface of a progressive application. The first load of shell should be extremely fast and immediately cached. “Cached” means that the shell files should be loaded once over the network and later stored on a local repository. Each following opening of the application should be loaded from cache by shell, which means it is very fast.

The architecture of the application shell separates the core of the application infrastructure and user interface from the data. The user interface and infrastructure is cached locally using service worker, every other load of the application loads only the needed data instead of reloading everything.

The idea behind application shell is similar to loading an application package to the App Store when creating a native application.

Why write progressive web applications?

The creation of quality progressive web applications has great advantages, pleases users and can lead to increased sales, higher user engagement and greater conversions.

• In case the application meets PWA criteria, Chrome will display a message to the user about adding the application to their device’s home screen. 
• Reliable application independent of the connection quality
• Better user experience!
• Thanks to caching it economizes the amount of downloaded data.
• Increased user engagement and conversions.
• The user has easier access to the application thanks to the installation.
• The extension of a well written JavaScript web application to a full PWA application is pretty simple - one manifest file and implementation of a service worker with a little bit of logic for the offline functionality.

Will progressive web applications replace native applications?

Not at all. It is really just an upgrade of present web application with a little bit of extra functionality. The main reasons why PWAs will never replace native applications are, based on my opinion, these:

• Especially Apple will not let anybody take over their App Store monopoly. Progressive applications can be installed on Apple devices, but the process is (and based on my opinion always will be) very complicated for the user. In Safari, it is necessary to click on a tab and select a pretty abstract item “Add to desktop”.
• The access to the HW through web browser will never catch up to the possibilities that SDKs have for mobile applications. Whether it is FaceID, offline repository in the phone (PWA limit is 50 MB) or for example API for HomeKit.

How can you tell a progressive web application?

Lighthouse is an open-source automated tool for quality check of your web application. It is available as a Google Chrome add-on, but also a Node module. Input the URL of given web application and it will run a set of tests and in the end it will display the evaluation and possible recommendations.

Node module is also suitable for use in Continuous Integration tests.

The module can be easily installed:

npm install –g lighthouse

Run a test on the URL of given web application

lighthouse https://example.com/

Conclusion

Progressive web applications are still a very interesting and powerful concept which will gradually become a standard extension of web application to be considered during the development. 

For some use cases it will certainly not be necessary to write native applications and it will be possible to replace them with progressive web applications. It is, however, certainly not a technology that will replace native applications in the future.

Do you feel like writing your first progressive web application? Check out also the progressive beer or how application development works here in Ackee.

Sources:

https://developers.google.com/web/progressive–web–apps/

https://developers.google.com/web/fundamentals/engage–and–retain/web–app–manifest/

https://en.wikipedia.org/wiki/Progressive_web_app

https://codelabs.developers.google.com/codelabs/your–first–pwapp/#0

http://blog.ionic.io/what–is–a–progressive–web–app/

https://w3c.github.io/manifest/

http://blog.mikota.cz/2016/01/bleskurychle–webove–aplikace.html

https://cloudfour.com/thinks/ios–doesnt–support–progressive–web–apps–so–what/