Starting an app with the PWA Toolkit is incredibly easy:
npx create-stencil ionic-pwa
Congrats! You now have a high performing, great looking PWA starter app that scores 100 on Lighthouse, right out-of-the-box!
Under the hood
The Ionic PWA Toolkit includes all the essentials needed to start building fast, great looking Progressive Web Apps out-of-the-box.
The Ionic PWA Toolkit uses Ionic Framework v4. Ionic 4 is built completely out of web components using Stencil. Because of this you can use Ionic 4 just like any other web components library with minimal to no overhead.
The Ionic PWA Toolkit uses Ionic Framework’s
component included in v4 for routing. This gives you the great navigation
animations and API that you know and love from Ionic with very minimal
overhead and incredible performance.
When you run
npm run build we automatically generate a Service
Worker for you using Workbox. The generated service worker will pre-cache
all of your static assets by default (a best practice for performance).
Because of Workbox, the service worker can be fully customized to work for
your offline strategy. Learn More
Our default Web Manifest includes all of the necessary entries to enable Add To Homescreen. Check out that Manifest here.
Frequently Asked Questions
Common questions, answered.
What are Service Workers?
What are Web Components?
You may be familiar with components from frameworks such as Angular and React. Web Components are very similar, but a key difference is that they are a collection of components built on browser standards. This means that web components can be run in the browser without the need for a full framework. Because of this, web components are incredibly performant.
What about iOS?
The release of iOS 11.3 included support for Web Manifests and Service Worker! This means that your PWA can now be added to the Homescreen on an iOS device, and even work offline.
How do I measure the performance of my PWA?
We recommend Lighthouse and WebPageTest to measure the performance of your PWA. Lighthouse makes it easy to quickly test your PWA locally and is built into the Chrome DevTools in the Audits tab. WebPageTest allows you to run the same tests but on a real mobile device on networks with different latencies and speed. The combination of these two tools can give you a really good idea of what the performance of your PWA is.
How do I host my PWA?
Because PWAs are just web sites, they can be hosted using the same solutions you would use for a website. One key difference is that a PWA must be served over HTTPS as a secure connection is required for features like Service Workers. At Ionic we recommend using Firebase Hosting for hosting PWAs. Firebase Hosting supports HTTPS out of the box (even on the free tier!), is blazing fast and supports key performance features such as HTTP2 push. Learn about Firebase Hosting
What does the “Progressive” in PWA mean?
Because PWAs are a website and are at least initially accessed through the browser it is important that your PWA support all browsers. Not all browsers may support advanced features such as web push notifications, but your PWA should still work in those browsers. This is accomplished through progressively using those advanced features on browsers that support it with a fallback for browsers that may not support that feature.
What are the benefits of deploying my app as a PWA?
Deploying a PWA offers many benefits to you as a developer including instant updates, discoverability, easily shareable, smaller size than native apps and more. PWAs also allow you to avoid the time consuming app store approval processes when deploying updates to your users.
When should I build a PWA?
There are not many good reasons (if any at all) to not also offer a PWA alongside your native app(s). A PWA can be a great upgrade for your many of your users. And if you’re looking to reduce user churn and bounce rate, then the instant experience that a PWA provides may be what you’re looking for. By reducing the amount of steps it takes the user to get into your experience from:
- Going to the app or play store
- Searching for your app
- Installing your app
To just clicking a link, you can drastically reduce churn and bounce rate.
When should I not build a PWA?
Admittedly, there are only a few cases where a PWA might not fit your product goals. The most common case is that your product requires something technically that is only available on native platforms, and not yet available on the web. While the web is becoming incredibly more powerful every day, there are still a few remaining features like fingerprint auth that are not yet available.