Expert POV: A Developer’s Take on Building a Progressive Web App

Mobify’s Expert POV series is a collection of thoughts and opinions from retail and technology leaders across industries. Evans Hunt and Mobify recently built the Tommy Bahama Progressive Web App together. We sat down with Evans Hunt technology lead, David Wieler, to ask how it went.

What is a Progressive Web App for those who don’t know?

A Progressive Web App (PWA) is hybrid of the web and native apps. Like a website, you don’t have to download it from an app store, but it looks, feels, and functions like an app.

What are the benefits of PWAs for the end user?

If you’ve ever tried to buy something on an average website on your phone you know what happens – you either end up abandoning your cart, never to return, or you struggle through, but decide to buy it on Amazon.com next time.

The features of Progressive Web Apps solve the majority of these problems:

  1. Offline mode

With offline mode, any information can be saved automatically from the previous online access. The offline page can be complete with a brand logo, and there even can be some advanced features. For example, customers in offline mode can browse the product catalogs still.

  1. App-like UX

PWAs are designed like mobile apps, while still retaining the full functionality of websites with dynamic data and database access. Get more UX best practices here

  1. Improved performance

Progressive Web Apps are faster due to the way the underlying technology caches and serves text, stylesheets, images, and other content on the websites. Revenue and retention rates benefit from the improved performance.

  1. Zero install

When users install PWAs, there are no long download times, and visitors are not routed through Google Play or the App Store. This means that the PWA gets its own icon, just like an app, but without the need to go through the App Store submission process.

  1. Push notifications

Publishers and developers have full control over how to implement features like push notifications, allowing for creative solutions with regards to engagement. For ecommerce marketers, this means a new channel for sales.

What’s the difference between building a PWA and building a regular website?

Building a PWA requires a different thought process than a traditional website. You need to be confident that things like service workers and web push notifications are set up correctly. You also need to take into account the varying levels of support on different browsers.  

However, if you invest the time to do it properly, a PWA is going to be a 100% better experience for the end user, especially on mobile. It will be faster to load, easier to use, more interactive, and have better accessibility features right off the bat.

What was it like building a Progressive Web App with Mobify?

This was my fifth PWA build with Mobify, but my first with the new React PWA software development kit. The Mobify crew is great to work with, very knowledgeable and an incredible partner to rely on.

Because of the way the Mobify software development kit (SDK) is built, there are a ton of components that you simply drop in and modify. You don’t have to build everything from scratch, which is really handy when you’re building something with React. The fact that the majority of the largest components you’ll need are there to begin with cuts days – if not weeks – off project time.

There’s also code-splitting, which is set-up so that when the user visits your PWA, it only downloads what it needs, and thereby increases performance. On top of that, you shave weeks off set-up time with an SDK. We’re talking complete project set-up reduced to a couple of hours, compared to 2-3 weeks.

Do retailers need to make a lot of changes to their site before launching a PWA?

If they’re using the Mobify SDK, they shouldn’t have to change anything, because all the integrations are done with APIs.

What are the benefits of APIs?

The biggest benefit is the speed to load. When you’re scraping a page for data you have to load the entire page and pull out pieces that you want. With an API you can request the information you want on an ad hoc basis, which is 2-3x faster. Plus, it has the added benefit of being stateless, meaning it’s essentially never going to change and there is one source of truth for the data.

With older technology, we scrape pages, so mobile loads the original desktop site then parses it. With Integration Manager, Mobify’s ecommerce platform API, you don’t load and scrape – all you do is go through the integration manager, send the request to the API, and the API returns only the relevant information.

What advice would you give to a developer who’s thinking about building a PWA from scratch?

Building a static retail website is difficult – adding a PWA on top of that is crazy. If you don’t know React, you’re looking at months to make something useable, let alone customer-ready.

Of course, doing it from scratch will be an incredible learning experience. However, your development time will be so slow that you’re not only going to waste money, you’ll miss out on months of additional revenue while you fumble.

Would you recommend that anyone on responsive moves to a PWA, or are there still cases for responsive?

Responsive has a place – but it’s about the view, whereas Progressive Web Apps are about functionality. For ecommerce, responsive is definitely not going to convert like you want it to. Ideally, you would build a PWA that’s also responsive.

If you had a plan to convert to a PWA across mobile and desktop, but you started with mobile, do you think it’s worth the pain of temporarily maintaining two codebases?

Absolutely. Faster load times result in more checkouts being completed, so it’s definitely worth it as a stepping stone. You can fund your desktop PWA with the extra revenue from your mobile PWA.

Developers are aware of the technical debt they are already in and don’t want to add more management work to it by having separate codebases, but the benefit of having separate codebases is that you don’t need to fix something that isn’t broken. You can make changes on mobile without fear of breaking something on the backend that would hurt your existing revenue stream.

David Wieler, Technology Lead, Evan’s Hunt

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of

Subscribe to the Mobify Insights Blog

Stay in the know on the latest in mobile commerce so you can effectively engage your customers and drive revenue.