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

栏目: 编程语言 · AngularJS · 发布时间: 5年前

内容简介:关于service worker,网络上已经有了较多的文章。总的来说它依靠缓存资源,拦截http请求,来帮助我们达到离线使用网站的效果。而angular cli为了让使用service worker更加便利,为开发者提供了一个配置窗口(以上并没有手动配置

简介

关于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应用方便给我们更多的方便。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Kotlin程序员面试算法宝典

Kotlin程序员面试算法宝典

孙伟、楚秦 / 机械工业出版社 / 2018-12 / 69

本书是一本讲解程序员面试笔试算法的书籍。在写法上,除了讲解如何解答算法问题以外,还引入了例子辅以说明,以便读者能够更加容易地理解。 本书将程序员面试笔试过程中的各类算法类真题一网打尽。在题目的广度上,通过各种渠道,搜集了近3年来几乎所有IT企业面试笔试算法高频题目,所选择题目均为企业招聘使用题目;在题目的深度上,本书由浅入深、庖丁解牛式地分析每一个题目,并提炼归纳,同时,引入例子与源代码、时......一起来看看 《Kotlin程序员面试算法宝典》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具