Ionic4 + Capacitor构建一个pwa

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中引用

2.配置一个service worker

service worker是一个可以拦截请求，并且创建缓存空间来缓存请求数据的一个工具，当然他还有其他的功能，如消息推送之类的，功能十分强大，具体使用方法可以看这里。

Capacitor建议我们使用Workbox工具来配置service worker，注册service worker的代码很简单。

新建sw.js文件，也是在assets/conf下创建的

sw.js

注册service worker，在index.html的body中加入以下代码

这个时候，运行刷新，打开控制台Application，如果看到你的sw.js，说明的service worker已经成功运行起来了，这个时候你就可以使用Workbox提供的方法去拦截你的某些请求，并缓存数据了，Workbox具体使用及Api请查看Workbox的文档

service worker

总结

本文只是简单介绍了，怎么用Ionic 4搭建一个PWA的项目，其他具体的如：manifest.json里面的缓存配置；service worker的路由拦截、缓存、消息发布；Capacitor的api使用等问题，都还没有深入的涉及，还在一步一步爬坑的过程中，希望和大家共勉，有错漏的地方，还请多多指正。如果你对pwa技术感兴趣的话，请加入qq群620966990, 大家一起盘PWA。