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) => {

    event.respondWith(
fetch(event.request).then( (response) => {
// fetch the request frist return response;
})
)
});

Then we handle 404 error:

self.addEventListener('fetch', (event) => {

    event.respondWith(
fetch(event.request).then( (response) => {
if(response.status === ){
return fetch('/img/dr-evil.gif');
} return response;
}).catch( () => {
return new Response("Something totally wrong");
})
)
});

[PWA] 6. Hijacking response的更多相关文章

  1. [PWA] 5. Hijacking one type of request

    Previously we saw how to Hijacking all the reqest, but this is not useful. So now we want to see how ...

  2. [PWA] 4. Hijacking Request

    We want to do offline first, the first thing we need to do is we should able to catch the browser re ...

  3. HTTP Response Splitting攻击探究 <转>

    第一小节:HTTP Basics:使用Proxy软件(例如Webscarab)来截断浏览器(客户端)和Server之间的HTTP通信,之后任意篡改得到预期结果即可. 第二小节:HTTP Splitti ...

  4. [Rails] 从 Request 到 Response(1)

    本文翻译自:Rails from Request to Response 系列:个人选择了自己感兴趣的部分进行翻译,需要阅读原文的同学请戳前面的链接. 第一部分 导言(Introduction) 服务 ...

  5. 轻松把你的项目升级到PWA

    什么是PWA PWA(Progressive Web Apps,渐进式网页应用)是Google在2015年推出的项目,致力于通过web app获得类似native app体验的网站. 优点 1.无需客 ...

  6. Angular 学习笔记 ( PWA + App Shell )

    PWA (Progressive Web Apps) 是未来网页设计的方向. 渐进式网站. Angular v5 开始支持 pwa 网站 (所谓支持意思是说有一些 build in 的方法和规范去实现 ...

  7. 前端应该了解的PWA

    一.传统web 应用 当前web应用在移动时代并没有达到其在桌面设备上流行的程度,下面有张图来对比与原生应用之间的差别. 究其原因,无外乎下面不可避免的几点: 移动设备网络限制-不可忽略的加载时间 w ...

  8. 渐进式Web应用(PWA)入门教程(下)

    上篇文章我们对渐进式Web应用(PWA)做了一些基本的介绍. 渐进式Web应用(PWA)入门教程(上) 在这一节中,我们将介绍PWA的原理是什么,它是如何开始工作的. 第一步:使用HTTPS 渐进式W ...

  9. 为 VUE 项目添加 PWA 解决发布后刷新报错问题

    为什么要给 VUE 项目添加 PWA 为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏 ...

随机推荐

  1. JS 打字机效果

    请点我,查看效果 我送过你礼物 试过对你不管不顾 我挂过你电话 也曾为你哭到沙哑 我曾经为你去学做过晚餐 曾觉得你的关心太烦 也曾为你起得很早 试过狠心把你甩掉 试过偷偷拍你的微笑 也曾经把你电话删掉 ...

  2. Javascript中null值,特别注意的两点

    null 是一个javascript字面量,表示空值,就是没有对象被呈现.他是javascript原始值之一.null值常被放在期望一个对象上,但是不引用任何对象的参数位置,也就是说对象的初始化. 我 ...

  3. Bootstrap_Javascript_选项卡

    选项卡Tabs是Web中一种非常常用的功能.用户点击或悬浮对应的菜单项,能切换出对应的内容. 一 . 结构分析 Bootstrap框架中的选项卡主要有两部分内容组成: 选项卡组件(也就是菜单组件),对 ...

  4. ps的使用方法

    1.打开原图素材,Ctrl + J把背景图层复制一层,按Ctrl + Shift + U去色,执行:滤镜 > 模糊 > 高斯模糊,数值4,图层混合模式为滤色,图层不透明度改为27%. 2. ...

  5. 重构oceanbase的一个函数

    我去,今天读了一下ob的源码,感觉有点乱啊!!!好吧,当作练手,我重构了一个函数 void* ObMySQLCallback::decode(easy_message_t* m) { uint32_t ...

  6. 关于MYSQL优化(持续更新)

    *利用MYSQL数据缓存提高效率,注意事项: 1.应用环境:不经常改变的表及对此表相同的查询 2.不适用于服务器端编写的语句 3.根据数据使用频率,合理分解表 4.合理使用默认条件,提高命中率 5.统 ...

  7. Python 日期格式化 及 schwartzian排序

    __author__ = 'root' import datetime import time import copy # 12/Dec/2012:23:59:50 # 12/Sep/2012:23: ...

  8. MATLAB中多行注释的三种方法

    MATLAB中多行注释的三种方法 A. %{ 若干语句 %} B. 多行注释: 选中要注释的若干语句, 编辑器菜单Text->Comment, 或者快捷键Ctrl+R 取消注释: 选中要取消注释 ...

  9. SKYLINE

    uvalive4108:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&pag ...

  10. 通过redis的monitor命令排除故障

    项目里有10台服务器都在一个刀箱里,其中一台是redis缓存服务器,另外的是app服务器.通过监控发现这个刀箱的流量750M,其中缓存服务器的流量达105M,这么高的流量已经造成其它项目的服务器网络延 ...