使用 Ionic 快速构建一个 PWA 应用

背景

随着 iOS 11.3 的发布,Apple 已经允许用户将 PWA 应用添加到手机主屏,此举再一次将 PWA 应用推向了风口浪尖。本文就使用 Ionic 带领大家快速创建一个 PWA 应用。

什么是 PWA ?

下面是 Google 官方对 PWA 应用的定义

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging – Feel like a native app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

PWA 除了可以使用所有的前端技术构建页面外,还可在后台执行 Service Worker 脚本,如通知、实时语音、实时定位等。结合其无需上架 App Store 和跨平台的特性,势必对轻量级 App 发起一波不晓得冲击。

可访问以下地址查看 PWA 的兼容性:

什么是 Ionic ?

Ionic 是一套 Hybird App 开发框架,其以 Angular 和 Cordova 作为依赖,具有以下特性:

使用 Ionic 快速构建一个 PWA 应用

下面我们来使用 Ionic 快速创建一个 PWA 应用并添加到手机桌面。

安装 Ionic

安装后可通过 ionic --version 查看版本,我目前使用的版本是 3.20.0

创建一个 Ionic 项目

Ionic 提供了多个模板项目以供创建,此处我们选择 tutorial
选择模板项目
之后会提示是否整合 ios / android 配置和是否添加 Ionic Pro SDK,皆选择 N 后等待依赖安装即可创建项目完成。
项目创建完成

快速查看 Ionic 项目

Ionic 提供了简易的开发服务器快速查看项目,在 Ionic 项目下执行以下命令:

默认会在 http://localhost:8100 启动,在浏览器内访问即可:
启动后

移除 cordova.js

该文件主要用于访问 cordova app,我们不需要引用,在 src/index.html 内注释以下代码即可:

使用 Ionic 生成的 service-worker.js

Ionic 已经帮我们生成了一个管理 PWA 缓存的 service-worker ,查看 src/service-worker.js 文件,有以下内容:

如需使用 service-worker,只需在 src/index.html 内将以下注释放开:

查看 Ionic 生成的 manifest.json

Ionic 已经帮我们生成了一个管理 PWA 入口和样式的 manifest.json 文件,查看 src/manifest.json 文件,有以下内容:

Ionic 已经帮我们设置了 PWA 入口、名称、颜色等,具体各字段意义可查看 MDN

build Ionic PWA

至此 PWA 应用已经完成,我们需执行以下命令 build 项目:

完成后代码会生成在项目的 www 文件夹下,静态资源服务器可以参考我的另一篇博客 使用 Express 实现一个简单的 SPA 静态资源服务器

访问 PWA 应用并添加到桌面

PWA 应用上线后我们就可在浏览器内访问并将其添加到桌面了,并且当手机处于飞行模式时依旧可以访问。
访问PWA

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复