How to make a PWA and how can your business benefit from it?

Having a website and two native apps for Android and iOS is a luxury that not every business can afford, especially small businesses. It would be perfect to combine a website and an app that works on any platform. A PWA lets this dream come true.

It's no surprise that many companies are testing the waters with PWAs. According to Emergen Research, Global PWA market size is expected to surpass $10 billion by 2027 with a compound annual growth rate (CAGR) of 32%.

Is it as simple as contacting a progressive web apps development company? Do PWAs really solve all problems and suit any business? Let’s find out.

The PWA Backstory

Here are the events that led to the creation of PWAs.

It all started when Steve Jobs announced that web apps would become a standard format for the iPhone apps in 2007. A few years later, dynamic web pages allowed web technologies to create interactive web applications. In 2013, Mozilla already released the Firefox OS to run web apps as native apps on mobile devices.

In 2015, Chrome developer Alex Russel and designer Frances Berriman presented the term "progressive web apps" to describe apps with new features available in modern browsers, including service workers and web app manifests. That year, Google started promoting PWA development for Android.

Firefox introduced support for service workers in 2016. The same year, eCommerce giants Flipkart and AliExpress adopted PWAs for their platforms. Two years later Microsoft Edge and Apple Safari also implemented service worker functionality. By 2019, PWAs could run in most desktop browsers, including Microsoft Edge and Google Chrome.

Today, more and more companies are adopting PWA technology to provide their users with a superb experience.

What is PWA?

PWA is a wonder child born out of a love match between the web and mobile. This kid takes the best from each parent to provide a fabulous new internet experience, and one day, it may even replace mobile apps altogether.

In a nutshell, PWAs are websites that take advantage of web superpowers while at the same time looking and feeling like mobile apps when used on mobile devices.

Users can discover, link to, and share PWAs on the web and also install them on mobile devices and use them as ‘native’ apps.

The Minimal Requirements for a PWA

What characteristics should an app have to be a PWA? Here are the main requirements:

• Fast - High performance is a must for user engagement and retention. Apps need to optimize user-centric performance metrics for a great experience.
• Works with any browser - Since PWAs are web apps, users should be able to access them from any browser. Even if the browser doesn’t support all the PWA features, users should still be able to open the app with core functionality.
• Responsive to any screen size - The app must adapt to any screen size and display all content.
• Custom offline page - Offline functionality creates a seamless experience that allows users to keep using the app until they are online again.
• Installable - Users can add the app to their screen and use it often.

Other PWA features

• push notifications - pop-up messages that appear in a user's browser or app to convey company’s information to the customers
• app-like interface - once installed the PWA opens in full screen and looks like a native app
• auto updates - updates are installed after the browser is closed
• mobile functionality - GPS, basic camera controls, Web NFC, and Periodic Background Sync API

The Chrome development team is working to blur the line between PWAs and native apps. They called it Project Fugu. At their website you can see a list of the most recent capabilities.

What makes a PWA possible?

Browsers are vital for PWA functions using these technologies:

• Service worker - A background script in the browser that enables offline work, app caching, push notifications, and background synchronization, and some other features.
• Web app manifest - A JSON file that lists the app’s information (name, description, message sender id) and allows the app to be added to the home screen.

Examples of PWAs

Every company had its own reason to invest in PWAs. Here are the most outstanding stories.

• Twitter - While its audience was (and still is) mostly mobile, Twitter wanted to provide a faster and more engaging experience. Therefore, they came up with Twitter Lite PWA and have been using it as the default mobile experience since 2017. This version helped to speed up the loading time and lower data consumption. As a result, sent Tweets increased by 75%, pages per session grew by 65%, and bounce rate decreased by 20%.
• Pinterest - Pinterest wanted to achieve international growth but due to poor web experience, their users never turned into sign-ups. Their old website took up to 23 seconds to load. To fix this, they decided to create the React app PWA that could work much faster. With improved web experience, Pinterest saw a 40% increase in time spent within the app, a 44% increase in user-generated ad revenue, and a 60% growth in core engagement.
• Spotify - Spotify disagreed with the App Store’s 30% commission rate. To avoid what they saw as an unfair charge and reach a greater audience, Spotify decided to develop its own PWA. The idea was to share interactive playlists, not just a link to the app. Users would have an outstanding product experience with the free version and subscribe to a paid version later. After the launch of PWA in 2019, there was a 30% rise in monthly active users, a 45% increase in desktop users, and a 40% increase in average listening hours per month.

This list is not exhaustive. Many companies such as Forbes, Flipkart, AliExpress, Starbucks, and Uber decided to develop PWAs and are enjoying its benefits.

What browsers support PWAs

PWAs depend on browsers and not every browser is compatible with this technology. However, remember that even if a browser doesn't support PWA functionality, PWA will still work, but just as a website (no installation, offline mode or push notifications)!

Here is a list of the most popular browsers that support or partially support PWA:

• Google Chrome - fully compatible on any device
• Microsoft Edge - fully compatible on any device
• Safari - PWA compatible only on mobile devices, and doesn’t support all functionality (doesn’t offer installation option in WebViews, no service worker for versions older than 11.3)
• Firefox - only on mobile devices (doesn’t support installation)
• Samsung Internet - PWA compatible only on mobile devices
• Huawei Browser - PWA compatible only on mobile devices
• Opera (for desktop) - doesn’t support installation. Opera Mobile supports all functionality.
• UC Browser for Android - only on mobile devices

Pros and Cons of PWA compared to websites, web apps, and native apps

Progressive web apps combine properties of websites and native apps. By native apps we mean mobile apps developed specifically for iOS or Android.

All in all, PWAs are more advanced than websites and reach bigger audiences than native mobile apps. Here is how they are different:

The pros of PWAs:

• Work faster - They load quickly so people won’t abandon them. Website loading speed can improve SEO rankings since speed is now one of the most important factors among the Core Web Vitals.
• Work on any device - So you are able to reach more users.
• Higher user engagement - Push notifications help to retain users by returning the users back to your app.
• Cheaper to develop and maintain - PWAs have one code base for all platforms, which significantly cuts the development costs. One team can develop and maintain a PWA while websites and native apps need different teams.
• Can be shared through URL - Users will have fewer barriers to discovering and using your PWA app compared to a native one. Unlike a native app which should be downloaded from AppStore or Play Market, you can open PWA from a link.
• Use less memory - PWAs use less memory so users are less likely to delete them.
• Automatic updates - Provides a better user experience thanks to seamless updates.

The cons of PWAs:

• Not all features are available on iOS – Some features like Face ID, Touch ID, Bluetooth, push notifications are unavailable within the Safari browser.
• Not battery efficient – PWAs use battery power more quickly because of their complex code.
• Limited device features – Features like Bluetooth, NFC, and advanced camera controls are so far unavailable for PWAs.
• Have issues with older devices - Outdated browsers may not support PWAs.

Why create a PWA if there are websites or native apps?

While people have become accustomed to using websites and apps, these options don’t satisfy everyone. You can improve user experience by creating a PWA.

Websites are not convenient enough for mobile users - More than 3 seconds of the loading time is enough to make 53% of users abandon a site. Many websites require more time for pages to load. Other disadvantages that users have mentioned:

• The interface on mobile devices is not as comfortable as in native apps
• Work only with an Internet connection
• Not enough personalization
• No push notifications

Native apps have high friction - This means that users have to overcome a lot of obstacles to access the ease of these apps (compared to the web). Typically, users have to go through four to six steps to access a mobile app from an app marketplace (App Store, Play Market, etc.). At the same time, people dislike downloading apps so much that 50% of consumers would rather use a company’s site instead. Another reason to avoid apps is limited storage on devices.

When do you need a PWA, and when is there a better option?

Here are cases when building a PWA is the best option:

• Most of your clients use PWA-supported browsers - If most of your current and potential clients are using PWA-compatible browsers, then a PWA could be a great solution for you. Google Chrome, Microsoft Edge, mobile versions of Safari and Firefox, and many others have no problem opening PWAs. Users of incompatible browsers will see a PWA as just a website with no progressive features.
  Browsers’ usage distribution shows that most users have browsers compatible with PWA.

• You are building an app for internal ‘corporate’ use - You don’t have to worry about reach if your app is intended for internal use only. In this case, your audience will include only your team, or your client’s team. This usually means custom applications for work automation.
• You already have an iOS app and need to build one for Android - Development of a native app is pricey. To save money you can create a PWA that will work both on desktop and mobile.
• Your app is content-driven, so it doesn’t require mobile device functionality. You already know that progressive web apps cannot entirely replace native apps when it comes to using the hardware functionality of mobile devices.
• Your time and budget are limited - PWAs are cheaper and faster to develop than native apps.
• You need to improve SEO and brand awareness - Users can find PWAs through browsers which increases their potential audience reach.

You better think of a native app when:

• You need advanced smartphone features - The work of your app might depend on specific functionality like sensors or geofencing which are available only in native apps.
• You want to reach an audience in the app stores - Apps within app stores are more credible because they have more security features and pass certain standards. This makes them look and feel more reliable for users.

Cost of PWA development services

PWAs are built using HTML, CSS, JavaScript just like websites, while progressive functionality is achieved with various tools, e.g. Google Lighthouse and Workbox. The cost to develop a PWA is usually 15% higher than a website but lower than developing a native application for iOS and Android.

Here is an example of cost estimation for a multi-vendor marketplace like Amazon with price per platform:

• a custom responsive website costs from $25,000-73,000
• an installable PWA costs about $28,000-84,000
• a native app with great UI/UX costs $30,000-90,000

The price varies depending on project complexity. But it is much cheaper to develop a PWA than to create a website and 2 separate native apps.

Conclusion

Today, users expect a terrific user experience. They will wait only briefly for a website to load, or they don’t want to go through extra steps to install a “heavy” app. A PWA comes to the rescue of both users and businesses.

Progressive apps work fast and have attractive mobile designs, while their development costs less than native apps. Many companies have already improved their user experience with PWAs and you can ride this wave, too.