Skip to main content
Version: v6

PWA Elements

Some Capacitor plugins, such as Camera or Toast, have web-based UI available when not running natively. For example, calling Camera.getPhoto() will load a responsive photo-taking experience when running on the web:

This UI is implemented using web components. Due to the elements being encapsulated by the Shadow DOM, these components should not conflict with your own UI.

Installation

To enable these controls, you must add @ionic/pwa-elements to your app.

A typical installation involves importing the package and registering the elements, or adding a script tag to the <head> of the index.html for your app:

Importing PWA Elements

npm install @ionic/pwa-elements

Then, depending on your framework of choice, import the element loader and call it at the correct time:

React

main.tsx or index.tsx or index.js:

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader before the render call
defineCustomElements(window);
Vue

main.ts:

// Above the createApp() line
import { defineCustomElements } from '@ionic/pwa-elements/loader';
defineCustomElements(window);
Angular

main.ts:

import { defineCustomElements } from '@ionic/pwa-elements/loader';
// Call the element loader before the bootstrapModule/bootstrapApplication call
defineCustomElements(window);
if (environment.production) {
enableProdMode();
}

Including through script tag

PWA Elements can be included through a script tag in your index.html. However, keep in mind this will not work for offline scenarios:

<script
type="module"
src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"
></script>