PWA vs Cross-Platform Apps: When to Choose a PWA

When determining the technological stack for a web and mobile application project, you may come across the concept of Progressive Web Applications (PWAs). At first glance, PWAs and mobile applications may appear similar, but they have significant differences, and depending on your needs, one solution may be significantly better than the other.

For example, when you already have a web application, you might often want to create its mobile version. Typically, the first thought in such cases is to create a mobile app - either cross-platform or native (which we compare more extensively in this blog post). This isn’t a bad approach, but it’s not always the most cost-effective app development process.

Creating a mobile app is associated with proportional costs depending on the complexity of its functionality. PWA is an alternative that allows you to target the mobile market at a lower cost and in a shorter time. In this article, we’ll explore the differences between Progressive Web Apps (PWAs) and cross-platform mobile app Development.

Read More: PWA vs mobile apps

What is a PWA (Progressive Web App)?

A Progressive Web App (PWA) is an application very similar to a mobile app. It works offline, can send push notifications, and make use of various user device features. In practice, you can think of a PWA as a mobile-optimized web page with certain elements hidden - like the browser’s search bar. As a result, it can be indexed by Google and found in a web browser.

The biggest advantage of a PWA is the ability to create a mobile user experience (UX) that makes users feel like they are using a dedicated mobile or desktop application. Installing a PWA is straightforward - you can create an interactive pop-up to add the app to the home screen.

PWA has an offline app functionality using Service Workers, a technology that allows you to include solutions in a PWA that are typically reserved for native mobile apps. Thanks to PWA, a user can, for example, download the app before a flight and use it without an internet connection. In the case of Starbucks’ PWA, users can even save their orders and send them when they regain internet connectivity.

Pros and Cons of PWAs

PWAs can be a great solution for your business, but they can also be an unsuccessful investment depending on various factors. Here are the PWA advantages and disadvantages to help you better evaluate this solution.

Advantages of PWAs:

• Speed: PWAs load quickly even with a slow internet connection.
• Offline Functionality: Thanks to Service Workers, PWAs can operate without internet access.
• Easy Installation and Small Size: PWAs install quickly and occupy very little space on the device. For example, Starbucks’ PWA is only 233KB, while the Starbucks mobile app weighs 104.3MB (as of August 2022) for comparison.
• No App Store Limitations: You can download PWAs from your website, avoiding the need for Google Play or App Store verification.
• Lower Costs: Developing a PWA is usually cheaper than native or cross-platform apps.
• UX/UI Consistency: PWAs maintain the same appearance on various devices at a relatively low cost.

Disadvantages of PWAs:

• Limited Performance: PWAs heavily rely on JavaScript, which can result in lower performance compared to standard mobile apps.
• Low User Awareness: Since PWA is still a relatively young technology, many users may not be aware of its existence, so it’s essential to inform them.
• Costly Development of Advanced Features: Implementing complex functionality in PWAs can be challenging and expensive.

What are Cross-Platform Apps?

At first glance, PWAs may seem very similar to cross-platform apps.

Cross-platform mobile apps are built using technologies like React Native or Flutter. This allows cross-platform apps, unlike native apps, to work on both operating systems (iOS and Android) without the need to create two separate apps for each system.

If you want to learn more about cross-platform apps and the differences between cross-platform and native apps, you can read our article “Cross-Platform Apps vs. Native Apps - Differences and Which Solution to Choose?”, provided that designers take into account some system differences between iOS and Android. Cross-platform UX/UI design is maintained by the apps consistency. Examples of such differences include tap target sizes or variations in app structure.

(https://www.learnui.design/blog/ios-vs-android-app-ui-design-complete-guide.html)

Pros and Cons of Cross-Platform Apps

Advantages of Cross-Platform Apps:

• One Codebase for Both Systems: By using frameworks like React Native, you only need to create one app that works on both systems (compared to native development, which requires two separate apps for iOS and Android).

• Low App Development Cost and Quick Market Entry: Since the code is shared between systems, you can create iOS and Android apps at a lower cost than native technologies.

• UX/UI Consistency: Achieving design consistency is more straightforward and cost-effective in cross-platform technologies compared to native ones.

• Better Performance and More Functionality: Mobile apps can be more efficient and offer more advanced app performance optimization features, which would increase costs and slow down development if implemented in a PWA.

Disadvantages of Cross-Platform Apps:

• Higher Development Costs Compared to PWAs: Despite being cheaper than native apps, cross-platform development is still costlier and requires more work than creating a PWA.

• Maintenance Costs: Maintaining a mobile app is more expensive and time-consuming compared to a PWA, primarily due to the need for verification of each update by the App Store.

Why consider between PWA and Cross-Platform

Depending on your business needs, the choice between a cross-platform mobile app and a PWA will differ. In some business models and types of applications, such as e-commerce, PWAs work exceptionally well. For example, the Starbucks PWA case study reports a 50% increase in mobile users thanks to their PWA. This might be hard to believe, but considering that a 2016 study found that 49% of smartphone users didn't download a single app in a month, it might lead to exploring alternative solutions like PWAs.

There can be many reasons for such low app download numbers, including large app sizes, the need to create personal accounts, or an oversaturated app market. PWAs, with their small sizes and quick installation without relying on app stores, can address one of these issues.

Another reason to consider PWA over a mobile app is time and cost. PWAs are usually a more affordable solution and can reach users much faster. Many companies (like Starbucks, X, Y) already had their mobile or web apps and added PWAs to their portfolio.

In young startups and businesses, there's often no time or money to create a web app and then a mobile app. What matters are sound investments, achieving strategic goals, and entering the market quickly. In such cases, a PWA can be a perfect choice. In SaaS services, using a PWA instead of a dedicated mobile app should work just as well at a lower cost.

Determining the technological stack in SaaS applications is not the only challenge. It's also essential to focus on how design affects acquiring new app users.

Examples of Successful PWAs

Starbucks: According to Starbucks, the creation of their PWA doubled user engagement with their mobile app and brought significant profits at a relatively low cost compared to a standard mobile app.

Trivago: When looking for accommodation while traveling, users cannot afford an app that stops working when there's no internet connection. That's where PWAs shine. According to Trivago, their PWA increased conversions by 97%, user engagement by 150%, and users returned to the PWA at least twice in the first two weeks. Trivago - Building the Next Generation of the Mobile Web

Uber: Like many other companies, Uber decided to create its PWA to address several challenges they faced. They wanted to provide the most accessible solution, allowing people in urgent situations to use their services quickly, even without a mobile app.

Uber's PWA has been very successful, enabling many people to use their services even without a mobile app.

Read More: PWA with Next.js in e-commerce

Security Considerations for PWAs and Cross-Platform Apps

When developing Progressive Web Applications (PWAs) or Cross-Platform Apps, ensuring robust security measures is crucial and critical. As both types of applications are widely accessible across devices, they become prime targets for potential security threats. Below are key considerations developers must address to ensure security for these apps:

Implement Authentication and Authorization

Implementing strong authentication and authorization mechanisms is essential. In 2023, 83% of breaches, of which 43% involved stolen credentials, were caused by unauthorized access to PWAs and cross-platform apps. Integrating OAuth 2.0, or OpenID Connect, can provide robust protection against unauthorized access to these Apps.

Authentication should not only confirm user identities but also ensure that users have appropriate permissions to access specific data or features. Additionally, multi-factor authentication (MFA) adds an extra layer of security by requiring multiple forms of verification.

HTTPS Usage and Certificate Management

Ensuring that your app communicates over HTTPS is another way to ensure security. It should be noted that it is Hypertext Transfer Protocol Secure (HTTPS), not HTTP, which is unsafe. HTTPS uses an encrypted protocol, and the communication also remains encrypted.

It not only protects the data in transit but also enhances user trust. Similarly, cross-platform apps interacting with web APIs must enforce secure communication channels to prevent cyber attacks.

Cross-Site Scripting (XSS) Protection

Cross-site scripting (XSS) is a common vulnerability in web-based applications. In 2022, XSS accounted for 61% of all web application vulnerabilities. XSS is an exploit where attackers can inject malicious scripts into web pages viewed by other users, leading to unauthorized actions or data theft.

Implementing a Content Security Policy (CSP) and sanitizing user input are effective strategies for mitigating XSS risks. Cross-platform apps should also be hardened against XSS by ensuring that external content is properly filtered and sanitized.

Data Encryption and Secure Storage Strategies

Encryption is a key strategy for protecting sensitive information. Implementing AES encryption can secure sensitive data storage on devices, while TLS ensures data transmitted over networks remains confidential.

Furthermore, PWAs, which store data locally on a user's device, should leverage secure storage APIs like IndexedDB with encryption. On the other hand, cross-platform apps, which often store user data on mobile devices, should use platform-specific secure storage mechanisms to protect sensitive information.

Regularly Update and Patch

Maintaining security requires a continuous lookout for possible threats and attacks. Regularly updating both PWAs and cross-platform apps ensures that any discovered vulnerabilities are found and addressed promptly. Developers should implement an automated update system that deploys patches as soon as they are available.

Performance and Security Testing

Application vulnerabilities are mostly found during the testing phase. Before deployment, performance and security testing are essential. Security testing should include penetration testing, vulnerability scanning, and code review to identify and mitigate potential weaknesses.

Conclusion

Both PWAs and cross-platform apps can offer very similar features and capabilities for your business. In younger businesses and startups, choosing a PWA for e-commerce might be better due to lower costs, allowing you to test your app idea inexpensively and quickly. If your product requires a dedicated mobile app with advanced features and aims to cover the entire iOS and Android mobile market, a cross-platform app development approach may be more suitable for your business. In most cases, a PWA may be sufficient for your MVP project's needs.