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

2,717 阅读3分钟
原文链接: blog.dongsj.cn

背景

随着 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

npm install -g ionic@latest

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

创建一个 Ionic 项目

ionic start ionic-first-pwa

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

快速查看 Ionic 项目

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

ionic serve

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

移除 cordova.js

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

<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>

使用 Ionic 生成的 service-worker.js

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

'use strict';

// 该文件内为 service-worker 的各种工具集
importScripts('./build/sw-toolbox.js');

// 设置缓存名称
self.toolbox.options.cache = {
name: 'ionic-cache'
};

// 缓存 ionic 各主资源文件
self.toolbox.precache(
[
'./build/main.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);

// 当第一次访问其他资源时进行缓存
self.toolbox.router.any('/*', self.toolbox.cacheFirst);

// 仅在离线时进行缓存
self.toolbox.router.default = self.toolbox.networkFirst;

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

<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->

查看 Ionic 生成的 manifest.json

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

{
"name": "Ionic",
"short_name": "Ionic",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "assets/imgs/logo.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#4e8ef7",
"theme_color": "#4e8ef7"
}

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

build Ionic PWA

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

npm run ionic:build --prod

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

访问 PWA 应用并添加到桌面

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