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 magic of Shadow DOM, these components should not conflict with your own UI.
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:
npm install @ionic/pwa-elementsThen, 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);
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>
