Following web technologies is like watching evolution at 1000x speed. And what’s crazy is — it’s speeding up. Noone had any idea that mobile apps on smartphones would take off like they did, and we believe that the same will be true for PWAs. In case you’ve been living under a rock, major corporations and world-renowned companies are already taking advantage of PWAs.
So what are you waiting for? The gap between native apps and PWAs is being bridged with every passing day. Let’s dive into PWA — we’ll show you why it should be your next major investment.
Are PWAs just hype?
TL;DR No
Long answer — A PWA is more than just a web app. The “P” in PWA stands for Progressive and this is what sets it apart from a boring old web app. As new technologies and APIs become available, you can add support for new features and retain users using older browsers.
Another major plus is PWAs have to be installable. Not the way you’re thinking, there are no registry entries, or install wizards you have to click through. Instead, when prompted on a site, you simply click or tap “Add to Home Screen” and voilà — instant access.
This isn’t a bleeding-edge technology either — check out these companies (you’ve heard of) that have already taken advantage of PWAs:
- Uber
- Tinder
- Alibaba
- Starbucks
- Financial Times
- Forbes
- Lancôme
Let’s take a look at the benefits:
Light speed development
You can build a PWA with any modern JS stack be it Angular, React, Vue.js or even vanilla JS. There are some boxes you need to tick to qualify as a PWA, like having a web manifest, service workers, etc. But if you’re versed in any web stack, it shouldn’t be a problem. Here’s Google’s introductory guide to building your first PWA.
The price is right
Developing a PWA is cheaper than going the native mobile route. Why? Because instead of 2+ apps, you create a single app that is automatically cross-platform, cross-browser, and adaptable to any screen size.
Feature-rich
Offline browsing, access to device resources, progressive enhancement and so much more (don’t worry, we’ll look at what’s coming up in PWA tech in a few sections).
Native-like performance
A cringy way to put it, but Google, and now Microsoft, are really bringing PWAs closer to native. As we’ll see later, Google’s Chrome OS will soon be able to launch PWAs at startup, just like an installed program, and so much more.
Push notifications like a native app
A major selling point of mobile apps used to be the push notifications you could set up. PWAs make it easy to show customers updates, your latest marketing campaign, and anything else you want to share.
No more update prompts or hurried hotfixes
Unlike native apps, PWAs don’t require a complicated deployment workflow. If you think the app store is only for mobile apps, we’re going to rock your world with great news — you can get PWAs in Google Play Store, Apple Store and Microsoft Store. Albeit, with some hurdles from Apple’s side.
Here are case studies you can show clients or your team members to really drive the point home [Taken from pwastats.com]
Uber
Starbucks
Treebo
Rooted Objects
Not convinced yet? Let’s look at what’s coming next
But first, here’s what’s been released and available in stable. Keep in mind, the majority of these APIs/features are only available in Google Chrome (but that will change soon).
But first, here’s what’s been released and available in stable. Keep in mind, the majority of these APIs/features are only available in Google Chrome (but that will change soon).
Source: https://web.dev/fugu-status/
Wake Lock API
To improve user experience, Google developed this API to both avoid draining the battery and keeping the screen awake when necessary. For example, a recipe or exercise site that’s a PWA.
Badging API
A cool way to notify users about some new activity that might require their attention or information such as an unread messages count.
Async Clipboard API (images)
Makes it possible to read and write text or image data to the clipboard, without blocking the main thread.
Contact Picker API
Allows users to choose entries from their contact list and share that information with a website. Makes it easier to reach and connect with your contacts.
Get Installed Related Apps API
A web platform API that allows your web app to check to see if your native app is installed on the users device, and vice versa.
Periodic Background Sync API
Enables web applications to periodically synchronize data in the background.
Shape Detection (Barcode)
Shape detection opens up native implementations of shape detection services and exposes them through a set of JavaScript interfaces.
Web OTP API
Finding, memorizing, and typing OTPs sent via SMS is cumbersome. The Web OTP API (formerly the SMS Receiver API) simplifies the OTP workflow for users.
Web Share
With the Web Share API, web apps are able to use the same system-provided share capabilities as native apps. The Web Share API makes it possible for web apps to share links, text, and files to other apps installed on the device in the same way as native apps.
Web Share Target
The Web Share Target API allows installed web apps to register with the underlying OS as a share target to receive shared content from either the Web Share API or system events, like the OS-level share button.
This is what’s available in Origin Trial (allows developers to try out new features and give feedback).
Content Indexing API
Your PWA might cache articles and media files, but how will your users know that your pages work while offline? Once the index is populated with content from your PWA, as well as any other installed PWAs, it will show up in dedicated areas of supported browsers.
Native File System API
The Native File System API (formerly known as the Writable Files API) enables developers to build powerful web apps that interact with files on the user’s local device, like IDEs, photo and video editors, text editors, and more. After a user grants a web app access, this API allows web apps to read or save changes directly to files and folders on the user’s device.
Notification Triggers
Let you schedule notifications in advance, so that the operating system will deliver the notification at the right time – even if there is no network connectivity, or the device is in battery saver mode.
Serial API
Provides a way for websites to read from and write to a serial device with scripts. The API bridges the web and the physical world by allowing websites to communicate with serial devices, such as microcontrollers and 3D printers.
Web NFC
Provides sites the ability to read and write to NFC tags when they are in close proximity to the user’s device. For example, museums and art galleries could display additional information about a display when the user touches their device to an NFC card near the exhibit; or an inventory management web app could read or write data to an NFC tag on a container to update information on its contents.
And to round it off, the experimental API Google is keeping under wraps:
Shape Detection (Face and Text)
Shape detection opens up native implementations of shape detection services and exposes them through a set of JavaScript interfaces.
Should you invest in a PWA?
Yes, yes and yes. Corona or not, PWA will always be a good investment. Mobile apps are good but why go down the mobile rabbit hole unnecessarily when you can get more with a fast website that users can access offline with SEO built in?
There’s no doubt in our mind — but we want to hear from the tech community. Is PWA on your radar? If so, what are you planning on building? Let us know in the comments!
