[PWA] Show an Error when a POST or DELETE Fails in an Offline PWA
We're storing JSON data in the cache - but that only applies to HTTP GET
requests - and not to POST
or DELETE
requests.
We'll add a fetch
event listener to the service worker, where we can intercept all fetch requests in our app. We'll forward them to the server - but if they fail, then we'll return an error back to the app.
In the app, we can detect that error, and respond by showing an alert that the functionality isn't available in offline mode.
console.log("IN sw.js") workbox.skipWaiting();
workbox.clientsClaim(); workbox.routing.registerRoute(
new RegExp('https:.*min\.(css|js)'),
workbox.strategies.staleWhileRevalidate({
cacheName: 'cdn-cache'
})
) workbox.routing.registerRoute(
new RegExp('(http|https|localhost)://.*:4567.*\.json'),
workbox.strategies.networkFirst()
) // Handle the POST and DELETE requests by SW
self.addEventListener('fetch', event => {
if (event.request.method === "POST" || event.request.method === "DELETE") {
event.respondWith (
fetch(event.request).catch(err => {
return new Response(
JSON.stringify({error: "This action disabled while app is offline"}),
{headers: {
'Content-Type': 'application/json'
}}
)
})
)
}
}) workbox.precaching.precacheAndRoute(self.__precacheManifest || [])
[PWA] Show an Error when a POST or DELETE Fails in an Offline PWA的更多相关文章
- [转]Syntax error on token "Invalid Character", delete this token 的解决
原文 http://blog.csdn.net/actsai/article/details/24256987 主题 Eclipse Unicode Java eclipse 中遇到了Syntax ...
- Eclipse 中 Syntax error on token "Invalid Character", delete this token 的解决
eclipse中遇到了Syntax error on token "Invalid Character", delete this token(令牌“无效字符”上的语法错误,删除此 ...
- PWA学习心得
PWA学习心得 一.什么是PWA Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...
- 重识 PWA 进阶到 workbox3
看到PWA,似曾相识,但又感觉很模糊,于是乎,又重新翻阅文档,学习了一遍,顺便把相关知识学习了一下,比如service worker,workbox3. PWA 概念: 全称:Progressive ...
- PWA入门:手把手教你制作一个PWA应用
摘要: PWA图文教程 原文:PWA入门:手把手教你制作一个PWA应用 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 简介 Web前端的同学是否想过学习app开发,以弥补自 ...
- PWA渐进式web应用
PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化框架,让网页应用呈现 ...
- 前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)
一.背景:页面为何会卡? 1.1 等待时间长(性能) 项目本身包/第三方脚本比较大. JavaScript 执行阻塞页面加载. 图片体积大且多. 特别是对于首屏资源加载中的白屏时间,用户等待的时间就越 ...
- uafxcwd.lib(afxmem.obj) : error LNK2005 解决方法
项目为非MFC,但要用到MFC的库,使用过程中遇到的问题总结一下 uafxcwd.lib(afxmem.obj) : error LNK2005: "void * __cdecl opera ...
- error LNK2005 new,delete 等已经在LIBCMT.lib(delete.obj) 中定义 错误修正
http://blog.csdn.net/funnyskyf/article/details/5938597 1>uafxcw.lib(afxmem.obj) : error LNK2005: ...
随机推荐
- Codeforces 932.C Permutation Cycle
C. Permutation Cycle time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- 浅谈Visitor Pattern
第一步: 在介绍Visitor Pattern (访问者模式)之前,先简要介绍一下:双重分派. 在Visitor Pattern中双重分派是指:数据结构的每一个节点都可以接受一个访问者的调用(这句 ...
- 解决PKIX path building failed
起因 上周在生产环境部署时,把安全证书加到k8s-ingress中时发现报该错误 解决 找网上解决方案,因为这种问题相对比较少见,也没百度,直接谷歌,找到解决方案如下:https://stackove ...
- codechef AUG17 T2 Chef and Mover
Chef and Mover Problem Code: CHEFMOVR Chef's dog Snuffles has so many things to play with! This time ...
- 【ZOJ4063】Tournament(构造)
题意:n个人要打m轮比赛 每一轮每个人都要有一个对手.而且每个对手只能打一次.假设a与b打了,c与d打了, 那么后面的任意一轮如果a与c打了,那么b就必须和d打 问是否存在方案,输出字典序最小的一组, ...
- 使用 padding-bottom 设置高度基于宽度的自适应
我们在做移动端列表,通常会做到图文列表,列表是自适应的.当列表中有图片,图片的宽度是随着列表宽的变化而变化,我们为了在图片宽度变化的时候做到图片的不变形,所有采用以下办法. 本文章只讲语法 html ...
- request_mem_region 与 ioremap【转】
转自:http://blog.csdn.net/alada007/article/details/7700125 如果从根本上说起的话应该从Intel的处理器芯片与其它的芯片的不同说起,与这两个函数相 ...
- 自定义topo文件解析
from mininet.topo import Topo from mininet.net import Mininet from mininet.util import dumpNodeConne ...
- MySql笔记之修改数据库编码
修改前(系统默认编码) 查看编码命令: show variables like '%char%'; show variables like 'character%'; 两种方法 a) 暂时性修改 SE ...
- python实现无重复字符串的最长子串
给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc&qu ...