跳到主要内容
版本：v2

PWA Elements

一些 Capacitor 插件，例如 Camera 或 Toast，在非原生运行时提供了基于 Web 的用户界面。例如，在 Web 端调用 Camera.getPhoto() 会加载一个响应式的拍照体验：

该 UI 是使用 Web Components 实现的。由于这些元素被 Shadow DOM 封装，因此这些组件不会与您自己的 UI 产生冲突。

安装​

为了启用这些控件，您必须在您的应用中添加 @ionic/pwa-elements。

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

导入 PWA Elements​

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);
Vue​

main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
});

// 在平台启动后调用元素加载器
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);

通过脚本标签引入​

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

<script
  type="module"
  src="https://unpkg.com/@ionic/pwa-elements@2/dist/ionicpwaelements/ionicpwaelements.esm.js"
></script>
<script
  nomodule
  src="https://unpkg.com/@ionic/pwa-elements@2/dist/ionicpwaelements/ionicpwaelements.js"
></script>

Contents

编辑此页