Progressive Web Applications (or PWAs) have had a big increase in popularity recently, and browsers (specifically iOS/Safari) have increased support for them which has made it a whole lot more viable to build a PWA.
In short, Progressive Web Apps are all about giving applications made available directly through the web (this means you just go to the URL through a web browser and you are instantly in the app) a more native-like experience. This means at a minimum that they should work offline, and can be installed onto a user’s device (if a user “installs” a PWA, they can then access it directly from their home screen in the future rather than having to open a web browser to access it). Some of the key benefits of distributing your applications as a PWA are:
- Fast load times due to caching
- Offline capability
- Ease of distribution/low barrier to use
- Instant updates (no application review process)
- No “walled garden” app stores (i.e. Apple can’t reject, remove, or ban your application)
The biggest downside is that you don’t have direct access to all of the native functionality of the device like a native application does. Capacitor helps a great deal with this because it provides a consistent API to use across iOS/Android/PWA, and many features like the Camera and Geolocation are still available when building a PWA. However, if you need access to native functionality that is not available through a Web API, then the PWA version of your application will not be able to access it. This website is good for visualising what the web can and can not do today. In future, the list of things that the web can’t do will likely get smaller.
That is the cool thing about using Ionic and Capacitor. We can build a single application, using a consistent API for accessing native functionality and distribute it as a hybrid application for iOS/Android and as a PWA for the web. Even though we might not be able to access some functionality in the PWA version of the application, we could still also distribute that same application as a native iOS/Android application if we wanted.
You can check out all of the PWA tutorials on the website here or you can choose one from the list below.
Building a PWA with Stencil (Tutorial Series)
- Part 1: Building a PWA with Stencil: An Introduction to Stencil
- Part 2: Building a PWA with Stencil: Project Structure and Syntax
- Part 3: Building a PWA with Stencil: Rendering Layouts
- Part 4: Building a PWA with Stencil: Routing and Forms
- Part 5: Building a PWA with Stencil: Storage and Services
- Launching a Progressive Web App (PWA) with Ionic
- Building a Cryptocurrency Price Tracker PWA in Ionic
- Preparing a Progressive Web Application for Production
- Augmented Reality in an Ionic/Angular PWA