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

<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。

推荐阅读更多精彩内容