April 11th, 2024, posted in learning
by Adelina
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 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 this topic.
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 this new technology 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 Progressive Web Apps cross-platform, because you can open them on almost any device, including mobile phones. However, they 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 Progressive Web Apps in app stores. For example, Trusted Web Activity is a new technology by Google which allows you to convert a PWA 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, Progressive Web Apps overlap 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 the topic, 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 PWA?
PWA is an acronym for Progressive Web App(s). As the name suggests, this technology 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, Progressive Web Apps can do things regular websites can`t do. They allow one-click access, meaning you can save them as an icon on your phone home screen, similar to a regular mobile app. They can also use some of your phone`s device hardware like microphone or camera and they 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 a Progressive Web App:
- Be served using HTTPS (Hypertext Transfer Protocol Secure)
- Have a valid web manifest file. This is a JSON file where key information about the app 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 app 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 enable fast loading, offline access, push notifications and more. They also make Progressive Web Apps more reliable, allowing 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 it 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 Progressive Web App 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 concept.
Are Progressive Web Apps mobile apps?
As much as they might emulate a mobile app, they are not mobile apps. They are essentially web pages which behave really well on mobile and use some of the device features available to native mobile apps.
Will Progressive Web Apps replace native apps?
Efforts are being made to address some of the limitations of this technology, such as making such apps available on app stores. For the time being, native apps and PWA co-exist. 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 it will completely replace native apps is an ongoing (and very heated) debate.
What are some Progressive Web Apps 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 theirs 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 this 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, Progressive Web Apps have 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 this technology, as defined by Google, is discoverability. This means Progressive Web Apps are identified as applications, which allows search engines to find them. They support dynamic rendering, which allows the web server to serve different versions of content to different sources.
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.
Progressive Web Apps 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 they fall short of.
Creating an account can be tedious, especially when you can easily log in through Facebook or Google instead. Unfortunately, Progressive Web Apps don`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 one 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.
