For example, if the url is not match to any API endpoint, we want to return 404 error message. So first thing, we want to send the request to the server first. If got the response, then we just return it back. self.addEventListener('fetch', (event) =…

Previously we saw how to Hijacking all the reqest, but this is not useful. So now we want to see how to Hijacking one kind of request. For example we want servce worker only response to the request ends with ".jpg": self.addEventListener('fetch'…

We want to do offline first, the first thing we need to do is we should able to catch the browser request and return our cache data from serice worker. So user won't go to the real server to fetch data.  So let's see how to do that: self.addEventList…

第一小节:HTTP Basics:使用Proxy软件(例如Webscarab)来截断浏览器(客户端)和Server之间的HTTP通信,之后任意篡改得到预期结果即可. 第二小节:HTTP Splitting:(其实应该为HTTP Response Splitting) 分为两步 1.HTTP Splitting:通过注入HTTP request使得Server返回两个HTTP response(最起码是使得接收到Server返回响应的目标自己认为是接收到了两个HTTP response),而不是一…

本文翻译自:Rails from Request to Response 系列:个人选择了自己感兴趣的部分进行翻译,需要阅读原文的同学请戳前面的链接. 第一部分 导言(Introduction) 服务器 在讲 Rails 调用栈之前,先简单介绍一下不同服务器应用的作用,其中并不会涉及到各个服务器应用(比如 Thin 和 Unicorn 或 Nginx)的细节,因为文章的重点是讲 Rails 端的一些东西. 这里举一个 Unicorn 的简单例子,管窥整个 Rails 应用. Unicorn架构…

什么是PWA PWA(Progressive Web Apps,渐进式网页应用)是Google在2015年推出的项目,致力于通过web app获得类似native app体验的网站. 优点 1.无需客户端,少量流量即可安装 2.可添加到主屏并全屏运行 3.离线功能,响应更快,及时更新 4.PUSH能力 5.数据传输必须是https 缺点 1.safari对PWA的态度是考虑中,暂时还不支持 2.PUSH还不够成熟,依赖于Web Push Protocol,Chrome只支持Google私有的GC…

PWA (Progressive Web Apps) 是未来网页设计的方向. 渐进式网站. Angular v5 开始支持 pwa 网站 (所谓支持意思是说有一些 build in 的方法和规范去实现它) . 就目前来说 pwa 有几个特点 : 1.https 2.Service work 3.Cache API 4.拦截 Fetch (任何游览器发出的请求, 包括 index.html) 5.Push API 6.Share API 主要的用途是 : 1. offline view (通过 s…

一.传统web 应用 当前web应用在移动时代并没有达到其在桌面设备上流行的程度,下面有张图来对比与原生应用之间的差别. 究其原因,无外乎下面不可避免的几点: 移动设备网络限制-不可忽略的加载时间 web应用依赖于浏览器作为入口 体验与原生的差距 假如能解决以上的几点,对web app 来说会有多大的提升可以想象. 二.PWA是什么 PWA 全称Progressive Web Apps(渐进式Web应用程序),旨在使用现有的web技术提供用户更优的使用体验. 基本要求 可靠(Reliable)…

上篇文章我们对渐进式Web应用(PWA)做了一些基本的介绍. 渐进式Web应用(PWA)入门教程(上) 在这一节中,我们将介绍PWA的原理是什么,它是如何开始工作的. 第一步:使用HTTPS 渐进式Web应用程序需要使用HTTPS连接.虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的排名也会更靠前. 由于Chrome浏览器会默认将localhost以及127.x.x.x地址视为测试地址,所以在本示例中您并不需要开启HTTPS.另…

为什么要给 VUE 项目添加 PWA 为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏. 为了解决这个问题,我的解决方案是使用 PWA ,这样就可以将 js 缓存到本地,再次发布后,service-worker.js 会使旧的 js 失效,重新请求并缓存 js. 如果对于问题这个有更好的解决方案,务必请大佬指定一二 安装 PWA 的相关依赖包 yarn 安装 yarn add sw-…