What should you anticipate when investing in a Progressive Web App (PWA)?

A PWA or progressive web app, can and has been defined in many ways; they are a sort of hybrid of regular websites and mobile apps, built using web technologies that act and feel like a native app. However, it’s important to understand that PWAs are not a direct alternative to native app. The clue is in the name itself, “Progressive” by definition means to “happen or develop gradually or in stages”. With a PWA, you are constantly developing and improving your website for a particular use, which in this case is the user experience on a mobile device.

We recently completed a large-scale PWA project for a household name brand. The project started its specification phase in the summer of 2020 and launched earlier this year. The aim was to create a platform-agnostic, omnichannel application. With any project of this scale, there are always growing pains. Our Head of Development and Associate Director Chris McCarthy Stott takes us through some of the trials that we overcame, that you may not originally consider when investing in a PWA.

Infrastructure

One of the great things about working with Magento is the infrastructure behind it; the Adobe team, 3rd party vendors and the thousands of developers using the platform.

As it stands, you’re sacrificing a bit of this support network when starting a PWA Studio project. Whilst this isn’t a PWA only phenomenon, there is a lack of documentation and although this has improved over the past 12 months, your team is going to have to learn by doing. In a similar vein, because PWA Studio is relatively underutilized, you’re not going to find tons of answers over on stack overflow.

In addition to this, most 3rd party module developers haven’t built their modules to be PWA ready yet, due to what we assume is a lack of demand. Although this demand is growing, you may find that in reality, a vendor who claims to support PWA actually has a GraphQL endpoint or they’ve built a limited subset of features for PWA.

SEO

If you’ve got an SEO team who enjoy a simple life, they are going to genuinely hate you, as things they take for granted, they’ll need to start questioning. What exactly do we mean by this?

• Browsers need Java Script to view your website, but crawlers tend not to run Java Script. Therefore, your site can’t be indexed.
• PWA studio will return a 200 for a 404, so if it were to be indexed – you’d get an infinite amount of 404s indexed.
• If at any point a crawler was running Java Script and was able to index your page – It wouldn’t find any content that requires an interaction to view, as it’s not in the DOM. For instance, content in an accordion such as your product description.

You will also be required to introduce a server-side rendering platform, which is essentially another cache that builds a fully rendered version of your page. This will allow you to route certain user agents to that particular version.

Fortunately, most problems can be solved, they just require a little more hard work.

The product

There is a large functional gap between Magento capability and PWA Studio:

At the point we started the project, PWA Studios had a very limited subset of Magento’s features. Therefore, we had to be careful not to overpromise stakeholders and end up delivering custom functionality that we knew Adobe were working on for 2021/2022. This is 100% still the case, so unless there is a functional gap you desperately need to cover. I’d recommend waiting till certain things are implemented by Adobe.

Some areas are unfinished:

There are areas where Adobe has gotten the platform to MVP, but I’d argue are unfinished and you’re going to have to bite the bullet and finish them yourselves. For example, Venia lacks the most basic schema.

Elements are not maintained:

Somewhat frustratingly, there are areas that have been developed but have not been maintained. The biggest example of this on our project was that the Braintree NPM package hadn’t been updated since its introduction and didn’t support 3DS. Therefore, you’re going to need to put your QA team on alert to think of things that you probably shouldn’t have to.

Do not upgrade, but also upgrade:

Finally, one of the biggest pieces of cognitive dissonance we encountered, was whether we should keep updating PWA studio when Adobe released a new version.

Adobe – to their credit – are powering through new features to keep developers quiet. But it does mean that upgrading mid-project is a large job, as the code base is changing in areas quite radically. So you want the new features, but you don’t want the headache of integrating your code.

Recruitment:

When starting out on our PWA journey, we had two problems.
1. We had very little react experience in the team.
2. We have no experience with the platform.

We overcame this initial challenge in two ways. First, we spent time upskilling our team through online training courses and setting small real-world tasks in react. Secondly, by hiring someone to join the team who was already a react specialist.

We found that recruiting for a react specialist is difficult as salary expectations are extremely high for relatively little commercial experience. Therefore, we decided to focus the bulk of our effort on upskilling the existing team.

So why bother with a PWA?

They are incredibly fast:

PWAs are incredibly fast. You can make your website a speed demon, giving you a clear advantage over your competition. According to Google, over half of customers will abandon a website after just 3 seconds of loading. So, speed should be your number 1 priority and PWAs provide that.

They excel at customer experience:

PWAs help to improve customer experience and reduce bounce rates. They load immediately, respond instantly to customer interactions and are rich with UI on all devices.
These benefits lead to higher levels of customer engagement and overall performance, increasing conversion rate and revenue growth. Google reports that the average PWA increases conversions by 52%.

They open up communication:

PWAs offer new ways to regain and maintain engagement. One such way is Push notifications. You can use them for a range of purposes, such as displaying alerts for flash sales, restocked products, or delivery updates.

Google reports that almost 60% of users are allowing PWAs to send them notifications, which significantly increases opportunities to promote products or services.

PWA’s are available to download within the google play store on android devices, meaning users are able to search and download a PWA the same way they would with a native app. Although this isn’t available on Apple devices.

If a user visits your website within their browser on an android device, they will receive a notification to download the PWA within the play store. Again, Apple does not yet offer the same functionality.

Summary

As well as the technical benefits, consumer behaviour is changing. Users are spending twice the amount of time on mobile, compared to desktop. It’s businesses that have the fluidity to adapt to the change in demands that are rapidly scaling.

In conclusion, the problems PWA’s pose aren’t insurmountable, they just add an additional layer of complexity to your platform and will diminish as the product and ecosystem catchup. To learn more about how PushON can help you develop your PWA, contact us today.