今天使用Chrome发送查看本地swagger文档时请求失败,错误码404。查看后台日志发现浏览器显示的是/swagger请求但是后台收到的是/error请求,更换浏览器发送请求正常。查看DevTools发现Chrome后台有多个Service Workers在运行:有一个正好与我的后台地址对应,可能是前两天调试另一个项目的时候启动的,Unregister 它,再发送请求,成功。...
请参阅立即了解如何在
Chrome
中启用
Service
Worker
。
Open
chrome
://flags/#enable-experimental-web-platform-features in the
Chrome
browser
Enable "Enable experimental Web Platform features."
Restart
Chrome
注意Google
Chrome
v40中断了
Service
Worker
s的加载。 目前,请使用Google
Chrome
Canary(我测试过v42)。 您也可以在Firefox中加载
Service
Worker
(在about:config页面中打开
Service
Worker
之后),但是Firefox实现了不同的通信模型,因此无法将命令发送到Se
扩展以阻止
Chrome
中的
Service
Worker
s注册
早期版本可在Firefox上使用。 已停止支持Firefox,因为与
Chrome
的主要区别
加载后,此扩展名将阻止注册
Service
Worker
s。
如果要通过此代码在Firefox上手动安装,请将manifest.json更改为:
"manifest_version": 2,
"applications": {
"gecko": {
"id": "bloooock
service
worker
s@eeeeeeeeeeeeeeeeeemail.com",
"strict_min_version": "52.0"
"name": "Block
Service
Worker
s",
"description": "Disallow to register
Service
Worker
s",
"version": "0.3.0",
"icons": {
"16": "logox16.png",
"48": "logox48.png
注册多个不同范围的 SW 是完全可以的。 (使用
Chrome
Canary 验证 - 43.0.2357.2)
// Registering multiple SWs with different scopes.
navigator.
service
Worker
.register('sw-foo.js', {scope: '/foo'});
navigator.
service
Worker
.register('sw-bar.js', {scope: '/bar'});
套路问题。 这不是一回事。 是这个人:
基本上,他戴着大礼帽,住在你的电脑里,等着你告诉他你想创建什么样的应用程序。
并非每台新计算机都预装了 Yeoman。 他住在包存储库中。 你只需要问他一次,然后他就收拾东西搬进你的硬盘。 确保你清理干净,他喜欢新的和闪亮的东西。
npm install -g yo
自耕农发电机
约曼轻装上阵。 他搬进来的时候没有带任何发电机。你可以把发电机想象成一个插件。 您可以选择要创建的应用程序类型,例如 Backbone 应用程序甚至
Chrome
扩展程序。
要从 npm 安装 generator-
service
-
worker
s,请运行:
npm install -g generator-
service
-
worker
s
最后,启动生成器:
yo
Service
Worker
s
前端缓存前言前端缓存简介http缓存ExpiresCache-ControlLast-Modified / If-Modified-SinceEtag / If-None-Match浏览器缓存Storage前端数据库应用缓存
Service
Worker
兼容性成熟程度调试方法使用条件生命周期举个栗子
Work
box简介使用者基本配置precacheruntimecache举个栗子原理总结
本文首...
这里用的是**“manifest_version”: 3**,所以配置文件(manifest.json)跟2的写法有些不一样了,官网上是这样写
照着官网写,貌似没毛病哦,可是就是出了毛病,背景页无效
2、文件引入问题:
我给放在js文件夹里面了,这样是不对的,background文件要放在根目录。
所以,解决办法就是把background.js放在根目录引入就行了,看图:
完美收官!
fetch 是
Work
OrGlobalScope 这个 mixin 中的一个方法,用于获取一个网络进程,通常为请求地址;
它返回一个 promise 对象,当网络正常或未被请求拦截的时候,会 resolve 一个 response 对象,否则就 reject 结束
Promise<Response> fetch(req[, obj]);
req:获取的资源
Request对象
obj:请求设置,可选
fetch("htt
最近接触了
Service
Worker
的一些东西,整理了一些基本的东西。因为本人不是做JS开发所以对JS理解没有那么深,所以这篇文章是看了一些国外的博客,MDN后加了一些自己的理解,有些地方翻译的不是太准。
参考资料:
MDN:https://dbwriteups.wordpress.com/2015/11/16/
service
-
worker
s-part-4-back
我在之前有空的时候粗略学习了一下
Service
Worker
;最近有空,所以花时间再去学习了下。我在这里整理了下,希望对大家有帮助。
同时,如果文章中有错误或者描述不当的地方,欢迎大家能够帮我指正,谢谢。
PS:文章很长,含有大量示例代码。大家可以慢慢看:)
作为一个比较新的技术,大家可以把
Service
Worker
理解为一个介于客户端和服务器之间的一个代理服务器。在 Servi...
学习webpack的时候用了下
work
Service
,按了个
work
box插件。然后手欠,把浏览器里缓存清了,导致没有原文件,
work
box一直提示,通过代码unregister已经不起作用了。在查阅net
work
的时候,才发现该如何通过浏览器去操作。
打开控制台
找到Application
点击
Service
Worker
s
找到对应的
worker
,点击卸载
然后就不会再有提示了。8080端口终于清静了。
service
worker
是浏览器运行在后台,与网页主线程独立的另一个线程,这种工作子线程的出现通常是为了做一些比较耗费性能的计算,有需要时再和主线程通讯,告知主线程计算结果,这样将渲染与计算独立开开,就避免了阻塞情况。
service
worker
本质上充当web应用程序、浏览器与网络(可用时)之间的代理服务器,它会拦截网络请求并根据网络是否可用来采取适当的动作,更新来自服务器的资源,是web
worker
的一种,它是一个注册在指定源和路径下的事件驱动
worker
。
一、什么是浏览器缓存
以往谈起性能优化,大部分时候都是从后端聊起,数据库的设计,缓存的使用等。其实前端在性能优化方面可做的也很多,如:减少http请求数、使用cdn、压缩合并css/js等,浏览器缓存就是把已经请求过的Web资源进行存储,当用户刷新页面或者下次访问时候,浏览器根据缓存机制决定是否需要向服务端发起请求。 所以缓存可以带来:减少网络带宽消耗、降低服务器压力、减少网络延迟,加快页面打开速度等优点
二、浏览器缓存有哪些
1、http缓存是基于HTTP协议的浏览器文件级缓存机制。
2、w...
在介绍
service
之前,先引入一下PWA(由Google的
Chrome
团队创造),技术支持主要是
Service
Worker
和Web App Mainfest
PWA是一种webapp模型,是一种渐进的web app,利用一些web特性,配合ui使用,增强web app的用户体验。(手机使用Safari 进入 mi.com 将它保存在手机桌面上,点击桌面上相应快捷方式时,不会再显示url)。
什么是
Service
Worker
websocket是H5的新API,是一段运行在浏览器后台的JavaScript脚本,独立于当前页面,因此不能和网页交互,它可以拦截和处理网络请求,实现缓存资源并在离线时响应用户的请求。
Service
Worker
生命周期
激活,激活成功后可进入
chrome
://inspect/#
service
-
worker
s
查看
当前的
service
worker
,这个阶段