Skip to main content
Version: v7

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:

PWA Elements

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>

Contents

Edit this page