App development can be a long and winding process that involves a wide spectrum of decisions.

Should you develop an app for Android, iOS, or both? 

Should you create your app from scratch or use a generic web builder?

Fortunately, today’s technology in mobile app development offers solutions to help navigate and ameliorate this process.

Such as a progressive web app, or PWA, which is a popular way in which you can develop a mobile app that functions on just a web browser and comes with some added features to ease the development process.

In this article, we’ll take you through the world of progressive app development, how it can benefit your project, and how to build your own.

Table of Contents

1. Progressive Web Apps Defined
2. Benefits of PWAs
3. PWA vs Native
4. How to Create a Progressive Web App
5. Use SSL
6. Create an Application Shell
7. Register a Service Worker
8. Add a Web App Manifest
9. Setup the Install Prompt
10. Analyze Performance
11. Lighthouse for Auditing Your App
12. Companies Using PWAs
13. Starbucks
14. Uber
15. Pinterest

Chapter #1: Progressive Web Apps Defined

A Progressive Web App (PWA) is a type of web application that uses modern web technologies to provide a user experience similar to that of a native mobile app.

PWAs can be accessed through a web browser on any device and platform, including desktop, mobile, and tablet.

They’re designed to be fast, reliable, and engaging, with features like offline mode, push notifications, and installation to the home screen.

They’re also secure and can be served over HTTPS to prevent data tampering and ensure user privacy.

In short, a Progressive Web App combines the benefits of both native mobile apps and traditional websites, providing a seamless user experience across all devices and platforms.

1.1 Benefits of PWAs

Let’s take a closer look at a few of the benefits of PWAs so you can start to see how it differs from other types of mobile apps.

Photo Credit: dzone.com

Available offline

While websites and apps aren’t typically available offline, PWAs are. Despite PWAs being a hybrid of web and mobile app technology, a great benefit is that it’s available for offline use.

Mobile-like behavior

Progressive web apps get the best of both worlds. They receive the benefits of website functionality, like database access and dynamic data, but they also look and feel just like a native mobile app. 

Current UX and UI frameworks allow for PWAs to accomplish this, which gives them a much better mobile experience than mobile websites. Additionally, PWAs are still indexed by search engines like Google, which can help boost the app’s exposure.

Easy installation

A progressive mobile app can be installed right onto a device from either a website or app store. Just keep in mind that not all app stores allow for progressive app distribution. Currently, you can download PWAs from Google Play but not Apple’s App Store.

Photo Credit: web.dev

App Store submission isn’t required

While you certainly can publish your PWA in certain app stores, it’s not necessary in order to use it, as is the case with native apps. 

Businesses can skip the tedious app submission process if they wish and have users download the app directly from their website.

Another benefit to this is that updates to the app can be published immediately when users launch the app. When going through the app store, you typically have to wait for approvals on any updates.

PRO TIP:
While everyone loves the idea of seeing their app in the app store, remember that it’s not necessary for every app. For example, B2E apps can simply have employees access their app from the company website rather than deal with publishing it in an app store.

Access to hardware

Just like with regular mobile apps, PWAs can also access device hardware features, such as camera and GPS.

Can be installed on desktop 

PWAs aren’t limited to tablet and mobile use. They can also be installed on desktop devices. Unlike native apps, PWAs are smaller in size and they can update automatically on desktop without requiring users to update the app manually.

Photo Credit: web.dev

1.2 PWA vs Native

So what’s the difference, exactly, between a progressive app and a native app?

First and foremost, they’re written differently. 

Native apps are written and developed specifically for mobile devices and using platform-specific programming languages like Swift for iOS and Java or Kotlin for Android.

PWAs, on the other hand, are written to run in a web browser, and use HTML, CSS, and JavaScript.

This is one reason why PWAs are cheaper to develop. Another reason is that progressive web apps are faster to develop and update, and they’re cross-platform.

With native apps, you’ll need to hire a developer that’s skilled in the coding language being used, and if you plan on developing your app for both iOS and Android, it’s going to take much longer to develop since you’re working with multiple codebases.

Another big difference between PWA and native apps is how they’re distributed, which we touched on earlier.

PWAs can be downloaded outside of app stores. All a user needs is a web browser and the URL from which to download the app.

Native apps, however, require publishing in app stores, depending on the platform. 

For example, Android apps can be published on Google Play but not on Apple’s App Store. Additionally, each app store has its own set of guidelines and requirements for publishing.

Discoverability is yet another difference between the two types of apps. Native apps rely on app store optimization (ASO) to be found, whereas PWAs rely on SEO to be indexed and ranked by search engines.

Native apps aren’t indexed and listed in search engines like Google. They must rely on users finding the app through the app store, which is why ASO is so important.

Chapter #2: How to Create a Progressive Mobile App

While this isn’t a step-by-step guide to creating a progressive app, this section will serve as an overview of the steps you’ll need to take to create your own PWA.

Photo Credit: newshore.es

2.1 Use SSL

Remember, you’re creating a mobile app that runs in a web browser, so serving it over HTTPS is crucial. SSL adds an additional layer of web security and will help your users feel secure when using your mobile app.

HTTPS is also needed for progressive web applications in order to use service workers, which we’ll get into later. 

PRO TIP:
An SSL certificate can be purchased directly from your hosting provider or your domain registrar.

2.2 Create an Application Shell

Your application shell is the first thing your users will see after downloading your app. It ensures that your application will load reliably and instantly on users’ screens, similar to native applications.

This shell is made up of HTML, CSS, and JavaScript and powers the UI. It also caches so that the shell doesn’t need to be loaded each time a user visits the app.

Ideally, your app shell should:

• Load fast
• Use little data
• Use static images from a local cache
• Separate content and navigation
• Retrieve and display content specific to the page
• Cache dynamic content

2.3 Register a Service Worker

A service worker is a type of web worker. It’s basically a JS file that runs separately from the primary browser thread.

In short, it gives you access to many PWA features, like caching, push notifications, install prompts, and more.

If a user’s browser supports service workers, you can register the service worker JS file. From there, you can include code in that file that will allow you to access the three primary service worker lifecycle events: registration, installation, and activation.

Photo Credit: web.dev

2.4 Add a Web App Manifest

Adding a Web App Manifest is an important step in creating a PWA and can help to improve the user experience.

The Web App Manifest is a simple JSON file that offers information about the PWA, like its name, icon, theme color, and start URL.

By including this file, the PWA can be installed on the user’s device and launched from the home screen just like a native app.

This improves the user experience by providing a more seamless and immersive experience, without the need to navigate to the website through a browser.

2.5 Setup the Install Prompt

If your PWA has a service worker and a web app manifest, the user’s browser will prompt them to install the app to their home screen. However, this prompt will only be executed if a user visits the site twice and with five minutes between the visits.

This is so that the prompt only happens automatically when a user is clearly interested in the application.

You’ll need to configure an install prompt for this to occur. You can also configure the prompt for various situations, such as when a user takes a specific action.

2.6 Analyze Performance

PWAs take pride in being fast for users, despite network conditions. The idea of progressive web apps is that they provide users with a great experience, which includes speed.

Be sure to analyze your app’s performance to ensure it meets the standards expected of your users.

You can measure your app’s performance using the RAIL model. This is a user-centric system that breaks down the user experience into specific actions, like tap, scroll, and load, and help you establish goals for each.

Photo Credit: web.dev

RAIL stands for response, animation, idle, and load—all key aspects of a web app’s life cycle.

2.7 Lighthouse For Auditing Your App

Lighthouse is a great PWA analysis tool by Google. It can be used to audit a progressive web app’s features.

It tests for app speed, offline ability, security, and accessibility best practices. This tool is available as a Chrome extension and a command-line tool.

Chapter #3: Companies Using PWAs

Now let’s look at some real-world applications to get you inspired in building your own app.

Here are three companies currently taking advantage of PWA technology, and with success.

Photo Credit: medium.com

3.1 Starbucks

Starbucks created a PWA of their ordering system that delivers a similar experience as their already-existing native app. 

Customers can easily browse the menu, customize orders, add items to their cart, etc, online or offline. This is great for on-the-go customers who may not have access to the internet, which is required for their native app.

Their PWA has been incredibly successful and is a favorite among their users.

3.2 Uber

Uber is another company offering a PWA to help them expand to new markets. 

This app offers a very similar experience to what you get with their native app, but it was developed to make booking a car accessible on low-speed networks.

This gives users an app-like experience on modern browsers, perfect for those using older devices that may not be compatible with the current native app.

3.3 Pinterest

Pinterest rolled out their PWA to grow their international user base. They found that due to low performance on mobile, only 1% of mobile users signed up or installed the app.

To increase conversions, Pinterest introduced a PWA using technology like React, Redux, and webpack, which greatly boosted time spent in the app, engagement, and revenue.

They also found that this led to an increase in performance. Their old mobile web experience often took 23 seconds to load any UI, whereas their new PWA loads at 5.6s.

Photo Credit: medium.com

Final Thoughts

Progressive web apps are the future of the mobile web, and more companies and industries are using this new standard to improve their performance.

PWAs are fast, reliable, and engaging—all while maintaining native-app experience.

If you’re unsure if a PWA is the right fit for your project, our Simple Starter package is a cost-effective solution that can help transform your app ideas into an actionable plan.

Have you used a progressive app before? If so, how was the experience?