全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Capacitor
  4. 正文

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

2020年8月17日 1348点热度 6人点赞 0条评论

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

 

脚本标签引入

PWA元素可以在index.html文件中通过脚本标签引入。 但是,请记住,这不适用于脱机情况。

 

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 备忘
最后更新:2020年8月19日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号