In case you hadn't heard, the internet is full.

For companies competing for attention on the web these days, the game requires more than merely slapping your company name on a website and calling it a day.

Many enterprises turn to native apps to help increase user engagement. By launching faster, working more efficiently, being available offline, and enhancing speed and responsiveness, a native app offers clear advantages over waiting for users to find you via browser.

PWAs Vs. Native Apps

However, there's an increasingly popular alternative to the high-cost, time-consuming, and labour-intensive efforts needed to create a native app: the progressive web application, or PWA.

Progressive web apps are an especially great option for smaller businesses reluctant to throw down the cash needed to develop a native app. Not only are they lower cost, but they're quick to build, and lighter weight.

Yet PWAs deliver almost the same functionality as a native app, including push notifications, offline access, increased visibility and better engagement. And businesses that choose to go with a PWA are in good company – or rather, companies: mega-corporations like Starbucks, Uber, the Washington Post and many more engage with millions of customers using PWAs every day.

How Do Progressive Web Apps Work?

First rolled out by Google for Android devices in 2015, and becoming available on iOS starting in 2018, PWAs have exploded in popularity in just a few short years.

PWAs run on the same programming languages used to create any other website. Their developers use familiar languages like HTML, JavaScript and CSS, adapting them to make the apps work on various devices, browsers and platforms, including computers, tablets and cell phones.

A PWA is basically a hybrid between a regular website and a native app. If you open a progressive web app on a browser, it would have the appearance of any other website. But when you access a PWA on a mobile device, it behaves more like a native app.

Using a PWA:

  1. Upon navigating via browser to a PWA site, a pop-up will appear prompting the user to download the app to their phone.

  2. After installation of a PWA on a phone or tablet, the app's icon is added to the user's home screen.

  3. Now when users click on the icon, the company's site will open in its own window rather than as a browser tab.

  4. The progressive web app then creates a cache, dramatically increasing loading speed as well as securely storing user data for subsequent visits and remaining available offline.

  5. As an Android app, a PWA has virtually all the functionality of any native app, including payment processing, fingerprint verification, NFC, using the phone's vibration function, and voice recognition.

Android Vs. Apple

As previously noted, progressive web apps function on both the Android platform and iOS. With Android PWAs, developers can use extra APIs to access smartphone features like Bluetooth, NFC, geolocation, and more. And a company's PWA can even be published to Google Play using tools like PWABuilder.

It should be noted that Apple's support for progressive web apps versus native iOS applications falls short when compared to Google's PWA support. One example of the difference is that Safari doesn't support PWA push notifications.

However, that's not to say PWAs don't work on Apple products – millions of iPhone users enjoy the benefits of PWAs every day. Here are a few of the capabilities progressive web apps offer:

  • With one click, users can add PWAs to their home screen without being redirected to the Google Play Store or the App Store

  • Progressive web apps load super fast and function offline, yet they can still deliver push notifications

  • They can sync in the background when opened

  • PWAs give the user a full-screen experience with no URL rather than a cramped browser page

  • They're brought to the user utilising secure HTTPS

In addition to Starbucks and Uber, all-told the list of companies that utilise progressive web apps includes perhaps a trillion dollars worth of market capitalisation:

Logos of PWA Adopters

What Are Some Of The Advantages For Companies Using PWAs?

1. Development Streamlining

In creating progressive web apps, developers don't waste valuable time creating apps for separate platforms, nor in adapting them to the native code, effectively halving the time needed to get a PWA up and running.

That's because a progressive web app can run on both Android and iOS from day one, and developers can adapt most of a native app's functions to run on a PWA.

2. Direct Download

Another benefit is that, while you can adapt PWAs to publish in the Google Play store or the Apple Store if you choose to, by no means is it required.

Most companies that use PWAs prompt their customers to download the app directly from their PWA websites via a browser. This sidestepping of the big boys' app stores means your company has a great deal more autonomy on how the app functions.

Also, you save the 30 per cent commission fee Google and Apple charge to have your app appear in their stores, and you're free from navigating the tech giants' tedious approval processes before making updates available to your customers.

3. Lower Cost

Finally, one mustn't overlook the lower cost of PWA development. You also won't need to wait nearly as long for a progressive web app development team to create a bespoke app for your company, saving a great deal in labour and downtime.

4. User Experience

User experience for both native apps and PWAs is more or less the same. You'll still be able to plant your company logo on users' home screens and send them push notifications, and your users will enjoy fast load times and accessibility even when offline.

PWA Functions in Real-Time and Benefits for Both User and Company

For just a brief example of how flexible and seamless using a PWA is for customers, and how that benefits the companies that implement them, let's look at the video-calling app Google Duo and its PWA.

After users have downloaded the app, it behaves just like any other phone app used for video calls: if someone calls you, you get a notification. But with a PWA, you're also able to send push notifications to the user on a variety of platforms, including Windows, macOS, Linux, and ChromeOS.

Furthermore, PWAs don't require users to update an app every time developers tweak it. Whenever a user opens the PWA online, they have access to the latest version, ridding you and your developers of the problem of software fragmentation. That's what occurs when you're forced to support old versions of your app rather than risk losing customers who are slow to download updates.

What Are the Advantages of PWAs For Users?

1. Fast Loading Time – When using a website, every click is processed by a request to a far-off server. But progressive web apps use a local cache, reducing the number of server requests dramatically. Even with a slow web connection, the user still enjoys fast loading and operations when using a PWA. Fast loading speeds are one of the primary requirements for a PWA.

2. Smaller Footprint – While many native apps can require users to download 50MB or even 100MB onto their phone, a PWA only needs about 1MB to function. This, plus the ability to cache user info, makes them ideal for functions like selling tickets, ordering food, media consumption, and more. Yet even with this tiny footprint, PWAs can still send users push notifications and more.

3. Offline Capability

If your customers access your company's goods or services via a browser website, you're out of luck if they have no internet connection. With a PWA, however, the app is self-contained and can be used offline.

4. Faster Installation

Here's the side-by-side comparison of the installation process for a native app versus a PWA.

Installing a native app:

  1. Visit Google Play or the App Store.

  2. Do a search for the app you want.

  3. Correctly select the app from possibly dozens of similarly-named ones.

  4. Hit the 'Install' button.

  5. Grant various permissions for phone access.

  6. Hit 'Open' and launch.

Installing a PWA:

  1. Visit the company's website.

  2. Add the site to your device's home screen.

  3. Open and enjoy the app.

What Are Some of the Disadvantages of PWAs?

1. Limited Apple Support - While Apple remains unenthusiastic at best about providing support for PWAs, preferring to sheepdog users toward their native apps, Google and Microsoft are guns out for PWA support, making the issue more or less a wash.

2. Limited Access to Device Features – The only other significant disadvantage to using a progressive web app over a native app is possible reduced access to the device's hardware. For most budget-minded companies, the trade-off is well worth it, however.

Real-World Results of PWAs

When you look at the progressive web app big picture and note the enhanced customer experience they provide – as well as the ways PWAs benefit the companies that use them – it's pretty clear that PWAs stand head and shoulders above the alternatives. Here are a few specific examples of how companies have benefited from progressive web apps, taken from the PWA Stats website:

  • Twitter Lite – Reduced load times by 30%

  • Tinder – Cut load times by nearly a third, from 11.91 seconds to 4.69 seconds

  • Starbucks – Doubled their daily active users

  • Uber – Reduced time needed to load on 2G networks to less than 3 seconds

  • Pinterest – Enhanced time spent on the site by 40%

  • AliExpress – Increased conversion rate by 104%

  • Forbes – Doubled average length of user sessions

  • Alibaba – Conversion rate grew by 76%

Progressive web app mock up

What Goes into Making a Progressive Web App?

To change a website into a PWA, a developer will need a service worker and a manifest.json file.

A service worker (SW) supports a handful of the major benefits of using a PWA – push notifications, offline mode, and background syncing. It's just a JavaScript file, running in the background on a browser.

Push Notifications

Service workers run independently of their associated app, because they're running separately from the main browser thread. So even when the app isn't active, SWs can receive push notifications from a server, allowing your PWA to display them even when it isn't running in the browser.

Offline Mode

With a service worker, a cache is created of the interface or application shell, so upon the user's next visit, it loads instantaneously. Live content like payment history or messages are refreshed automatically whenever the user's connection is back online.

With the example of a messaging PWA, the appearance of the user interface won't change whether they're online or offline. The site is still functional – for instance, you can still access message history – but to receive new messages you'll need to get back online.

Background Synchronisation

If a user is offline and tries to send a message, the service worker can delay action until a stable connection returns, even if the user navigates away from the page. What's more, service workers only run on HTTPS connections, ensuring security.

Manifest Files

A manifest file is a JSON file that marks out the parameters of a PWA. With a manifest, developers get to determine:

  • Launch mode of the PWA – i.e. if it launches full-screen with no URL bar visible

  • The app's display: icons, fonts, background colour, screen orientation etc.

  • If you can add it to the home screen

There are several well-liked technologies, most based on JavaScript, that developers use to craft PWAs. Those include:

  • React – a JavaScript library used for constructing dynamic user interfaces

  • Angular – a framework based on JS used to create dynamic web apps

  • Polymer – a set of tools, components and models designed to help with the creation of PWAs

  • Accelerated Mobile Pages (AMP) – a project created on an open-source basis that improves web page performance

  • Ionic – another JS framework used to create apps using basic code but which can run on multiple platforms

Here are some rules of thumb to help you decide when you'd be better off developing a progressive web app over a native app:

  • If marketplace distribution isn't part of your plans

  • If your app won't require advanced functionality – i.e. if it's not a social network

  • When you don't need the user interface to be customised

  • When interacting with native features like NFC or geocaching aren't needed

  • If your budget is limited and time is of the essence in order to keep users engaged

  • If you're looking to have your app run on multiple devices and OS

  • When search engine indexing is a priority

A great example of how a PWA can really up user engagement and readability is the way legacy newspapers like The Financial Times and the Washington Post have adopted it.

PWAs allow readers to cache and re-read articles even when they're offline. Reading media on a PWA instead of a browser page means your full screen is devoted to content, with no URL bar taking up space, nor pesky ads and other objects that appear on the regular web version.

More and more businesses are finding that PWAs increase their user engagement, and offer a plethora of other benefits besides. With user-beloved features like offline access, and the ones business loves like push notifications, PWAs are a solution that's easy to build, quick to roll out, and also low cost – a clear winner for everyone.

Laracle's Progressive Web App Team

Here at Laracle, we have extensive experience creating bespoke PWAs for a variety of business types. Whether you want a lightweight customer ordering solution, a ticketing app, or any other kind of app to help get your business front and centre on people's home screens, give us a call today. Someone on our PWA development team can outline a plan and set up a demo for you to show you firsthand the capabilities of a progressive web app.

Reach out today by phone or email, and we'll get started creating your custom PWA right away!

How to plan for successful Software Development Outsourcing

Download Free Ebook

How to plan for successful Software Development Outsourcing

Download Free Ebook