PWA Elements

Some Capacitor plugins, such as Camera, 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 or electron:

This UI is implemented using a subset of the Ionic Framework web components. Due to the magic of Shadow DOM, these components should not conflict with your own UI whether you choose to use Ionic or not.

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

index.tsx or index.js:

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

ReactDOM.render(<App />, document.getElementById('root'));

// Call the element loader after the app has been rendered the first time
defineCustomElements(window);

Angular

main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

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

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

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>

Contributors

Back Next