What’s All the Hype with Progressive Web Apps (PWAs)?

Progressive Web App (PWA) has been the latest buzzword for tech and mobile practitioners, but it’s more than just jargon – and it’s not all just hype. PWAs drive performance and represent a new model of web applications. These applications load similar to a regular web page, but offer additional native device functionality such as working offline, serving notifications, launching a camera, etc. 

To fully explain what PWAs truly are, first it must be clear what they are not. A brief history of mobile development will illustrate how PWAs have come into existence. 

Native Applications 

In the dawn of mobile development, mobile applications would pursue device functionality through the means of native applications.  Native applications are an actual application using the platform’s native codebase.  Examples consist of an  iOS application developed using Objective-C or Swift, Android  developed with Java,  etc. These applications use all the native libraries and SDK available for the platform and run with all the binaries loaded/saved directly to the device.  

Hybrid Applications 

As mobile development grew in popularity, businesses attempted to unify their codebases as developing for multiple platforms became costly to initiate and maintain. Web technology was growing, and it sparked interest in businesses to save costs by developing a single mobile application using web technologies and embedding it in a native web view for each platform. These applications were referred to as hybrid mobile applications i.e. a web page loaded within a native shell. These are still executed as native applications on the device and distributed by the same means, but their sole purpose at launch is to load a web view which loads a particular website or set of web assets (HTML, Javascript, CSS, etc). This became an advantage as developers could have common web code and manage/deploy automatically within a shell to various platforms. A number of businesses wanted to pursue mobile touchpoints and reduce costs of maintaining apps for iOS, Android, and Windows phone.  

This then led to companies emerging in this space with their own frameworks for mobile hybrid development, such as PhoneGap, Titanium, and IBM Worklight. Eventually these technologies developed further and rebranded to introduce newer frameworks for developers to consume, such as Apache Cordova, Xamarin, etc. Using these frameworks, developers could invoke native app functionalities within a hybrid app through custom libraries – a hybrid application framework may expose the website loaded within the application shell's web view. This was the only means of displaying features such as a camera, location, etc. to the loaded web application. However, the experience is fairly poor, and it was very noticeable that it was literally a slow web page loading within a shell with no uniformity. 

Progressive Web Applications 

Now in the modern era,  PWAs are strictly web-based. They operate on modern technologies such as service workers and app manifests to create a native experience to the user, while being web driven. PWAs can run offline, have their own icons, load screens, and access to device hardware. This has caught the mobile world by storm as its advanced the reasoning behind the previous “mobile hybrid application” approach and forced websites to design a common experience across platforms while keeping costs low. PWAs can be distributed solely over the web by a user adding a website to their home screen, which eliminates the need to publish a native/hybrid app to a platform’s app store. 

Now that PWAs have been defined, let’s discuss the range of benefits they offer with their practices and implementations.  

Lower cost 

With PWAs the costs of overall development and maintenance of a site are significantly lowered. By merging the experience between desktop and mobile, businesses not only benefit with a single codebase for their multiple touchpoints, they reduce costs of development by both developing and hosting a single experience to their services rather than having the chore of supporting multiple touchpoints (desktop, mobile application, browser experience).  

Better reach 

Since PWAs are built for the web, this initiative allows for a better reach in consumer adoption; and a wider range of visibility. Any web browser with some of the previously mentioned web application support can run a PWA, allowing for a single point to reach users of the application.  

Convenient distribution  

Additionally, since PWAs are distributed through a simple means of a web site URL, these can be shared in a much more convenient manner than by mention of a native application through a user’s device app store.   

SEO capabilities 

SEO is an important aspect of any web developer’s task in creating a web application using the latest and greatest frameworks. As the concept of Single Page Applications (SPAs) have hit the web development market, developers are tasked to come up with unique strategies to persist states of their web apps and to ensure those states can be revisited and shared in the future. This is where the concept of routing comes into play. Modern web app practice in SPAs has been to update a URL dynamically upon state change of the application. This may include navigating to a different page, searching for data, and revisiting previously visited pages. PWA development in a SPA practice will ensure users are directed to SEO-friendly canonical URLs which can be revisited at a later time, even though the application served is strictly client-side. 

Security  

Browser security has also developed significantly with the rise of PWAs. Service workers which are invoked through PWAs are strictly restricted to only executing on local development environments, and hosts served over SSL/HTTPS. Additionally, modern browsers by default will restrict cross-origin requests (requests made to a host that is not the origin host which served the web app), to block any potential malicious activity that may occur during service calls in the web application. These security features are available for free to developers implementing PWAs and takes some of this burden away from the development process. It also places it solely on the best practices governed by the browser running the application. 

Higher conversion  

The same measures that were once complex to implement in the past are now common best practice for all web development. Having these principles and practices in play for web development will lead to a high conversion for any web application and encourage usage of the application as adoption becomes as trivial as visiting a common website link. With all the previously mentioned practices in place, along with cross-device support, PWAs aim to be the turning point of mobile development in simplifying the adoption of web applications in a secure and widely distributed manner. 

The  discussions above illustrate  the trend in mobile development from the common native practices, to the uniformity of web application development. These modern practices encourage growth in the mobile industry and demonstrate how both consumer and developer requirements have shaped mobile application development practices into adoptable front-end models.

Be sure to check out Shaun's second installment on PWAs, What specifies a web application as a Progressive Web App (PWA),where he discusses the browser technologies that make PWAs possible - including what specifies a web application as a PWA.