Your guide to integrating PWA technology to your mobile marketing strategy

PWA Marketing

PWA Marketing

Mobile has come a long way in the last decade. Remember when you had just a couple of native mobile apps on your phone? Now, you probably have closer to 40. So what’s the problem here? Well, as consumers become more reliant on their mobile devices, the more apps they are going to want to use. This becomes a problem for native mobile apps because they typically require a lot of storage space. So then consumers have to become selective with what brands’ mobile apps they save on their home screen. What’s the solution here? Building a Progressive Web App (PWA). PWAs are web apps that can integrate with native hardware on the user’s device (think: camera, gyroscope, etc.) for a truly native experience. And, they can easily be installed to the home screen for easy re-access, without having to go through an app store. 

PWA marketing has become the newest mobile marketing trend for several reasons. PWA development is not only significantly cheaper than traditional native mobile app development, but it’s also less of a headache - ‘Progressive Web Apps iOS’ is not a relevant search because, with PWAs, you don’t have to develop the experience separately for Android and iOS. If you are curious to learn more about what goes into making a PWA, check out the guide on Progressive Web Apps Google released. This Google PWA checklist will give you a better idea to what the technical requirements are with this technology. This wouldn’t be a proper Progressive Web Apps Tutorial without covering some of the best Progressive Web Apps. Twitter, Forbes, and West Elm all have converted to Team PWA recently. And spoiler alert, since PWAs are web experiences, smartphones aren’t the only way of accessing them. PWA desktop accessibility is a real thing There’s a guide to accessing Chrome Progressive Web Apps you can check out here. Accessing a PWA on your computer will be the easiest thing you do all day. 

PWA vs Native Mobile App

In case we haven’t made ourselves clear, the winner in the PWA vs native mobile app debate is obvious. PWAs take home the gold. Yes, there are some PWA disadvantages (like limited PWA browser support), but native mobile apps have significantly more downsides. Native mobile apps are simply not being downloaded by consumers anymore. So why put in the monumental effort that goes into building a native mobile app when no one is going to download it anyway? Plus, if you want both Android and iOS users to be able to access your mobile experience, you’ll need to develop separately for each operating system. Native mobile apps also have to be downloaded through the app store, and let’s just say the app store hasn’t made a lot of friends during its time here. Trust us, we’re not being too harsh on the app store. First, if you want to get your app in the app store, make sure you carve out several hours to read Apple’s App Store guidelines...the list is pretty long. And once you make it through the review process, you’re still not in the clear. Because app developers don’t own a spot in the app store, they can be removed at any time. Do you know what you can own? Your PWA experience. 

Let’s get back to the PWA browser issue. Yes, there are some browsers that still do not support PWAs, but this is becoming a non-issue as more web browsers support PWAs. For example, there is now Firefox PWA desktop support. And while we’re clearing the air, there is no such thing as a PWA download. You would never say you were going to download a website. Well, the same applies to PWAs. PWAs are web experiences. PWAs are accessed, not downloaded. In fact, PWAs can be accessed in a variety of ways. You can text, scan, link, or tap to access a PWA. 

PWA Example

When people first hear about PWAs, their first reaction is to say they have never encountered a PWA example in the wild. Well, we’re here to debunk that myth folks. We’re sure you’ve come across the many PWAs examples 2020 has to offer. The examples of Progressive Web Apps are never-ending. Let’s explore the PWA list of examples. The Starbucks Progressive Web App is one of our favorites to talk about. The Starbucks PWA even won our 2018 PWA Bracket Challenge a few years back. The reason why we love this example so much is because it’s fun to compare this mobile experience with its native mobile app counterpart as many consumers already have the Starbucks native app on their mobile phones. So, a fun party trick is to have your friends download the Starbucks PWA and compare its speed with the Starbucks native mobile app. We think you can guess who will win that race. The PWA performance takes home the gold. Adding to the Progressive Web App examples discussed in this PWA tutorial for beginners is the Pinterest PWA. Did you know we even spoke to the very person responsible for building this PWA, Zach Argyle? Check out his podcast episode here.

But let’s not confuse a PWA with a web app. We’ve written several articles explaining the difference between the two. But while we’re here, some web app examples are email clients that you’ve most likely used in your career. Some of the best examples of web apps are the ever-popular Google Drive products, specifically Google Docs. Ready to start your own PWA and hopefully get featured in the best of the best mobile web app examples? Check out some PWA example project here. You won’t find this one on the PWA examples Github page. And the best part about building a PWA on the Lumvate platform? You won’t have to search for ‘PWA examples code’ when building your first PWA, the Lumavate platform is no code. We’ve got plenty of PWA templates to get you started fast. 

PWA Tutorial

Looking for a PWA tutorial for beginners? You’ve come to the right place. Yes, there probably is a Google PWA tutorial or a PWA Tutorial Github, but these aren’t made specifically for marketers. If you’re looking for a simple PWA tutorial, Lumavate has a PWA tutorial PDF called, A Marketer’s Guide to Progressive Web Apps, that you should read. Marketers are not software developers. So marketers probably won’t be interested in a PWA tutorial from scratch, or reading a PWA tutorial React. You need a PWA tutorial that’s going to explain the benefits of PWAs and how they directly impact marketing. In our PWA guide, you’ll discover what makes a PWA, the befits of switching to a PWA, and some of the best examples of brands using PWAs. You’ll be shocked at the success some of these global brands had when they switched to a PWA. And we didn’t just put out one guide. Lumavate’s blog has hundreds of articles dedicated to explaining the buzz around PWAs. Check it out for yourself here

Progressive Web App Framework

We know many of you reading this are not developers. In fact, you’re probably a marketer (after all Lumavate is the leading no code platform designed specifically for marketers). So we’re not going to get too technical when we talk about Progressive Web App framework. But we do think it’s important to discuss some PWA features and the Google PWA list of technical requirements are so you can understand its magic. Let’s discuss the PWA checklist from Google, first. There are technically fourteen requirements for PWAs, but there are four main ones - service workers, web app manifest, app shell, and HTTPs. The service workes is the thing that essentially gives the PWA framework its magic - The service worker is responsible for caching data and enabling app-like features (like push notifications and offline access). When we talk about PWA performance metrics, the service worker is also the thing that makes the PWA faster with each use. The reason why you don’t have to search for ‘PWA iOS’ is due to the fact that PWAs are served over web pages, thanks to HTTPS. The web app manifest is what gives the PWA it’s app-like feeling. So even though you’re not using a native mobile app, it will still feel like it when you get PWA push notifications. Finally, the application shell is the last main technical requirement we’re going to discuss from the Google PWA apps checklist. The application shell is responsible for the design elements that stay put (think navigation bar or drop-down menu). When you go to build a PWA, you can use a Progressive Web Apps React open-source software. Building a React PWA is popular because it’s a good starting point for building your mobile experience as React is an open-source community of developers. Lumavate takes the open-source concept and applies it to the Lumavate Library so users have numerous components to choose from when building their PWA. Interest in other PWA 2020 features? Check out our State of PWAs: Q1 2021 infographic. 

See Lumavate in Action

Meet with one of our experts to see how easy it is to centralize your product data, manage digital assets, and create digital product experiences. Trust us…you’re going to be wowed.