简介

关于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"color: #ff0000">

export interface DataGroup {
 name: string;
 urls: string[];
 version"color: #ff0000">与service worker通讯

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

总结

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

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

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

标签:
angular,pwa离线应用,angular,pwa离线

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。