在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()将加载响应式拍照体验：
这个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);
脚本标签引入
PWA元素可以在index.html文件中通过脚本标签引入。 但是，请记住，这不适用于脱机情况。
文章评论