Capacitor2.3.0中文文档(七)--Web/PWA

在Web项目中使用capacitor

capacitor完全支持传统的网络和渐进式网络应用。事实上，使用capacitor可以很容易地以最少的工作量发布iOS和Android应用商店应用程序的PWA版本。

安装

如果你正在使用capacitor构建iOS或Android应用程序，那么很可能你的应用程序中已经安装了capacitor。在capacitor，web平台只是一个web项目，为你的应用程序提供动力！如果尚未安装capacitor，请在继续之前查阅安装指南。

使用capacitor作为模块

一般来说，应用程序将使用一个支持导入JavaScript模块的构建系统的框架。在这种情况下，只需在应用程序顶部导入capacitor，就可以设置：

import { Capacitor } from '@capacitor/core';

要使用插件，请导入插件并调用它，注意只有具有web支持的插件才能实际提供有用的功能：

import { Plugins } from '@capacitor/core';

const position = await Plugins.Geolocation.getCurrentPosition();

把Capacitor作为脚本引入

要在不使用生成系统或bundler/module loader的web应用程序中使用capacitor核心，必须在capacitor.config.json文件中设置bundledWebRuntime的值为true，告诉capacitor将指定版本的capacitor核心复制到项目中，然后导入capacitor.js到你的index.html文件中:

{
  "bundledWebRuntime": true
}

拷贝你的项目：

npx cap copy web

在index.html里面，在你应用的JS文件之前引入capacitor.js:

<script type="text/javascript" src="capacitor.js"></script>

开发你的应用

很有可能，您正在使用一个像Ionic这样的框架来构建UI组件和构建应用。要开发capacitor web应用程序，尽管使用您的框架！

如果您不使用框架，Capacitor附带了一个支持HTML5路由的小型开发服务。要使用它，请运行：

npx cap serve

上线

当你准备好发布你的渐进式Web应用程序并将它与全世界共享时，只需上传Web目录的内容（例如，www/或build/文件夹）。

它将包含运行应用程序所需的所有内容！

PWA元件

一些电容器插件，如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'));

// 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);