跳到主要内容
版本：v6

PWA Elements

部分 Capacitor 插件（如 Camera 或 Toast）在非原生环境下运行时，提供了基于 Web 的 UI 界面。例如，调用 Camera.getPhoto() 在 Web 端运行时，会加载一个响应式的照片拍摄体验：

PWA Elements

这些 UI 界面是通过 Web 组件实现的。由于这些元素被影子 DOM（Shadow DOM）封装，因此不会与您自己的 UI 产生冲突。

安装​

要启用这些控件，您需要在应用中添加 @ionic/pwa-elements。

典型安装方式包括导入包并注册元素，或在应用的 index.html 的 <head> 中添加脚本标签：

导入 PWA Elements​

npm install @ionic/pwa-elements

然后，根据您选择的框架，在适当的时候导入元素加载器并调用它：

React​

在 main.tsx、index.tsx 或 index.js 中：

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

// 在渲染调用之前调用元素加载器
defineCustomElements(window);
Vue​

在 main.ts 中：

// 在 createApp() 行之前
import { defineCustomElements } from '@ionic/pwa-elements/loader';
defineCustomElements(window);
Angular​

在 main.ts 中：

import { defineCustomElements } from '@ionic/pwa-elements/loader';
// 在 bootstrapModule/bootstrapApplication 调用之前调用元素加载器
defineCustomElements(window);
if (environment.production) {
  enableProdMode();
}

通过脚本标签引入​

PWA Elements 也可以通过脚本标签在 index.html 中引入。但请注意，这种方式在离线场景下无法工作：

<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

编辑此页