What is a progressive web app (PWA)? Why would you want one?

It’s been years since the beginning of the age of the smartphone. With it came the era of native apps. Apps continue to play a massive role in our daily life, and many business owners have asked themselves multiple times: should we have an app? Of course, the only answer to that is — it depends. Building and maintaining a native app is cumbersome and often quite expensive. Luckily, there is another option. This option combines the joys of a native app with the technology we use on the web: the progressive web app, a.k.a. PWA.

What is a PWA?

PWA stands for a progressive web app. This is an app built from the web technologies we all know and love, like HTML, CSS, and JavaScript, but with a feel and functionality that rivals an actual native app. Thanks to a couple of smart additions, you can turn almost any website into a progressive web app. This means that you can build a PWA rather quickly, in regards to a native app that’s pretty difficult to develop. Plus, you can offer all the features of native apps, like push notifications, offline support, and much more.

Many sites you find online are actually a progressive web app. Take twitter.com, for instance. If you visit that site on your smartphone, you can install it on your home screen. Now, on opening the saved Twitter site, you’ll notice that it looks and performs just like a native app. There’s no browser window or anything. There’s no difference in running it from an iPhone or an Android smartphone. Simply log in and you’re good to go. That’s a major benefit of building your web app with a PWA in mind.

PWAs are gaining popularity. Many big sites are PWAs, like Starbucks.com, Pinterest.com, Washingtonpost.com, and Uber.com are actually installable on your home screen and offer a comparable experience to their native apps.

Joost discussed PWAs with SEO expert Cindy Krum in the Yoast SEO Podcast.

What’s the difference between a native app and a PWA?

A native app, like the ones you download from Apple’s App Store or Google’s Play Store, is often built in a programming language specific to that platform. So for iOS apps, that would be Swift and for Android apps, Java. If you want to build an app for those platforms, you need to know the technology. Yes, there are shortcuts, but these come with their own limitations. If you want to have an app on all the mobile platforms, you need to know all the different technologies. There’s no easy way to build one and publish it to all the stores out there.

Of course, there are ways to get the best of both worlds. A progressive web app, for instance. This runs in the browser and — once saved to the home screen — functions like a native app. It even gets access to the underlying hardware and software that the browser can’t access for safety reasons. If the PWA performs great, users will never know that they are using a web-based app instead of a native one.

There are some caveats, of course. While browsers have been quick to adopt the technology for this, there are still some limitations. On iOS, the technology needed works spotty in Safari. Apple doesn’t (want to) support everything yet, making it a bit of a chore to get the same exact experience everywhere.

What are the benefits of a PWA?

The main reason why everyone is chasing after apps is because they offer greater engagement. Users who install your app are your biggest fans and they are more likely to turn their usage into sales or signups. Thanks to push notifications it’s much easier to re-engage with users. Apps can offer an excellent experience that can do well for a brand.

We talked about some of the plusses of PWAs in this article, but here’s a short overview:

• You don’t have to go through the process to get into different app stores
• You can build PWAs with common web technologies
• They are often cheaper to build
• Since you’re turning your site into an app, you’ll have fewer code-bases to maintain
• PWAs are responsive and work with many different screen sizes
• PWAs are smooth, fast and lightweight
• No need to hand off big chunks of money to Google and Apple
• They work offline, unlike your regular site
• PWAs are discoverable via search engines (which have a lot larger audience than app stores. Plus, if you want you can still get your PWAs distributed via app stores)
• You can use push notifications to re-engage users
• Installing a PWA can lead to higher engagement

Still, native apps win out sometimes. PWAs get deeper and deeper access to the operating system of a smartphone, but a native app can go deeper still. Plus, there are limits to what a PWA can do. For instance, PWAs are not the best choice when you want to build high-performance games.

All in all, it makes a lot of sense to think about having a PWA in your mobile strategy. But, the main question you should ask yourself is: does my audience want this?

Who’s this for?

Should everyone simply build a PWA and be done with it? No, consider your business and — more importantly — your target audience. Are they even using apps? Isn’t this an overly complex way of getting to what you want to achieve? Again, like everything, you need to research the needs of your audience. Ask yourself, what do you want this technology to do? Where are your users? Do they have a good data connection and solid hardware? How and where are they using your content? And do you think an app can help them do their job better?

PWAs are awesome and implementing them doesn’t have to be all that hard. But just because it’s easy doesn’t mean you should do it. If your audience has no need for it, why would you build one?

What are the SEO concerns of a PWA?

The PWA is inherently web-centric. It was born from the web and developed with search engines in mind to make discovery easy. Of course, you can make a progressive web app out of any-old site and it doesn’t take much to do so. However, many PWAs use JavaScript to build more complex functionality and while search engines have become apt at rendering JavaScript, it can still be a cause for concern.

When setting up a PWA, you have to make sure your JavaScript is accessible. Don’t block files for bots and make sure that links are available. To improve the rendering process you can make your JavaScript framework use server-side rendering.

Turning your site into a PWA doesn’t mean you directly improve the SEO of that site. If it makes sense to turn your site into a PWA, do so, but don’t do it for any perceived SEO benefits. If you have a great PWA, you are offering your users a fantastic user experience, which might make you one-up your competition. In this regard, it’s a good idea to take a look at them for your mobile SEO strategy.

What are the three main building blocks?

It doesn’t take much to set up a PWA. There are three things you need to provide before your site turns into a valid PWA.

• A secure connection (HTTPS): PWAs only work on trusted connections, you have to serve them over a secure connection. This is not only for security reasons, but it’s also a very important trust factor for users.
• A service worker: A service worker is a piece of script that runs in the background. This helps you determine how to handle network requests for your PWA, making it possible to do more complex work.
• The manifest file: This JSON file contains information on how your PWA should appear and function. Here, you determine the name, description, icons, colors, et cetera.

Here’s a sample manifest from Google:

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "description": "Weather forecast information",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

It doesn’t look too hard, right? A couple of interesting things in this listing:

• start-url: this determines where your app should start. It’s better to let users land on a specific page for you PWA.
• display: this helps you determine what type of browser UI you want to show. Options are fullscreen, standalone, minimal-ui and the standard browser interface.

These three things listed above are the minimal requirements for running a PWA. You can expand the functionality via JavaScript (frameworks).

How to set up a PWA?

There are plenty of resources to try your hand at building a simple PWA. This allows you to get a feel for the process. Google has an excellent, easy to follow tutorial on PWAS on the web.dev site. Mozilla has lots of documentation on building progressive web apps. Microsoft also has rich developer docs on building PWAs. Microsoft even built a tool called PWABuilder that’ll help you turn your site into a PWA. Of course, there are WordPress plugins that help you make a PWA of your site. In addition, Google is working on bringing base-support for PWAs to WordPress Core.

Engage your users with a progressive web app

Progressive web apps can be a great addition to your mobile toolkit. Done well, they are fast, work offline and perform like a native app. All in all, they can offer your users an awesome user experience. Engaged users are happy users, right?