背景
随着 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
- 本文链接: blog.dongsj.cn/20180503-io…
- 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!