详解使用angular框架离线你的应用(pwa指南)


Posted in Javascript onJanuary 31, 2019

简介

关于service worker,网络上已经有了较多的文章。总的来说它依靠缓存资源,拦截http请求,来帮助我们达到离线使用网站的效果。

而angular cli为了让使用service worker更加便利,为开发者提供了一个配置窗口(ngsw-config.json)和一个与service worker通讯的服务(SwUpdate)。

启用

1、新建项目后在项目根目录下键入ng add @angular/pwa

会为你的项目添加一些文件,其中包括上文提到的ngsw-config.json,为了即刻感受离线应用的魅力,现暂不需配置。

2、安装http-server npm install http-server -g

将用http-server启用的服务器来加载应用,这么做是为了模拟真实的生产环境,因为ng serve环境下无法启用service worker。

3、键入ng build --prod进行打包。 打包完成后进入dist下的项目根目录下,键入http-server -p <port>将打包后的应用部署在http-server指定的端口上。

4、打开浏览器进入控制台,以chrome为例,在network选项卡上勾选offline模拟离线使用。

此时重新刷新网页发现页面依然能够在离线状态下显示,说明service worker已经工作了。

配置

以上并没有手动配置ngsw-config.json,然而初始的配置还有许多不足,比如无法拦截缓存api请求。因此需要对该文件的配置参数做一个大概了解(点击浏览官方配置说明)。

参考官方的说明,我们了解到可以配置静态资源的缓存策略(配置项中的assetGroups)以及动态资源的缓存策略(配置项中的dataGroups)。

静态资源配置(assetGroups)

interface AssetGroup {
 name: string;
 installMode?: 'prefetch' | 'lazy';
 updateMode?: 'prefetch' | 'lazy';
 resources: {
  files?: string[];
  /** @deprecated As of v6 `versionedFiles` and `files` options have the same behavior. Use `files` instead. */
  versionedFiles?: string[];
  urls?: string[];
 };
}

这是该配置项的接口,下面对各个属性做一个简要的说明:

  • resources属性下可配置本地的静态资源(resources.files)和通过cdn来的静态资源(resources.urls)
  • name是需要编写的该资源集合的唯一的名字
  • installMode配置的是你的网站应用第一次在当前浏览器加载后,service worker应该进行的缓存策略。选择'prefetch'会将resources列出的资源一股脑儿的预先缓存起来,不管当前是否有访问到。选择'lazy'则不会预先缓存,而是在用到时才会进行缓存。
  • updateMode配置的是当检测到资源的版本改变之后,所进行的资源缓存策略。

如何得知资源的版本发生了变化呢?angular service worker会对比资源内容的hash值。如果hash值不同则版本不同。选择'prefetch'会立即缓存更新的资源,选择'lazy'会在用到时在进行缓存。不过,这里要注意如果在installMode的配置中没有选择'lazy'模式,则这里的'lazy'模式也不会生效。

动态资源配置(dataGroups)

export interface DataGroup {
 name: string;
 urls: string[];
 version?: number;
 cacheConfig: {
  maxSize: number;
  maxAge: string;
  timeout?: string;
  strategy?: 'freshness' | 'performance';
 };
}

这是缓存动态资源的配置项,其实就是缓存的ajax、fetch的response,将这些api请求的响应体进行缓存后,就可以在离线状态下使用。其中:

  • urls配置api的url
  • cacheConfig配置具体的缓存策略:
    • maxSize 缓存的最大条目数或响应数,太多则会暂用系统资源
    • maxAge 过期时间,该项与下面提到的strategy策略配合,如果设置过长,容易呈现老资源给用户。
    • timeout是指的应用发起真实网络请求后的等待时间,如果超时将会配合下面提到的strategy进行动作
    • strategy策略,选择'performance'会直接拦截网络请求,返回缓存(前提是有缓存,并且没有超过maxAge的时间),选择'freshness'会在timeout超时的时候返回缓存。

与service worker通讯

与service worker通讯可以让我们主动做很多事情,而不是仅仅依赖于ngsw-config.json配置,通过依赖注入一个SwUpdate*服务,我们可以主动要求查询、更新、激活应用的版本,(这部分内容笔者还未投入应用,详见官网描述)

总结

这篇文章我们分享了如何在angular里面使用service worker 进行离线场景的增强,其中包括

  • 引入@angular/pwa
  • 安装http-server,模拟生产环境
  • 配置ngsw-config.json 缓存策略
  • 简单描述了与service worker通讯的概念

相信今后angular框架能够在pwa应用方便给我们更多的方便。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
javascript new fun的执行过程
Aug 05 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
JavaScript异步加载问题总结
Feb 17 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
Angular PWA使用的Demo示例
Jan 31 #Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 #Javascript
微信小程序开发的基本流程步骤
Jan 31 #Javascript
JSON的parse()方法介绍
Jan 31 #Javascript
JSON.stringify()方法讲解
Jan 31 #Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 #Javascript
vue中的mvvm模式讲解
Jan 31 #Javascript
You might like
关于PHP实现异步操作的研究
2013/02/03 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
PHP实现微信提现功能
2018/09/30 PHP
PDO::inTransaction讲解
2019/01/28 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
对python Tkinter Text的用法详解
2018/10/11 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python连接mysql方法及常用参数
2020/09/01 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
门诊手术室工作制度
2014/01/30 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python