Progressive Web App (PWA) Technologies: A Better Experience

Encora’s engineers have kept their fingers on the pulse of the technologies enabling agility in the face of uncertainty as organizations cope with the impact of COVID-19 and move into 2022.

We spoke with two Innovation Leaders at Encora Central & South America, Mobile Unit Manager, Gerardo Chaverri, and Senior Software Engineer, Julio Muñoz, about Progressive Web Application (PWA) Technologies. The acceleration of PWA Technologies is 1 of 10 trends Encora’s Innovation Leaders expect will help organizations respond to disruption in the new year and beyond.

How would you describe a PWA?

G: A Progressive Web App is a regular web application or website but it has been progressively enhanced to add more functionalities. For example, PWAs are installable on any platform: macOS, Android, or Windows. They’re usable in offline mode and they’re launchable from the home screen of multiple devices.

J: PWAs are based on a principle called FIRE: fast, integrated, reliable, and engaging. Those four words define what Progressive Web Apps are.

They are created to motivate users to engage with a web application. For example, you can use push notifications to invite users to engage with your web app more frequently.

A PWA could also be described as a web application with extensions that improve the user experience on mobile devices.

G: And it’s not just the user experience on mobile devices. The concept is to also create a cross-platform application that can work beyond mobile devices to cover desktop applications running on macOS, Linux, and Windows.

What are the advantages of a Progressive Web App?

G: You only have to develop the application once by creating what we call a single-code baseline. Once you’ve created the code, your app works everywhere!

Compare that to a traditional native application in which you must create an app for each platform. If you require native applications for iOS, Android, and Windows, you must create three different software applications. By contrast, if you use a PWA, you take the same app that’s on the web and use it on all other platforms.

J: From the technical perspective, there are a lot of advantages, mainly in terms of performance. With PWAs we can make our pages load faster which improves the user experience.

G: Speaking of the user experience, a PWA behaves more like a native application than a web application does. It’s more comfortable and natural than a web-responsive site.

What other ways do PWAs create a better user experience?

J: One of the main advantages for the user is that they can continue using the app without an internet connection (offline), and when they connect again all the data is synced to the server.

G: Compared to a regular website, PWAs look more like a native application and simulate the UI components that each platform uses. So, if you run a PWA app on Android, it will look like an Android app. If you run it in a macOS environment, it will look like a macOS app.

PWAs offer several functionalities a website does not: Bluetooth, Geolocation, cameras, or extra storage that may be limited on a web browser.

What does it mean for a website/web app to be progressively enhanced?

G: Progressive enhancement means that you can take a regular website and begin adding functionalities without impacting its current behavior. For example, let’s say you have a regular site and you would like for it to work offline. So, you add the PWA functionality of offline work. If you install that application on Android and Android doesn’t support offline work, your app will continue working perfectly fine as a regular website, just without the offline functionality. Whereas other platforms that support the offline functionality, will add it.

Progressively enhanced can also mean that an app is progressively scaled up or scaled down according to the services that the browser or the platform offers the user.

J: Gerardo mentioned an interesting point. You don’t need to rewrite all your application’s code to have a PWA. You can develop different functionalities in any order, even in different sprints, and in the end, you will have a PWA that will improve the user experience with the new set of features you added.

What is the difference between a PWA and a hybrid app?

G: PWA and hybrid apps are two different terms. They are both a part of the larger, cross-platform development concept. Both are different from native applications because you write the code once and you can deploy the software product to different platforms.

The difference between a PWA and a hybrid app comes down to the browser. A PWA is a web application that is progressively enhanced to add some functionalities. Hybrid applications are not web apps. They are written in a specific language but are natively installed on a platform. Their code is run by a specific engine within the platform, not in the browser.

J: With a PWA, you have a set of features available to add to your application. With a hybrid app, you have a native app that can take advantage of all the platform’s capabilities. The two can coexist. You can have a Progressive Web App and a hybrid app at the same time.

What would you say to a client that is considering a PWA?

G: I always ask clients what the main features they are looking for are. From there, we can determine what’s best for them, if they need to go native, hybrid, or PWA.

If the client is looking for integration with third-party applications, camera usage, Bluetooth, etc, then we’ll recommend a PWA so they may also take advantage of everything a PWA offers over a hybrid or native application: it’s cheaper to develop, easier to maintain, and offers the same functionalities as any other hybrid or native app.

J: As Gerardo said, it depends on the client’s needs but I believe every client should have a PWA. PWAs allow you to engage with new users. After starting with a PWA, you can think of developing a native or hybrid app. You can even ask your users to download your native or hybrid app from your PWA.

So, there is no “perfect” solution?

J: In my opinion, the perfect solution would be to have both a PWA and a native app.

G: A PWA is the natural first step to test a prototype, acceptance, and viability. The only “wrong” answer is to create an app that doesn’t take advantage of the mobile features that engage users.

What is the best tech stack to develop a PWA?

G: Because PWAs are primarily web apps, I would start with React.JS and Angular.JS, the two most used technologies in web development today. There are others, like Ionic, which started the trend for cross-platform applications for mobile.

J: There is no specific framework recommended to create a PWA. Any JS framework can be used. What you need to make sure of is that when you are developing a PWA, you are following the features checklist to create a great Progressive Web App. There’s a tool for Chrome called Lighthouse you can use to evaluate how “progressive” a web app is.

Is there anything different about developing and testing PWAs?

G: Developing and testing a web app that uses technology to work offline will entail some small differences.

Essentially, PWAs go through the regular software development lifecycle but there are more test cases involved. Unlike native apps, if a PWA will be installed on three or four different platforms, you have to test it on each one to ensure the PWA’s functionalities work fine on each, which makes testing more time-intensive.

J: When developing a PWA, you also must take limitations with the browser’s compatibility and local data storage into account.

Do Progressive Web Applications work on smart devices?

G: Yes. Let’s take smart TVs, for example. If you write the code for a smart TV application natively, you won’t be able to use it on a TV with a different platform or operating system.

With PWAs you won't have that problem. You can potentially create just one application that works across all devices and platforms.

J: The only thing you need to make sure of is that the browser will support your app.

What’s the most exciting PWA feature?

J: The way PWAs handle offline mode. You can cache data and allow the user to continue using the application when they have a poor internet connection...or no connection! That’s exciting because it changes the traditional way we’ve solved this issue and all communication with the server.

How will APIs for PWA influence the future of PWA?

G: APIs are at the heart of any PWA app. They make the interaction between PWA apps and the mobile/desktop device’s resources and sensors possible.

APIs are responsible for making resources available based on the operating system and browser where the PWA app is running. So, APIs’ maturity and growth are essential for the future of PWA and the ability to provide more functionality similar to the ones that hybrid and native applications already have.

Will web storage impact PWA technologies?

G: Web storage and service workers are vital for PWA to offer offline functionalities and a better user experience with better security.

We expect web storage capabilities to improve space usage, security, and accessibility which will imply more possibilities for PWA to offer a better experience to end-users.

How do you expect WebAssembly (WAsm) to drive adoption of PWAs?

G: Any technology that improves web app development and user experience will also benefit PWA; WebAssembly is one of them. WAsm leverages assembly-like low-level language to generate almost-native performance in web browsers.

WebAssembly will allow web apps to increase performance to become similar to native apps. This is aligned with PWA's ultimate goal, which is to provide a native app experience on any device or operating system using a single code baseline.

WAsm will also help speed up service workers, which are essential for PWA offline functionality. And WAsm will make PWA development accessible to developers who are not JavaScript experts.

Will PWAs become the standard?

G: Yes, definitely, PWA should be the standard for any organization that is creating a new website or a web app that doesn't already have a mobile application for that website. I don’t see why you wouldn’t create it as a PWA.

J: In my opinion, it should already be standard, now. Any web app should be able to handle offline mode, send push notifications to the user, allow camera access, and work properly on any device.

A special thanks to Encora Central & South America Innovation Leaders: Mobile Unit Manager, Gerardo Chaverri, and Senior Software Engineer, Julio Muñoz.

To read more interviews, visit Encora’s 2022 Technology Trends.

“The promise of cross-platform development with a single code baseline is here. This trend will continue to revolutionize the scalability and functionality of software products. Progressive enhancement can move at the pace an organization’s budget permits, without sacrificing the user experience.” - Julio Muñoz

About Encora

Encora is a digital engineering services company specializing in next-generation software and digital product development. Fast-Growing Tech organizations trust Encora to lead the full Product Development Lifecycle because of our expertise in translating our clients’ strategic innovation roadmap into differentiated capabilities and accelerated bottom-line impacts.

Please let us know if you would ever like to have a conversation with a client partner and/or one of our Innovation Leaders about accelerating next-generation product engineering within your organization.