Why You Should Develop Progressive Web Applications

Published: 10/07/2021

As an application developer you’ve probably heard about Progressive Web Applications, or PWA.  As the name indicates, Progressive Web Applications (PWA) are web applications appear and behave as close to native application as possible. PWAs are developed with modern web technologies that are standardized by W3C and supported by all mainstream browsers. Unlike legacy web applications that are only accessible through a browser, end users can choose to install the PWA to the device home screen or app menu and later launch the installed PWA just like a native application. This is not the only reason that you should move to PWA technology and we will outline 4 reasons why PWA should be your preferred application development and distribution model. 

 

Native Application User Experience 

One of the major goals for PWAs is to deliver a near native application user experience.  Installation to and launch from the home screen is the first native capability that PWA has implemented.  To enable this the W3C defined a Web Manifest standard as the metadata for packaging the related web assets into an application bundle like Android native applications. 

Another important feature of native applications is the ability to continuously engage with end users even when the application is not in the foreground. This is capability (and more) is provided by the Service Worker (another W3C standard).  A service worker is analogous to a thread running in the background as it does not interact with the DOM tree directly, but will listen and respond to different events even when end users have navigated to a different foreground web page or closed the application window. For example a service worker could listen for Push notifications using the Push API, and then use the Notification API to send a system notification to the user. 

Service workers can also be used to cache assets and data for your application. Caching your application assets allows PWAs to start fast without having to pull assets over the network. Caching assets and data can also be used to allow your PWA to work offline or when bandwidth is limited. The high level idea is to cache the basic UI resources locally and use them within an “App Shell” when the PWA is launched; and then update the dynamic contents when other resources are downloaded or network service is accessible later on. 

Modern cross platform API support 

In order to deliver ta modern user experience, it is not enough to have the capabilities mentioned above. Developers are expecting to access the platform features offered by host operating systems and the underlying hardware devices. To satisfy this requirement, Google* initiated “Project Fugu” to close the gap between web and native capabilities.  You can also check out the Fugu tracker app  to see the API development and shipment progress with each Chromium* release. Although initiated by Google, project Fugu has contributions from many other participants including Intel. Now that Google and Microsoft have moved Chrome* and Edge* browsers respectively to a 4 week release cadence, the gap between the Web Platform and the native OS is being closed quickly. 

Another common challenge for development teams is creating application design and interaction to fit different screen sizes, form factors, input methods, etc.  This is sometimes called “Responsive design”. Responsive design is straightfoward to implement on the Web as the DOM structure and DOM appearance can be handled separately.  In addition to the “Media Query” capability which has been supported for a long time, the web platform is adding “user preference queries, container queries, and other form-factor queries” to increase support for responsive design. You can check out this video The new responsive: Web design in a component-driven world | Session for a better understanding.  

 

The combination of platform capabilities and repsonsive design allows development teams to create a PWA in a single codebase that can run smoothly on almost all devices. 

Rich development materials 

For the majority of application developers, the focus is delivering business value rather than spending much time on developing low-level code, hence the popularity of application frameworks. If you are targeting PWA development, there are a wide range of mature frameworks and tools are available. The most popular ones are React.js, Angular.js and Vue.js.  There are also numerous UI toolkits that can be integrated with these frameworks, for example; if you are targeting 3D graphics web applications you can use three.js or Barbylon.js; if you are targeting AI usage on the web, you can use TensorFlow.js. These frameworks usually integrate well with modern development environments via plugins. 

Since Web/PWA development has the largest development community in the world, if you encounter problems or have questions about library or platform API, you can usually get the answers from technical communities such as StackOverFlow* or Reddit*. There is also up to date documentation from Mozilla Developmer Network or Google’s web developer site or W3C website.

Additionally, the web community has a developed a lot of tools to further enhance your application. For example, Microsoft* maintains a tool called “PWABuilder” to help you develop, package, and publish PWA applications; Google’s Lighthouse plugin can help you to improve the quality of web applications; Web Page Test can help you tune the performance of your app by simulating real world network and device performance; if you want to dig deeper into your PWA application behaviors, you can use the Chrome or Edge Dev Tools which can help you to diagnostic issues from your web application level down to the Chrome runtime level. Of course, if you want to optimize your web applications power and performance issues on Intel platforms, Intel also offers system level development tools

Flexible monetization and distribution 

One of the most challenging goals for any application developer is how to generate revenue through their application or service.  Today, mobile applications are usually distributed through app stores and use a one or combination of one-time purchase, subscription, in app purchases (IAP), and advertising to generate revenue. All of this is possible with a PWA but some developers might find the commission model and limitations on IAP within an app store to be too restrictive. PWAs unlock business creativity by placing no restrictions on developers allowing them to mix and match payment processing, advertising, or other backend services to suit their business model and market. Furthermore, PWAs can be easily crawled and indexed by search engines which becomes another promotion channel that links users directly into your application.  

Should You Develop Progressive Web Applications? 

By now, hopefully, we have provided some compelling reasons for you to develop your next application as a Progressive Web Applications. PWAs provide a native application user experience with numerous modern API available across operating systems and architectures, with more APIs released in Chrome and Edge every 4 weeks. As part of the largest developer community in the world, PWA developers can easily access mature frameworks, sample code, documentation, and development tools; finally, developers can have their own PWA distribution channels in addition to the app stores. 

 

  

Product and Performance Information

1

Performance varies by use, configuration and other factors. Learn more at www.Intel.com/PerformanceIndex.