在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
文件中通过脚本标签引入。 但是,请记住,这不适用于脱机情况。
文章评论