Is Progresive Web Application a good choice for your next project?

Introduction

You have landed on this article because chances are you are wondering what Progressive Web Applications are. And also, whether they are a good fit for your project or not.

Progressive Web Applications are extended websites. So, the question should not be "What is a PWA?" but rather "What makes a website a PWA?". The short answer is three things: it's served via HTTPS, includes a Web App Manifest, and implements a Service Worker.

Serve over HTTPS

Serving content over HTTPS is recommended for any site, not only PWA. The major browsers would consider a website unsafe if it is not served over HTTPS, and they set this as a requirement for a PWA to work. Let's Encrypt is an open certificate authority. It is free and relatively easy to install, a great way to comply with this requirement.

Includes a Web App Manifest

A Web App Manifest is a text file in JSON format containing the PWA metadata. It includes, among other attributes, the app name, description, icons, start URL, and background colors. All this information defines what the web application looks like, what icon to display once installed, what URL is the app scope, default screen orientation, making it look and behave closer to a native app.

Implements a Service Worker

A Service Worker is a script (JavaScript) running in the browser background, independent from the PWA (or website). It means it continues to work even if the application is not open. It provides Push Notifications, periodic Background Sync, and a Cache interface. The Service Worker is the base layer to provide an offline experience because it can intercept network requests from the application and decide how to handle them. For example, it can help implement a cache-first strategy for serving content or assets. So if they were accessed before, a network connection would not be needed to access them again. Another example is to defer actions when the device is offline to later when the network connection is back. For instance, when a user would like to send a message when their device is offline, this is how the workflow would look like: 

1. The user writes the message and puts the phone in their pocket.
2. The Service Worker detects the lack of connection and persists the message using a client-side storage API such as IndexedDB.
3. Finally, when the internet connection is back, the Service Worker retrieves the message and sends it in the background.

As we mentioned earlier, the Service Worker script lives in a separate JavaScript file. It has to be registered in the PWA via serviceWorkerContainer.register(). It’s important to point out that the Service Worker will work only if the PWA uses HTTPS. 

More on using Service Workers.

Are these three things enough?

Yes and no. Yes, a website having these three things is considered a PWA. But a well-implemented PWA should have, if not all, as many of the following attributes (according to MDN Web Docs):

• Discoverable. The contents of the PWA should appear in the search engines results.
• Installable. So it can be accessed easily without having to open a URL in the browser. Just as a native app.
• Linkable. It should be accessible through a URL so it can be shared.
• Network independent. It should provide partial or full functionality on poor internet connection or when the user is offline.
• Progressively enhanced. So the basic functionality is available in older browsers and fully functional in modern browsers.
• Re-engageable. It leverages Push Notifications to keep the users informed and engaged.
• Responsively designed. So it can adapt and be usable in any device and any screen size.
• Secure. It uses HTTPS to secure connections between the parties and protect sensitive data.

See more about the PWA advantages.

A well-implemented Progressive Web Application could help increase organic traffic, user retention, conversion rates, and sales growth. The degree of benefit would be in function of how good or bad your current project situation is.

It's of great importance to know that it's not necessary to implement all the capabilities the latest web APIs offer. We need to identify what features would benefit our use case and tailor the PWA to our needs.

There is a big chance we don't need a PWA at all, and we are better off with a highly optimized website instead.

PWA vs. Native app vs. Responsive website

As mentioned earlier, Progressive Web Applications are enhanced websites. That's why they include all features of standard websites and provide some additional ones. The table below summarizes features offered by PWA, Native apps, and regular responsive websites.

Keep in mind that we didn’t include such things as the cost of development or time to market, as it would be impossible to represent in a table. Those factors will differ between the mentioned solutions, and you should consider them when deciding about the solution for your project.

*Not supported/partially supported on iOS

	PWA	Native app	Regular responsive website
Functions offline	Yes	Yes	No
Push notifications	Partially*	Yes	No
Installable	Yes	Yes	No
Mobile-specific navigation	Yes	Yes	No
Works on all devices and OSes	Yes	No	Yes
Indexed by Google	Yes	No	Yes
No download required	Yes	No	Yes
Bypasses marketplace	Yes	No	Yes
No updates required	Yes	No	Yes
Can be linked and shared	Yes	No	Yes
Low data requirements	Yes	No	Yes
Can be promoted in marketplace	Partially*	Yes	No
Full access to native features	No	Yes	No

Who would benefit the most from Progressive Web Applications?

Before we adventure to answer this question, it's necessary to understand some of the main features of a Progressive Web Application.

Installable

We already mentioned PWAs look and function like a native app. So, it means we can install them on our devices too. Opposite to the native app installation process, we can install PWAs from the web browser. It's a quick and hassle-free process with just one click. The size of the downloaded file is far smaller than a native app.

Being installed on the device, the PWAs can be accessed from an icon on the home screen and appear in the app search results, just like any other native app.

Who benefits from this feature? 

• Projects with engaged users who need easy access. Without going to the browser first and typing a URL to use their functionality. 
• To install a native app, the users have to go first to the app store. That may interrupt their current interaction. For example, a customer in the middle of a checkout process would have to start again. That doesn't happen with PWAs.

Push notifications

Every time a relevant action happens within the application, the user may receive a message with that information on the device screen. It's a great mechanism to keep the user informed and engaged. However, we have to use them sparingly. Because if we constantly take the user's attention, they can feel spammed.

Additionally, there is also badging for the app icon. A little badge would appear on the icon, indicating that an action has happened once or several times. It's an alternative to push notifications.

Who benefits from this feature?

• Who needs to keep the users informed about updates in their data or profiles. For example, changes in orders statuses and payment clearance in eCommerce.
• Projects with constant new entries or updates, such as news and weather services.

Offline availability

Everybody has ever been in places or situations where internet connection is limited or non-existent. A PWA can download data ahead in the background and cache it in the device memory. Then the user can access it anytime later, no matter the connection quality. Also, it can postpone actions for a later time when the internet connection is back.

Who benefits from this feature?

• eCommerce sites with small catalogs. The products would be downloaded ahead and be available to the user when offline. Also, the user would be able to add products to the shopping cart and finalize the checkout. In this case, the PWA would place the order when back online again.
• Ticket systems. The users can have access to their train, concert, or flight tickets, to mention a few, even if they don't have an internet connection at the moment of the event or trip.
• Social network and communication apps. The example previously mentioned, about a message written while offline and sent later when online.

Receiving shared data

Progressive Web Application can appear in the target list of the share functionality. So we can send data such as links and images from other applications, even from native apps. What we do with that data is up to us and our application needs.

Who benefits from this feature?

• Social network and communication apps. For instance, we found a great website, and we want to share it with our contacts via our PWA. We press the share button in our browser and select our PWA from the target list.
• Reading list apps. For example, we can share articles, documents, or text fragments to read later.

Speed and data usage optimization

Making our PWA fast and keeping low data usage depends on the quality of the implementation. We can leverage the Service Worker to create a good cache strategy and sync data in the background. A PWA is not fast and reliable just because it's a PWA but because it takes advantage of the appropriate technology.

Who benefits from this feature?

• There are locations where data transfer is dramatically expensive and limited. Surely everybody can benefit from a PWA using data cautiously.
• Data collection applications, such as polls apps. The interviewer needs to input data while asking questions and listening to answers. A fast and optimized application allows capturing data without worrying about a button responding late or data loss while in the field as the worst of the cases.

As we can see, Progressive Web Applications can benefit many types of projects. The technology involved unleashes the possibility of delivering great user experiences. A project is a candidate for PWA if it requires a lot of complex user interactions while being fast and reliable. We need to assess our project requirements very carefully and decide accordingly. 

Progressive Web Applications are suitable for projects that require a presence on desktop and mobile devices. A PWA can work as a typical website in our computer browser and also look and work similarly to a native app on our phones. Maintaining one code base while targeting many device types is for sure appealing.

Myths and facts about PWA

When Frances Berriman and Alex Russel from Google first defined the term Progressive Web App, they described standard web applications with some additional features provided by modern browsers. It was mainly about adding service workers (allows e.g., local caching), web app manifest (making the app installable) and push notifications. 

As the popularity of PWA was growing and new PWA frameworks and solutions emerged, its original meaning began to fade, and the acronym itself became more of a buzzword. More and more people started to imagine PWA as a magical solution to all the problems in the web world. Let’s clarify some of the negative and positive myths that have arisen over Progressive Web Apps in the last few years.

Myth 1. PWA will fix all the performance problems

PWA can indeed utilize service workers to enable efficient and flexible caching. It allows defining specific caching requirements for API responses, website content, or adding lazy loading of the images. While this can be a significant improvement, particularly if the page doesn't have any other caching implemented yet, it is not a remedy for all performance problems. 

The cache won’t improve the loading time for new visitors since they have never been on the page before, and there is nothing that could be served from the cache for them. 

You can check how many of your new visitors bounce off in Google Analytics. If those bounces are caused by poor first page loading time, PWA won’t help here.

The caching mechanism of PWA allows us to load files directly from the cache, but the page still needs to be rendered. For that, it requires CPU resources. The more JavaScript, complex animations, and DOM elements are on the page, the more CPU is required. It also increases battery draining, affecting users on low-end devices the most. Unfortunately, implementing PWA itself won’t help with that. Instead, you should focus on optimizing and simplifying the code if possible.

Last but not least, many of the PWA frameworks are still in the early stages of development, they are not very stable, and they have performance issues. We observed that with one of the most comprehensive PWA solutions for eCommerce at the moment - Shopware PWA. It required a lot of additional work from the developers to improve the performance to a decent level - Case study - Yope.me (video in Polish only).

Myth 2. PWA will fix the SEO issues

“So, by default, saying going to a PWA will make your rankings better—I don’t think that is the case. It can improve your rankings if you make a better website, but you also have a lot of other things that you need to think about”

We need to remember that PWA is still an enhanced website. It doesn’t include any special features or mechanisms that will instantly improve the SEO. Of course, PWA gives you the possibility to provide a great user experience that will make people more likely to visit your website over the competition. But you still need to include all the meta & structure data, work on quick load times, and include keywords in the headings and content.

Myth 3. PWA means headless

The hype for PWA caused PWA and Headless terms to be mixed. PWA has been used synonymously with Headless, suggesting that PWA can't exist without headless architecture and vice versa.

That is not true. Headless software (also headless eCommerce) means that the platform doesn’t have a graphical user interface by default. Instead, it provides output through API. Thanks to that, we can separate the backend and frontend and connect the frontend using the mentioned API. What’s essential is that this frontend application doesn’t need to be PWA. It can be a standard Single Page Application as well.

PWA also doesn’t require headless architecture to be Progressive Web App. As mentioned earlier in this blog post, PWA is nothing less and nothing more than a website enhanced with some additional features of modern browsers. You can turn the standard storefront into PWA if only you add a service worker, the web app manifest, or push notifications.

There is no requirement for the PWA to use the API of headless software. These are entirely separate things that shouldn’t be confused with each other.

Myth 4. You need PWA to make your site mobile friendly

There is no doubt that Progressive Web Apps provide some unique mobile functionalities compared to standard websites - they are installable, have push notifications, and feel more like a native app in general. Also, PWA frameworks always provide mobile-first themes that make your shop look good on smaller devices.

However, if you already have a well-functioning storefront that doesn’t look good on mobile devices, PWA is not the only solution. It will often be sufficient to design and implement mobile views on an already existing storefront. If the PWA features are not crucial for your business, it will save you a lot of time and costs.

Myth 5. PWA doesn’t work on iOS

For a long time, PWAs on iOS lacked the functionalities supported in other operating systems. However, the situation has improved with iOS 13 & 14, which introduced support for many PWA features on Apple mobile devices.

There are still a few features that are missing or implemented differently. One of them is the “Add to Home screen” prompt, which is displayed for the users automatically on Android devices. Customers using Apple devices need to enter “Share” options manually and add the application to the home screen from there.

Another crucial feature requested by many developers is push notifications. Unfortunately, Apple still hasn’t declared any plans on implementing it, so it’s hard to predict when and if at all we’ll see push notifications on iOS.

As you can see, Progressive Web Applications are still limited on Apple devices. However, claiming that PWAs don’t work on iOS is simply not true, since the operating system supports the service workers, web app manifests, and access to some native inputs.

Things to have in mind before considering PWA as your solution

Maturity of the technology

Progressive Web Applications are a relatively new topic. They make use of modern browser features to achieve their characteristic functionality. Many of these features are not stable enough and widely supported just yet. There is no doubt that browser support is growing, and the technology is going forward. However, we can’t control what devices our users possess and their browsers. So, when implementing a PWA, we should expect device and browser-related issues to be fixed.

A wide range of expertise is required

To implement a PWA it is necessary to have expert knowledge of different aspects of web development. Backend knowledge and regular responsive design experience alone would not be enough. It's mandatory to have advanced knowledge of frontend development (primarily JavaScript). UI/UX knowledge to deliver great interfaces and user experience. And DevOps and Security abilities are needed to publish and update the application with minimal risks.

While one developer might have the knowledge and experience in all those different scopes, the most recommended is to find a team of specialized professionals in each area and technology. That elevates the quality of the implementation, but it can also mean higher costs and longer developing times, though it doesn't have to.

iOS limitations

As we have mentioned earlier, iOS support for PWA is rising. But the limitations on devices with this operating system may still be impactful for certain businesses. If most of your market target involves iOS devices, it's best not to choose PWA as the solution.

Summary

Since 2015 we have observed constant growth of PWA popularity. Some companies have certainly increased traffic and conversion rates of their online stores by implementing PWA.

Before deciding to implement PWA, each business owner needs to assess the needs and weaknesses of the current solution carefully. Does your business model require PWA? Can you fix the problems with your website without implementing PWA? You should think it over very carefully and maybe go for a simpler and cheaper solution.

Will PWA become a widely accepted and expected standard as Responsive Web Design is today? Many PWA frameworks and solutions are not stable or mature yet, but they are improving every year, and new players appear on the market. Certainly, the PWA topic will continue to receive a lot of attention, and it’s worth keeping an eye on it, but at the same time not getting caught up in the PWA hype. 

• PWA