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. python everything is object

    python面向对象非常彻底,即使过程式的代码风格,python在运作的时候也是面向对象的.everything is object. 差异 在面向对象的理念上,python和非常工程化的面向对象语言 ...

  2. 第七篇、Nginx Install On Mac

    方式一: 在mac上安装nginx,依次安装对应的依赖 pcre ./configure --prefix=/usr/local/pcre-8.37 --libdir=/usr/local/lib/p ...

  3. Zend Server安装后首次运行就出现Internal Server Error的解决(转)

    新近学习php,结果装了Zend Server上来就报错,网上找到了解决方法,照着做果然可行,转之. 刚才安装了Zend Server,安装后首次运行就爆出了一个Internal Server Err ...

  4. date日期比较和格式化方法

    时间的比较 var now = new Date();//现在时间 var setDate = new Date(2017,0,5,17,55,55);//设定的时间 laert(now < s ...

  5. 浏览器兼容性判定写法格式(ie)

    条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]> <!- ...

  6. javascript中的基本数据类型

    在javascipt中有五大基本数据类型,列表如下: 1.数字 他们又又包括(正负整数,浮点数)十进制数,十六进制数与八进制数,指数和特殊数值NaN,(Infinity,-Infinity)正负无穷 ...

  7. Wdcp缺少mod_rewite模块

    1.下载apache源码包,解压并查找到mod_rewrite.c文件 tar -zxvf httpd-2.2.27.tar.gz cd httpd-2.2.27 [root@localhost ht ...

  8. shell 脚本中 命令

    终端工具tput和stty是两款终端处理工具tput cols,lines,longname,cpu 100 100 输入密码时,不能让输入的内容显示出来.用stty #!/bin/bash #Fil ...

  9. flask request

    请求对象要操作 URL (如 ?key=value )中提交的参数可以使用 args 属性:searchword = request.args.get('key', '')用户可能会改变 URL 导致 ...

  10. SQLSERVER 2008 R2版本密钥(摘)

    开发版32位:MC46H-JQR3C-2JRHY-XYRKY-QWPVM开发版64位:FTMGC-B2J97-PJ4QG-V84YB-MTXX8 工组版:XQ4CB-VK9P3-4WYYH-4HQX3 ...