What is a Progressive Web App (PWA)? Explain it like I'm five

Subscribe to our monthly newsletter to get the latest news and handpicked content delivered to your inbox.

Back to blog

September 14th, 2022, posted in for_founders, tech_stuff
by Saiona

If you've searched, read or just skimmed through tech articles in the past few years, chances are you`ve come across the term PWA. Since 2015, when Google officially coined the name, Progressive Web Apps (PWA) have taken software development by storm. 

 

Promising to combine the best of web and mobile apps, PWA has the potential of a game-changing technology. And, as with any hot topic, it's surrounded by a lot of questions and related terminology. In this article, we'll be looking at some of the most commonly referenced concepts, questions and use cases when it comes to PWA.     

 

 

What's in a word? PWA, cross-platform, hybrid and native

Words such as “cross-platform”, “hybrid” or “native” are frequently used to define PWA, either through similarity or contrast. But how exactly do they relate to Progressive Web Apps?  

 

Each operating system (OS) is written in one or more programming languages, which represent the system languages for that OS. For example, Android uses Java and Kotlin, while macOS uses Objective-C, among others. Apps written in the same language as the OS are considered native apps. Just like people who are native to a country, these apps can take advantage of the system`s full capabilities because they speak the same language. The downside? You will need to invest time and resources for each language you want to use, not just for web, but also for mobile.

 

In contrast, PWA is a polyglot technology. You can think of it as a website built using web technologies, but that acts and feels like an app, meaning it can be installed, it has access to device hardware (microphone, camera, GPS), it can send push notifications and can even work offline. Some of these things were previously reserved only for native applications, which makes PWAs such an entertaining option, even if it doesn't cover the full spectrum available to native apps.   

 

Starbucks PWA on mobile and desktop (Source

 

To a certain degree, you can consider PWA cross-platform, because you can open Progressive Web Apps on almost any device, including mobile phones. However, PWAs are not fully cross-platform, in the sense that they still require a browser and you traditionally can`t find a PWA in the app store because they are not mobile apps. As things progress, attempts have been made to include PWAs in app stores. For example, Trusted Web Activity is a new technology by Google which allows you to convert a Progressive Web App into a native app and then deploy it on Apple App Store and Google Play Store. This is done through a protocol which wraps a browser tab into an application.

 

Last but not least, hybrid apps are a combination of an app created for a web browser and a native application designed with a particular platform in mind. Once again, PWA overlaps with hybrid apps, although hybrid apps can be distributed via app stores out of the box, because they are already wrapped in a native container. 



PWA FAQ (and other acronyms)

To shed more light on PWA, we`ve gathered some of the most frequently asked questions online. This is by far no definitive guide, but if you need a quick primer and don`t have time to read dozens of articles on the topic, this is a great place to start. 



So, what is a PWA?

PWA is an acronym for Progressive Web App(s). As the name suggests, PWA is first and foremost web-related, meaning it runs in the browser, it has an URL and it's usually built using web technologies like HTML, CSS, JavaScript and JS frameworks like Angular or Vue. However, using the capabilities of modern browsers, PWA can do things regular websites can`t do. PWA allows one-click access, meaning you can save them as an icon on your phone home screen, similar to a regular mobile app. It can also use some of your phone`s device hardware like microphone or camera and it can even work offline. All of these were things traditionally reserved to native apps, but they are now possible through enhanced browser capabilities. 

 

From a technical standpoint, an application needs to meet three requirements in order to be considered PWA:

 

  • Be served using HTTPS (Hypertext Transfer Protocol Secure)

 

  • Have a valid web manifest file. This is a JSON file where key information about the PWA is stored, such as the name of the app, the start URL, icons, theme color which shows when the app is loading etc. The information provided in the web manifest defines how the PWA appears to the user, including the details which make a PWA look like a native app, such as the home screen icon. The manifest is required by browsers like Chrome in order to show the “Add to home screen” prompt.   

 

  • Register a Service Worker with a Fetch Event Handler and offline support. Service Workers are an essential part of PWA as they enable fast loading, offline access, push notifications and more. They also make PWA more reliable, allowing for example a user who was disconnected from the Internet to have their order processed automatically once they get back online.   



What is the difference between a web app and a progressive web app?

Progressive web apps are more likely to vote against the status quo. Just kidding. Progressive Web Apps use “progressive” app features such as service workers, web manifests and an app shell for fast loading, reliable performance offline and more. You can think of PWA as an enhanced web app, with all the additional functionality mentioned in the previous answer. Sometimes SPA (Single Page Applications) and PWA get conflated. While a PWA can sometimes be a Single Page Application, it doesn't mean it automatically has to be one. Here is a great article on why Progressive Web Apps are not Single Page Applications.

If you are in doubt whether you are looking at a web app or a progressive web app, also check out these nine PWA attributes defined by Alex Russell, the Google engineer who first proposed the idea of PWA.  



Is PWA a mobile app?

As much as PWA might emulate a mobile app, they are not mobile apps. PWA are essentially web pages which behave really well on mobile and use some of the device features available to native mobile apps.  



Will PWA replace native apps?

Efforts are being made to address some of the limitations of PWA, such as making them available on app stores. For the time being, native apps and PWA co-exist, as established businesses still choose to go through the effort of building a native mobile experience for their customers and PWA is still in the process of catching up. Whether PWA will completely replace native apps is an ongoing (and very heated) debate.    



What are some PWA examples?

Some big names in the industry are already using PWA successfully, with Telegram, Spotify, Twitter, Pinterest, Ali Express and Uber being just a few. 

 

Twitter launched Twitter Lite, a PWA version of the Twitter client, in 2017, arguing that it helped them increase engagement and reduce data usage significantly. Similarly, Spotify launched their PWA in 2019, their free-to-paid conversion allegedly going from 26.6% in 2015 to 46% in 2019 (source).     


Uber PWA on mobile and desktop (Source)

 

To PWA or not to PWA. Common use cases

With so many options out there, how do you know if PWA is the right one for you? Ultimately, it all comes down to the needs of your specific project. 

 

✔️ You need fast loading speed

Due to caching through service workers and tapping into device resources, PWA has a good loading time, faster than most web apps. Your user experience and retention rates might benefit from this and from your app being able to work offline or under poor network conditions.

 

✔️ You need to reach a wider audience or to launch fast  

Let's say you are considering going mobile, but don't have the resources to commit to a native app. PWA is a great option, as it allows you to reach a wider audience by leveraging platform-specific features with less risk. Because it requires less development time and resources, it also allows you to launch your MVP faster. 

 

✔️ You are invested in your SEO

One of the nine attributes of PWA, as defined by Google, is discoverability. This means PWA are identified as applications, which allows search engines to find them. PWA supports dynamic rendering, which allows the web server to serve different versions of content to different sources. 

 

❌ You want consistent level of UI quality 

In comparison to PWA, native development uses native SDK (Software Development Kits) which offer a variety of tools for testing performance, design, usability and more. They also generally come with boilerplate code and design systems. From a development standpoint, this makes it easier to maintain UI quality standards. 



❌ You are concerned about things such as compatibility with legacy devices, battery efficiency and advanced native features

PWA can do a lot, but not everything. Compatibility with older devices and web browsers, lack of access to certain advanced native features such as face identification, fingerprint identification etc. are only a few of the things PWA falls short of.



❌ You want a flawless onboarding experience

Creating an account can be tedious, especially when you can easily log in through Facebook or Google instead. Unfortunately, PWA doesn`t support logging in through third-party apps, at least not out of the box.    

  

 

PWA has huge potential and is already becoming an industry go-to as a fast and cost-efficient solution. If you want to build a PWA or you are just trying to decide if it's the right approach for you, make sure to drop us a line or leave a comment. 


About the author

Saiona

I play with Figma and words. UI designer by day, copywriter by background. I enjoy creating worlds in which people feel connected. Either as user experiences or as poetry and short stories. I am forever fascinated by human creativity.

See more articles by Saiona