Last year approximately half of all web traffic came from a mobile device, meaning it’s now more important than ever for a website to perform well on mobile. Going beyond a responsive website, it’s important for a website to be easily accessible, load efficiently and be fully functional while on the move. We’ve already seen the popularity of mobile apps sky-rocket over the past decade, so can a browser-based website do more?
What is a Progressive Web App (PWA)?
A Progressive Web App, otherwise known as a PWA, is a streamlined website that delivers content in a native app-like interface. Unlike a traditional website, a PWA behaves more like a mobile app - very similar to what you download from your mobile app store. You’re able to show your visitors push notifications, offline content and access the device’s hardware all within an app-like interface. In short, PWAs are a crossover between regular web pages and mobile applications.
Easily Accessible
Unlike a traditional app they don’t have to be downloaded or installed, you can visit a URL and you’re good to go. Available in any browser there is no need to develop multiple apps to work on different platforms. A PWA is hosted on a web server, easily accessible via a web browser.
Technology
Built using web technologies and libraries, PWAs can be quickly coded using HTML & Javascript. There are no large development hurdles allowing current developers to code them with ease.
A typical PWA can be split into 2 main regions. You have a frontend technology which powers the main functions of the PWA and a backend technology which powers your content management system (CMS).
When it comes to a choice of frontend technologies, there are many frameworks to choose from. Frameworks such as Angular, React, Vue.js & Ionic to name a few. All these use HTML & javascript and have a prebuilt skeleton under the hood which helps give the PWA a native app feel.
In the backend, the choices are almost unlimited. For a dynamic website to work you will need to use a CMS. Traditionally the frontend of a website will be tightly coupled to the backend where the CMS sits. With a PWA the CMS will need to be set up so that it is headless. Content is pulled from the CMS via a RESTful API and rendered dynamically on the frontend. As a PWA is designed to offer offline functionality, meaning text, images and general content is efficiently cached on the user’s device.
Development & Costs
Progressive Web Apps typically cost less than an equivalent native app. This is due to the familiar web technologies and easy to use frameworks on offer. Unlike a PWA a native app is also subject to an annual licence fee.
Like any web-product, you’ll want to push updates out at various stages of the apps life-cycle. With a native app, months of development work combined with developing two identical apps for iOS and Android, then having your app approved in the app store can be a painful process. PWAs have a great advantage here. Updates can be implemented once and pushed out instantly to your audience. The development cost is generally less as the app functionality is only implemented once.
The Key Benefits
Progressive — A PWA works for everyone, regardless of browser or device. “Progressive” refers to the fact that they introduce new features into what otherwise could be perceived as a traditional website.
Responsive — Built with mobile in mind, and usable on a desktop, PWAs are always responsive, scaling up as the screen size increases.
Better Performance — PWAs caches text, images and other content in an efficient way, which allows them to operate like websites with vastly improved running speeds.
Access Hardware — A PWA can access the device's hardware such as the camera and file system.
Push Notifications — Just like a native iOS or Android app you can send your users push notifications directly to their device. (They’ll have to accept them first)
Offline Content — Unlike a traditional website a PWA can be used offline. Once the website has loaded, data can be cached on the user’s device. This is particularly good for those with slower connections such as 3G.
Installable — The user is asked if they would like to install the application to their home screen. This puts the app onto their phones app list, or into a browser home-screen on desktop.
No App Store Restrictions — Native apps are published through central distribution services such as the App Store & Google Play. These stores will have specific requirements which an app must adhere to. In some cases, an app's design, or functionality has to be changed to meet these requirements. A PWA will allow you to avoid these complications.
Automatic Updates — As a PWA is accessible via a browser there is no need for the user to manually update the app.
Searchable — Providing best practices are followed, PWAs are indexed in search engines.
The Weaknesses
While a PWA is a great alternative to a native app, there are some limitations.
- Some limited features — Not all devices support the same range of features. The biggest differences are between iOS and Android. In addition to this, not all hardware components are accessible via a PWA.
- Not Fully Offline — You still need an internet connection to initially load the app.
- No App Store — There is no governing body which means users may not have the same level of trust as an app which came from an app store.
Offering a PWA to your audience is a good way to keep visitors engaged in your website. With smooth native app-like animations, simple to use menu systems, push notifications and offline functionality, user engagement lasts longer.
If you’d like to discuss a Progressive Web App further, please get in touch.
Further Reading
https://hackernoon.com/creating-a-progressive-web-app-with-a-headless-cms-part-1-85ede9dba59b
