详解使用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 相关文章推荐
js动态删除div元素基本思路及实现代码
May 08 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
详解Vue方法与事件
Mar 09 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
详解vue axios中文文档
Sep 12 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 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下保存远程图片到本地的办法
2010/08/08 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
python中dir函数用法分析
2015/04/17 Python
python中循环语句while用法实例
2015/05/16 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python文本数据相似度的度量
2018/03/12 Python
python获取url的返回信息方法
2018/12/17 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
软件测试工程师结构化面试题库
2016/11/23 面试题
志愿者服务感言
2014/02/27 职场文书
感恩教育活动总结
2014/05/05 职场文书
涨价通知怎么写
2015/04/23 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL