ionic5+capacitor+angular

大家好，欢迎来到IT知识分享网。

ionic 更新到5之后。创建项目会默认使用capacitor 容器。是ionic自己开发的一套类似cordova的东西。使用起来也比较简单。慢慢的会替代cordova，变成自己的东西吧。

官方地址https://capacitor.ionicframework.com/docs/basics/running-your-app

之前使用的是ionic cordova 来操作   现在使用npx cap 来操作

安装ionic

npm install -g ionic

创建项目

ionic start capApp tabs --capacitor

npm install --save @capacitor/core @capacitor/cli

npx cap init

npm run build

npx cap add android
npx cap add ios

npx cap copy

npm install cordova-plugin-name
npx cap sync

删除插件

npm uninstall --save cordova-plugin-splashscreen

更新插件

npm install cordova-plugin-name@latest
npx cap update

安装离子本地插件

离子原生提供了打字稿包装和一致的API并与科尔多瓦插件更容易开发的命名约定。它支持电容器，所以每当你找到一个离子本地包装你想使用，安装JavaScript代码，请安装相应的插件科尔多瓦，然后同步您的项目：

npm install @ionic-native/javascript-package-name
npm install cordova-plugin-name
npx cap sync

更新离子本地插件

类同的安装步骤。更新离子本地JavaScript库，删除然后重新添加科尔多瓦插件，然后更新您的项目：

npm install @ionic-native/javascript-package-name@latest
npm install cordova-plugin-name@latest
npx cap update

如果你不想冒险引进重大更改，使用npm update cordova-plugin-name代替@latest。

添加平台

npx cap add ios
npx cap add android

打开平台

npx cap open ios

运行

npx cap serve

构建发布新版本

//如果在ionic 则 ionic build
npm run build

构建完后配置到项目里

npx cap copy

定期更新依赖

npx cap update

service worker是一个可以拦截请求，并且创建缓存空间来缓存请求数据的一个工具，当然他还有其他的功能，如消息推送之类的，功能十分强大，具体使用方法可以看 https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

Capacitor建议我们使用Workbox工具来配置service worker，注册service worker的代码很简单。看这里https://www.jianshu.com/p/5f3e69e41253?tdsourcetag=s_pctim_aiomsg