跳到主要内容
版本：v3

PWA元素

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

PWA元素界面

这些UI是使用Web组件实现的。得益于Shadow DOM的特性，这些组件不会与您自己的UI产生冲突。

安装指南​

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

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

导入PWA元素​

npm install @ionic/pwa-elements

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

React

index.tsx或index.js：

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

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

// 在应用首次渲染完成后调用元素加载器
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));

// 在平台初始化完成后调用元素加载器
defineCustomElements(window);

通过脚本标签引入​

您也可以在index.html中通过脚本标签引入PWA元素，但请注意这种方式不适用于离线场景：

<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

编辑此页