详解使用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 相关文章推荐
浅谈javascript中的作用域
Apr 07 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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 MemCached高级缓存配置图文教程
2010/08/05 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Python导入oracle数据的方法
2015/07/10 Python
python实现类之间的方法互相调用
2018/04/29 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
植物选择:Botanic Choice
2017/02/15 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
校长岗位职责
2013/11/26 职场文书
女大学生自我鉴定
2013/12/09 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
学生感冒英文请假条
2014/02/04 职场文书
联片教研活动总结
2014/07/01 职场文书
2014年共青团工作总结
2014/12/10 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
李强为自己工作观后感
2015/06/11 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript