背景

随着 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 的兼容性：

What Web Can Do Today 查看 PWA 被支持的行为
is Service Worker ready? 查看 Service Worker 的浏览器兼容性

什么是 Ionic ?

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

紧跟 Angular 版本更新
提供 ios/android/ 全部分辨率的 Native 风格样式解决方案
基于 Cordova ，并可使用其各种插件调用 Native API
提供可视化布局工具
一次开发，全平台打包

使用 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 应用上线后我们就可在浏览器内访问并将其添加到桌面了，并且当手机处于飞行模式时依旧可以访问。

本文作者： Dongsj
本文链接： http://blog.dongsj.cn/20180503-ionic-first-pwa.html
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！