1.关键字
Ionic 4
不久前，ionic-team发布了Ionic 4的第一个正式版，最大的一个变化：Ionic for Everyone；对Vue、React、Angular等主流框架提供了支持。
在此之前，ionic一直是基于Angular进行迭代，从最初的AngularJS到Angular2，从未改变。但是在2013年到2018年间，前端发生了巨大的变化。直到Web Components的API成熟完善，Ionic团队终于发现了解决问题的关键。从2017年开始，Ionic团队试着基于Web Components进行开发，经历了漫长的实验、开发，终于Ionic 4诞生了，Ionic 4是两年多的研究和努力的结晶，将Ionic从“mobile for Angular”转变为强大的UI设计系统和应用程序框架，适用于世界上每个Web开发人员。
原文请戳这里
Capacitor
Capacitor是一个跨平台的应用程序编辑器，可以将你的web项目编译成原生的IOS、Android或Electron项目。
例如，如果应用中依赖于用户拍照的相机应用，用Capacitor可以检查相机是否可用，如果不可用，请让用户上传文件，代码如下
import { Capacitor } from '@capacitor/core';
const isAvailable = Capacitor.isPluginAvailable('Camera');
if (!isAvailable) {
// Have the user upload a file instead
} else {
// Otherwise, make the call: Camera.getPhoto()
}
了解更多Capacitor请看这里
PWA
PWA是Progressive Web App的英文缩写， 中文是渐进式增强WEB应用。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。具体可以看2019前端必会黑科技之PWA这篇文章
2.代码
初始化Ionic项目
利用ionic cli工具可以快速的构建一个项目
第一步：
npm 全局安装 Ionic
npm i -g ionic
使用如下命令确认是否安装成功
ionic -V
如果展示下图表示安装成功
安装ionic成功后ionic -V结果图
第二步：
用Ionic 4新建一个项目，非常简单
ionic start appNme blank
appName 是你的项目名称，ionic提供了三种常用“blank”、“tabs”、“sidemenu”选项，以便于快速创建合适的项目。效果如图
三种常用选项图
按照安装提示一步一步往下
第三步：
cd appName
运行
ionic serve
看到这个界面就成功了，一个空白的ionic项目就建好了，接下来就是把它变成一个PWA
构建PWA应用
构建一个PWA应用非常简单
1.增加并引用App Manifest文件
为了路径好找，我在assets文件夹下面新增了一个conf文件夹来放manifest.json和service worker的配置文件sw.js
manifest.json
manifest.json文件的内容如何配置、字段解释和使用方法，请看这里
manifest.json内容
在index.html的head中引用
<link rel="manifest" href="assets/conf/manifest.json" />
2.配置一个service worker
service worker是一个可以拦截请求，并且创建缓存空间来缓存请求数据的一个工具，当然他还有其他的功能，如消息推送之类的，功能十分强大，具体使用方法可以看这里。
Capacitor建议我们使用Workbox工具来配置service worker，注册service worker的代码很简单。
新建sw.js文件，也是在assets/conf下创建的
sw.js
注册service worker，在index.html的body中加入以下代码
<script>
// Check that service workers are registered
if ('serviceWorker' in navigator) {
console.log('before loading')
// Use the window load event to keep the page load performant
window.addEventListener('load', () => {
console.log('loading')
navigator.serviceWorker.register('./assets/conf/sw.js');
});
}
</script>
这个时候，运行刷新，打开控制台Application，如果看到你的sw.js，说明的service worker已经成功运行起来了，这个时候你就可以使用Workbox提供的方法去拦截你的某些请求，并缓存数据了，Workbox具体使用及Api请查看Workbox的文档
service worker
总结
本文只是简单介绍了，怎么用Ionic 4搭建一个PWA的项目，其他具体的如：manifest.json里面的缓存配置；service worker的路由拦截、缓存、消息发布；Capacitor的api使用等问题，都还没有深入的涉及，还在一步一步爬坑的过程中，希望和大家共勉，有错漏的地方，还请多多指正。如果你对pwa技术感兴趣的话，请加入qq群620966990, 大家一起盘PWA。
网友评论