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 实现页面通信的更多相关文章

  1. 渐进式web应用开发---Service Worker 与页面通信(七)

    _ 阅读目录 一:页面窗口向 service worker 通信 二:service worker 向所有打开的窗口页面通信 三:service worker 向特定的窗口通信 四:学习 Messag ...

  2. 浅析Service Worker

    一.service worker是什么? 平常浏览器窗口中跑的页面运行的是主JavaScript线程,DOM和window全局变量都是可以访问的. Service Worker是走的另外的线程,可以理 ...

  3. JavaScript是如何工作的:Service Worker的生命周期及使用场景

    摘要: 理解Service Worker. 原文:JavaScript 是如何工作的:Service Worker 的生命周期及使用场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. ...

  4. 渐进式web应用开发---service worker (二)

    阅读目录 1. 创建第一个service worker 及环境搭建 2. 使用service worker 对请求拦截 3. 从web获取内容 4. 捕获离线请求 5. 创建html响应 6. 理解 ...

  5. service worker介绍

    原文:Service workers explained 译者:neal1991 welcome to star my articles-translator, providing you advan ...

  6. 使用 Service Worker 缓解网站 DDOS 攻击

    前言 传统的 DDOS 防御开销很大,而且有时效果并不好. 例如使用 DNS 切换故障 IP 的方案,由于域名会受到缓存等因素的影响通常有分钟级延时,前端难以快速生效.例如使用 CDN 服务,虽可抵挡 ...

  7. Service Worker基础知识整理

    Service Worker是什么 service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本.它的特性将包括推送消息,背景后台同步, geofencing(地理围栏定位),拦截 ...

  8. 转《service worker在移动端H5项目的应用》

    1. PWA和Service Worker的关系 PWA (Progressive Web Apps) 不是一项技术,也不是一个框架,我们可以把她理解为一种模式,一种通过应用一些技术将 Web App ...

  9. 渐进式web应用开发---service worker 原理及介绍(一)

    渐进式web应用(progressive Web app) 是现代web应用的一种新形式.它利用了最新的web功能,结合了原生移动应用的独特特性与web的优点,为用户带来了新的体验. 一:传统web端 ...

随机推荐

  1. SSD是什么

    SSD即固态硬盘,相较于HDD(机械硬盘),硬件上最主要的区别就是存储介质发生了改变,SSD采用NAND Flash作为存储介质,而HDD采用磁盘作为存储介质.虽然这两种存储介质都是非易失性的,但是他 ...

  2. Java 基础篇之注解

    注解 注解,其实是代码里的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相应的处理.通过使用注解,可以在不改变原有逻辑的情况下,在源文件中嵌入补充一些信息. Annotation 提供了一 ...

  3. Pulse Secure 任意文件读取(CVE-2019-11510)漏洞

    漏洞分析 我们可以通过CVE-2019-11510这个未授权的任意文件读取漏洞把以下文件下载回来. /etc/passwd /etc/hosts /data/runtime/mtmp/system / ...

  4. sql绕过转义符注入

    宽字节绕过总结 1.  重点:转义符反斜杠\,ASCII码0x5C 2.  在双字节字符集中, 在\前面增加高字节,0x5C被当做低字节,组合为“汉字”,导致\符号被“吃掉”,后续字符逃出限制,从而绕 ...

  5. ambari 快速安装部署

    OS:Linux CPU消耗大,要准备5G以上,不然集群启动不了(我自己给它配了8G,启动整个集群是没问题,要用的话估计不够) 一.准备工作: 1.关闭防火墙:sudo ufw disable/ 2. ...

  6. 在windows系统电脑上同时安装python2.x和python3.x版本

    在同一个电脑机子(windows系统)上安装同时安装python2.x和python3.x版本. 一.python2.x和python3.x安装 步骤1:在python官网(https://www.p ...

  7. 【Python】【demo实验10】【练习实例】【打印斐波那契数列】

    斐波那契数列介绍: 斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子 ...

  8. joda-time使用

    pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  9. STL queue 常见用法详解

    <算法笔记>学习笔记 queue 常见用法详解 queue翻译为队列,在STL中主要则是实现了一个先进先出的容器. 1. queue 的定义 //要使用queue,应先添加头文件#incl ...

  10. 老贾的幸福生活day03 之思维导图

    思维导图 层级关系 从大范围到具体 编程语言 ​ 编译型 ​ C ​ C++ ​ ...... ​ 解释型 ​ python php ​ ......... python ​ 基础语法 ​ 基础数据类 ...