Take Your Web App Further with Capacitor
Progressive Web Apps deliver a native mobile app-like experience using web capabilities. While oftentimes they’re an afterthought in a team’s mobile development strategy, they can be extremely useful tools for reducing development costs while still providing a top-tier user experience.
Think they’re outdated? Think again. Apple’s recently released iOS 16.4 beta 1 includes Web Push for Home Screen Web Apps. The Web Push API is based on the W3C standard and uses the same services as native apps, meaning that your notifications will be handled the same way as apps downloaded from the app store.
But how can you take them a step further? With Capacitor, Ionic’s open-source powerhouse, you can simplify the process of creating PWAs and using available Web APIs to turn them into native apps for app store distribution.
What are PWAs and why should you care?
Progressive Web Apps, called PWAs for short, are web apps built using HTML/CSS/JavaScript that offer a native-like app experience, running seamlessly on a device’s browser. These apps are highly capable (with capabilities only growing thanks to new and modern APIs) and fast and dependable, regardless of network-connectivity. Installed PWAs run in a standalone window instead of a browser tab, so they’re launchable from the user’s home screen, dock, taskbar, or shelf. Users can search for them on their device, jump between multiple PWAs, so these handy web apps truly feel like part of the device they’re installed on.
Why should you care? Because PWAs also have massive potential business benefits.
First, PWAs are fast. With a <1 second median load time, they’re 4x faster with 10x less data than traditional apps. Second, they’re cost effective. If you already have a web app, there aren’t many extra steps needed to turn it into a PWA, which means no additional spend on development, new team members, etc. Third, they’re an SEO goldmine. PWAs take into account your organization’s SEO rankings, which come into play when users try to search for your app.
Plenty of well-known businesses are leveraging PWAs to better engage users. After switching to a PWA, Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%. Streaming giant Hulu created a PWA in lieu of their desktop experience and saw return visits increase 27% (Web.dev).
PWAs are easy and inexpensive to build, yet they’re fast and extremely reliable. Meanwhile, they’re great for search engine discoverability and can have massive business benefits. So why wouldn’t you build one?
What are the risks of PWAs?
As with anything, PWAs come with risks. One of the main risks is that the install process isn’t as simple as downloading an app from the app store. Users need to actually add PWAs to their home screen in order to access them easily. Android supports install banners, and the process to add to the home screen is fairly simple (Menu > Install App). On iOS, the process is a bit more cumbersome (Share > Add to Home Screen > Add).
Another risk is that you can build the perfect PWA, and users simply won’t find it. Users are trained to look for apps in the app store as opposed to on the web. That means that if a team wants their app to have the widest reach, they’ll need to consider getting it into an app store. Currently, the Apple App Store doesn’t accept listings of PWAs, but Google Play does. Apple’s recent beta release suggests there may be support for PWAs in the app store in the future, but the future remains unclear.
The offline experience of a PWA is also more limited than the offline experience of a native application, and devs need to consider the limitations of available web APIs. APIs don’t exist for every device-like functionality, so you run the risk of creating an inconsistent experience, especially since Web APIs are supported individually by browsers. That means that even if you build the perfect experience on Chrome, it may work entirely differently on Firefox or Safari. This also means that development teams often need to limit the features and functionality of their PWAs to ensure that they’re compatible across all web browsers.
Capacitor makes building PWAs less risky
While PWAs have their risks, using Capacitor can help mitigate them. Because Capacitor allows you to reuse your web apps across multiple platforms, it supports Progressive Web Apps and deploying to the iOS and Android app stores with minimal work on your end.
By distributing your web app as a native app, you can solve the issue of discoverability. By deploying both PWAs and traditional native mobile apps, you can meet your audience where they are and maximize your reach. Win/win!
With top tier support for both web apps and native apps, Capacitor’s cross-platform runtime solution supports running in either a native context or in the web, with many plugins available in both contexts using the exact same API and calling conventions. This offers both a smoother developer experience and a viable path forward for development teams to offer their application on every platform their users prefer.
In addition to a smoother developer experience, Capacitor lets development teams create a better experience for users as well. Capacitor also supports the use of PWA Elements, which offers an improved web-UI experience for Capacitor apps running in a browser as a PWA. Pre-built UI experiences for web APIs such as camera/video enables developers to create PWAs that meet and exceed native mobile experiences.
TL;DR
Progressive Web Apps are fast, reliable ways to connect with users. When executed properly, they can have huge business impacts, empowering teams to drive better results while lowering costs and overhead. However, they come with risks, and often have less features than native apps.
When you build with Capacitor, you get the best of both worlds – a Progressive Web App and a native app, without having to do redundant work. Capacitor’s APIs enable developers to build a better PWA experience for users and puts them on the path to creating a native app simultaneously. This enables development teams to push beyond PWAs and use their existing codebase to build and ship their apps to all popular distribution channels.
