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.
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:
Upon navigating via browser to a PWA site, a pop-up will appear prompting the user to download the app to their phone.
After installation of a PWA on a phone or tablet, the app's icon is added to the user's home screen.
Now when users click on the icon, the company's site will open in its own window rather than as a browser tab.
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.
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
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:
Visit Google Play or the App Store.
Do a search for the app you want.
Correctly select the app from possibly dozens of similarly-named ones.
Hit the 'Install' button.
Grant various permissions for phone access.
Hit 'Open' and launch.
Installing a PWA:
Visit the company's website.
Add the site to your device's home screen.
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%
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.
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.
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.
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.
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
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!