service worker 实现页面通信
sw.js
基本写法:
function send_message_to_sw(msg){
navigator.serviceWorker.controller.postMessage("Client 1 says '"+msg+"'");
}
广播写法:信息可以同步作用域下所有页面。
self.addEventListener('message', function(event){
console.log(event.data);
console.log(event.ports);
event.ports[0].postMessage(event.data + 1);
});
service worker 实现页面通信的更多相关文章
- 渐进式web应用开发---Service Worker 与页面通信(七)
_ 阅读目录 一:页面窗口向 service worker 通信 二:service worker 向所有打开的窗口页面通信 三:service worker 向特定的窗口通信 四:学习 Messag ...
- 浅析Service Worker
一.service worker是什么? 平常浏览器窗口中跑的页面运行的是主JavaScript线程,DOM和window全局变量都是可以访问的. Service Worker是走的另外的线程,可以理 ...
- JavaScript是如何工作的:Service Worker的生命周期及使用场景
摘要: 理解Service Worker. 原文:JavaScript 是如何工作的:Service Worker 的生命周期及使用场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...
- 渐进式web应用开发---service worker (二)
阅读目录 1. 创建第一个service worker 及环境搭建 2. 使用service worker 对请求拦截 3. 从web获取内容 4. 捕获离线请求 5. 创建html响应 6. 理解 ...
- service worker介绍
原文:Service workers explained 译者:neal1991 welcome to star my articles-translator, providing you advan ...
- 使用 Service Worker 缓解网站 DDOS 攻击
前言 传统的 DDOS 防御开销很大,而且有时效果并不好. 例如使用 DNS 切换故障 IP 的方案,由于域名会受到缓存等因素的影响通常有分钟级延时,前端难以快速生效.例如使用 CDN 服务,虽可抵挡 ...
- Service Worker基础知识整理
Service Worker是什么 service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本.它的特性将包括推送消息,背景后台同步, geofencing(地理围栏定位),拦截 ...
- 转《service worker在移动端H5项目的应用》
1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术,也不是一个框架,我们可以把她理解为一种模式,一种通过应用一些技术将 Web App ...
- 渐进式web应用开发---service worker 原理及介绍(一)
渐进式web应用(progressive Web app) 是现代web应用的一种新形式.它利用了最新的web功能,结合了原生移动应用的独特特性与web的优点,为用户带来了新的体验. 一:传统web端 ...
随机推荐
- iOS UITextField限制输入字数
关于iOS的文本框有时需要限制字数,如手机号,在UITextField的代理单纯写一个判断,在字数超过限制时,这时再想删除就删除不掉,可以在代理这样写,就解决 - (BOOL)textField:(U ...
- 【Adobe Air程序开发】eclipse安装flash builder 4.7插件以及java、flex整合开发
看了看网上不少文章,发现很多内容都是很老的,没法用.故把自己的安装过程记录下来,方便以后使用 1.在这里,eclipse使用最新版eclipse juno 3.7 2.在adobe官网https:// ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- csp模拟赛低级错误及反思
\(csp\)模拟赛低级错误及反思. 1.没开\(longlong\). 反思:注意数据类型以及数据范围. 2.数组越界(前向星数组未开两倍,一题的数据范围应用到另一题上,要开两倍的写法为开两倍数组) ...
- Linux就该这么学——新手必须掌握的命令之文件编辑命令组
cat 命令 用途 : 用于查看纯文本文件 格式 : cat [选项] [文件] 示例 : more 命令 用途 : 用于查看纯文本文件(内容较多的),可以用”Enter” 键或者”Space”键向下 ...
- 老贾的幸福生活day03 之思维导图
思维导图 层级关系 从大范围到具体 编程语言 编译型 C C++ ...... 解释型 python php ......... python 基础语法 基础数据类 ...
- luffy后台相关设置
目录 项目创建 环境 创建项目 重构项目目录 配置开发环境 配置日志 环境变量 dev.py 在写项目直接导入utils文件夹也不''错误提示'' 封装logger dev.py utils/logg ...
- 【二分】Shell Pyramid
[来源]:2008年哈尔滨区域赛 [题目链接]: http://acm.hdu.edu.cn/showproblem.php?pid=2446 [题意] 题目是真的长呀,其实就问一个问题. 按照图里面 ...
- 两个链表的第一个公共结点——牛客offer
题目描述: 输入两个链表,找出它们的第一个公共结点. 题目分析: 只是数据域相同不是公共节点.公共结点代表该节点在两个链表中的数据域和指针域都是相同的,这意味着从该公共节点开始,后面的结点都是两个链表 ...
- 牛客 40E 珂朵莉的数论题
大意: 给定$x,y$, 求第$x$小的最小素因子为$y$的数, 若答案>1e9输出0. 若$y>=60$, 可以暴力筛出1e9/60以内的答案. 否则容斥+二分算出答案. #includ ...