Progressive Web Apps: your complete guide

What are Progressive Web Apps?

If you’re keeping up to date with the latest in web technology, you’ve heard the term Progressive Web Application (PWA). There are a few different ways it’s defined. The most simple: a web application that’s designed to work well across a range of devices and network conditions. 

It doesn’t matter if someone’s using a computer, phone or tablet. A PWA should work equally well for any of them. Additionally, it should be able to handle slow internet connections and even display some information when there’s no internet connection at all.

They’re being heavily promoted by Google, Microsoft, and Mozilla. Apple is following suit but less enthusiastically. As part of the promotion efforts, Microsoft created a list of characteristics a PWA should have:

• Discoverable – the long-term goal is to make web apps easier for search engines to work with. When configured properly (we’ll explain it, don’t worry), search engines can crawl and rank your app’s pages. This translates as more traffic to your site.
• Installable – to be considered a PWA, users have to be able to install your app. Getting your app’s icon on their home screen is a must-have feature. It’s useful as customers are more likely to become frequent visitors if they constantly see your app icon on their home screen. It provides an experience that’s very similar to a native app. 
  You can also install them on other devices and get a native experience too. This means your app is displayed in a separate window rather than a browser. Oh, and it gives you access to keyboard shortcuts!
• Re-engageable – this is the ability to update content in your app even when the customer doesn’t have it open. Even more powerful, it adds support for push notifications. We discuss how to harness their power in our ‘Growing your business with push notifications’ guide.
• Network Independent – reusable assets are downloaded at the first visit. This speeds up load time for future visits. If a user tries to connect without any internet, they’ll still receive some useful information rather than a blank screen. Home screens that support an offline mode can drastically lower your bounce rate as users realise what’s happening and will try again later.
• Progressive – different browsers support different features. PWAs plan for this. They’ll start with a barebones version that any browser can run. Then, they’ll build extra functionality on top of this. Newer browsers will deliver a more polished experience, but the basic functionality will be available for all users.
• Safe – as HTTPS is being used, you know you’re getting a tamper-proof connection. You’re also protected from scammers trying to trick people with a knockoff app. Your PWA will exist at the same URL as your current website. This is a great way to reassure customers that they’re in the right place.
• Responsive – between mobiles, tablets, laptops and computers there are a lot of screen sizes. Making use of responsive web technologies is a key part of a PWA. Your app should look and function well regardless of the device it’s viewed on.
• Linkable –PWAs need to be shareable with a direct link that can be opened by anyone. Instantly. It’s not a link to an app store listing that you have to download. The website functions as an app.
  

It’s important to note that any website can become a Progressive Web App. It doesn’t use a specific technology stack. 

TIP: Any website can become a PWA

It’s largely a design philosophy you can use to incrementally improve the usability of your website.

Progressive Web Apps features

That being said, according to Mozilla there are 3 technical features required to distinguish your Progressive Web App from a conventional Web App: HTTPS, Service Workers and a Manifest File.

1. HTTPS

Hypertext Transfer Protocol Secure – the evolution of HTTP. It’s something that most modern websites will have. Sites that don’t are flagged by Google Chrome as ‘Not secure’, which is a great way to put people off visiting your site. 

When this warning was first added in 2018 there were a lot of people slow to get on board. Nowadays, it’s rare to find a site that hasn’t added support. Not only does it make your site safer, but it also affects its ranking in the SERPs (Search Engine Result Pages).

2. Service Worker

Your website is always on. The Service Worker is a script that only runs when completing tasks. It’s a separate javascript file that gives a PWA developer the ability to manage network requests and control caching. 

Caching is all about how files are stored on the users’ device. It lets the developer store key files that enable PWAs to be blazing fast. It’s also the magic behind offline support. There are a variety of approaches available. One common one is to instantly load an unpopulated application shell from the cache. If there’s no internet connection – no problem. The user isn’t left wondering what’s going on. They can see the partially loaded outline and a message lets them know they’re offline. Depending on the app, it’s possible to make it 100% downloadable.

If there’s a connection, but it’s slow, the cached application shell is still useful. It makes the load time seem much faster as users see something is happening. As more information is downloaded the various parts of the shell are filled in with up to date content.

3. A Web App Manifest

This is the piece of the puzzle that makes your PWA installable and discoverable. Without this file, search engines don’t know what your PWA does. It’s basically a description of how your app should look and behave on a users’ device. It’s a JSON file that includes information such as PWA name, author, icon, description of the PWA, and what’s required to run it.

How to build Progressive Web Apps

Now you know what’s required for a website to count as a PWA. Let’s take a look at how you can upgrade your site to meet these requirements.  Oh, and if this seems too complex, don’t worry. We have a no-code solution that we’ll share near the end of the guide.

 Progressive Web Apps tutorial

• Https – If for some reason your website isn’t yet using HTTPS, get with the times. The process varies depending on your hosting service. Contact them and they’ll be able to guide you through the process.
• Configure Service Worker –Adding a service worker to your site requires a little technical know-how, but it’s not super complex. Google has written a good tutorial that explains everything.
• Manifest – If you want to get into the technical details then check out this article by Google at web.dev.

Once you meet the technical requirements, your PWA isn’t finished. Optimising it is an ongoing journey. Luckily, Google has made this easier too. They released a tool in Chrome that lets you audit any PWA and see its score out of 100. It gives you specific advice about areas you can improve. 

Opening the developer tools is easy. In the Chrome browser, click the overflow menu (3 stacked dots), ‘More tools’, and then ‘Developer tools’.

TIP: Open developer tools like a pro

Use the keyboard shortcut Ctrl + Shift + I

If you’re serious about building your own app why not check out our guide: Learn how to build an app: advice from a master builder.

5 Progressive Web Apps examples

The technical details can be a bit overwhelming. Let’s give your brain a short break by looking at 5 examples of companies doing PWAs right.

Twitter Lite

This is the poster boy for PWAs. From Twitter, “Twitter Lite is fast and responsive, uses less data, takes up less storage space, and supports push notifications and offline use in modern browsers.” That sounds like a win. 

For the geeks out there:

• Reduced load times by 30%
• Lowered image data usage by up to 40%
• Their PWA is 1-3% the size of their native app

Starbucks

The coffee shop that everyone knows uses a PWA. In their own words, it offers a “great, fast, integrated, reliable and engaging experience“. The goal of the app was to make use of the limited connectivity abilities of a PWA. 

To say it was a success is an understatement. When they went live they “doubled their daily active monthly users”. The app-like feel of the website isn’t only appreciated by mobile users. They found that desktop users are ordering at a similar rate.

Google

Yup, the search engine is a simple PWA. It offers a data conscious user experience and supports some offline features. Things like saving your search query and retrying when a connection is restored. This means it’s accessible for people around the world as data constraints aren’t such a large issue. With an estimated 5.8 billion searches per day – it’s safe to say they’re doing something right. (source: HubSpot)

Uber

The Uber PWA was built to give them access to new markets. Having a great taxi app is pointless if potential customers can’t use it due to connectivity issues. Not only that, they wanted to be able to target older devices – remember PWAs are progressive. This meant developing a core offering that could run on the most basic of mobile devices.

How’d it work out for them? Uber said, “the core ride request app comes in at just 50kB, enabling the app to load quickly even on 2G networks.” Further proof it’s a success is that they’ve replaced their native Windows app with their PWA. They’ve decided it’s better for the overall user experience and the number of app installs.

Tinder Online

The goal was to make a much smaller version of Tinder that would help them break into new markets. They succeeded. Google’s Addy Osmani found that their PWA is more than 90% smaller than their native app. Not only that, key metrics are higher with the PWA versus a native app: users’ session time, swipes, messages and purchases were larger.

Progressive Web Apps vs native apps

They’re supported by some big tech names and we’ve praised them pretty hard. So, does your business need a PWA?

Short answer. No.

At first glance, it appears that PWAs offer the best of both worlds: you get all the features of native apps with the flexibility of the web. A conventional app needs to be downloaded from the app store. PWAs are different. They don’t need to be bundled separately for iOS & Android. And they don’t need to be distributed as a conventional app would – you can visit the website and the PWA is accessed immediately.

But it’s not quite as amazing as it first seems. There are pros and cons to everything. PWAs are great for web users as they make a lot of native app functionality available at a much smaller size. The size isn’t really an issue with modern-day smartphones – most users will have plenty of space for their apps. And don’t forget, nothing is stopping native apps from being lightweight. The reason they’re often larger is that feature-rich apps are more useful.

PWAs try to replicate these features, but they can’t. They don’t have access to many of the device features that are available via native. One glaring omission is push notifications – the almost magical conversion rate booster. It’s one of the most common app features but only some browsers support PWAs using them:

• Google Chrome – fully supported.
• Firefox – fully supported.
• Microsoft Edge – fully supported.
• Safari – not supported and no indication it’s coming soon.
  

Safari is Apple’s browser for all iOS devices. According to StatCounter, 18.43% of internet users in 2021 are using Safari. Let’s put that in perspective. Statista found there are 4.66 billion active internet users worldwide. That means that by not having a native app you’re losing direct access to a market of almost 860 million people.

It’s worth stressing that push notifications are a pretty standard feature. If one of the big 4 browsers isn’t supporting them, how many less common device features are unsupported?

Building your app

If you’re thinking about an app and are technically minded it’s worth considering adding some PWA functionality to your website. Just remember, you’ll be continually working around limitations and there’s no guarantee you’ll have access to the features you want. 

Instead, we’d recommend working with us. We make it easy to bring your app idea to life. There are a few different options depending on your needs. Oh, and you don’t need any coding skills – we handle all the tech stuff. Our Studio Store apps are the quick start choice. Unless you’ve got some very niche requirements we recommend having a look here first.
We’ve created Studio Store apps for a lot of business needs - food delivery, gym and e-learning apps to name a few. Each app is designed so it’s easy for you to add your branding and personal touch. If you go down this route, you get Web, Android and iOS apps that run super fast.

One notable mention is our free ecommerce app. It comes with everything you need to start selling online. It allows you to process 50 orders for free each month. This gives you a risk-free method of testing out our service. 

If none of those apps are what you’re looking for, then pop over to Builder Studio. This is where we bring any app idea to life. One of the great things about our method is that we have lots of Lego-like blocks already built. Our AI can use these to quickly create bespoke apps with complex features. It also means we can give you an accurate quote. Unlike some of our competitors: the price we say is the price you pay!

Still set on a PWA? It’s worth remembering that although Twitter Lite is very successful, the majority of Twitter’s users are on a native app. This tells you a lot. A PWA is nice to have but not as important as a native app. Want to learn exactly why you need an app? Check out ‘Mobile apps for small business - the complete guide’.

Final thoughts

You now understand what makes a PWA (Progressive Web App) and why people are so excited about them. Knowing their key parts and the technical features let you decide if it’s the right choice for your business. 

You’re ready to begin the process of upgrading your site to a PWA. Alternatively, pick the easy option and trust us to bring your app idea to life. Whichever option you choose, good luck!

FAQs

1. Why are PWAs so fast?

PWAs use a Service Worker to store key files on the users’ device. This enables PWAs to be blazing fast as the important files are loaded instantly instead of being downloaded.

2. Are PWAs safe?

They’re very safe as they make use of Hypertext Transfer Protocol Secure (HTTPS). This means all traffic through the PWA is encrypted.

3. Who’s using PWAs?

Lots of big names have a PWA. Some popular examples are Twitter, Starbucks, Google, Uber, Tinder and Spotify. Keep in mind, these companies get the majority of their traffic through native apps. Their PWA is an additional traffic channel for them.

4. Is there a no-code way to build a PWA?

Our Studio Store apps are pre-packaged and need no technical skills to set up. They deliver all the features you need to grow your business. We provide hosting and help get you set up in the app markets. Oh, and we pride ourselves on accurate pricing and quick turnaround times! 

If you need something more complex, check out Builder Studio. It’s where we bring any app idea to life.