Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
  • What is Ionic 6 Full Starter App?
  • About this Ionic template
  • Template versions
  • Set up the development environment
  • Running the Ionic app
  • How to use this template?
  • Ionic Capacitor
  • Ionic Code Structure
  • Ionic Data Integration
  • Theming
  • Ionic Progressive Web App
  • Ionic Navigation
  • Ionic Server Side Rendering (SSR)
  • Ionic Splash Screens and Icons
  • App Shell
    • Image Shell
    • Text Shell
    • Aspect Ratio
  • Ionic Custom Components
    • Checkbox Wrapper
    • Countdown timer
    • Ionic Show/Hide Password
  • Ionic Walkthrough (or tutorial)
  • Categories
  • Ionic Firebase Integration
    • Firebase Authentication
    • Firebase CRUD
    • Firebase Hosting
    • Push Notifications
  • Google Maps & Geolocation
  • Ionic Video Playlist
  • Ionic Multi Language
  • Getting Started
  • Ionic Authentication
  • Ionic Side Menu
  • Ionic Profile
  • Contact Card
  • Social Sharing
  • Ionic Notifications
  • Forms and Validations
  • Filters
  • FAQs
  • Common Errors and Solutions
  • Glossary
  • Upcoming features
  • 🧐Changelog
  • Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered by GitBook
On this page
  • Making an Ionic App a PWA
  • How to install this template as a PWA on your phone?
  • For iOS
  • For Android
  • Deploy to Firebase

Was this helpful?

Ionic Progressive Web App

Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app.

PreviousThemingNextIonic Navigation

Last updated 3 years ago

Was this helpful?

Not sure what PWAs are? Check out for more info.

Ionic 5 is a step forward for Progressive Web Apps, that's why we are building this new ionic template with 100% support for PWA.

You will be able to use this Ionic 5 starter as an iOS app, an Android app, a web app or as a PWA! Too many options, right?

For a web app to be considered a PWA, it needs to .

Making an Ionic App a PWA

The two main requirements of a PWA are a and a . While it's possible to add both of these to an app manually, the Angular team has an @angular/pwa package that can be used to automate this.

The @angular/pwa package will automatically add a service worker and a app manifest to the app. To add this package to the app run:

$ ng add @angular/pwa

Once this package has been added run ionic build --prod and the www directory will be ready to deploy as a PWA.

Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware they HTTPS will be required to take full advantage of Service Workers.

After @angular/pwa has been added, a new ngsw-config.json file will be created at the root of the project. This file is responsible for configuring how Angular's service worker mechanism will handle caching assets.

You can learn more about how to customize this file in

How to install this template as a PWA on your phone?

For iOS

  • Get your iPhone and open Safari.

    • Currently PWA on iOS only work on Safari browser.

  • Navigate to or to for the .

  • Tap the Share button

  • From the bottom slider, tap the "Add to Home Screen" option

  • Set the name you want

  • The app will now be available as a PWA from your home screen. Enjoy 😀

For Android

  • Get your Android phone and open Chrome.

  • The following prompt will be displayed. Click it.

  • Click ADD.

  • The app will now be available as a PWA from your home screen. Enjoy 😀

Deploy to Firebase

One of the requirements of a PWA is that it needs to be served over https for enhanced security.

There are many hosting providers that offer HTTPS support, among them I find the Firebase Hosting product super easy to work with besides it’s free and provides many benefits for Progressive Web Apps.

Navigate to or to for the .

Follow this detailed guide on how to for more information.

The Complete Guide To Progressive Web Apps with Ionic
comply with 10 principles
Service Worker
Web Manifest
https://ionicframework.com/docs/angular/pwa#service-worker-configuration
https://ion4fullpwa.firebaseapp.com
https://pro-ion4fullpwa.firebaseapp.com
PRO version
https://ion4fullpwa.firebaseapp.com
https://pro-ion4fullpwa.firebaseapp.com
PRO version
Deploy Ionic apps using Firebase Hosting