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. Redis4.0新特性 -Lazy Free

    Redis4.0新增了非常实用的lazy free特性,从根本上解决Big Key(主要指定元素较多集合类型Key)删除的风险.笔者在redis运维中也遇过几次Big Key删除带来可用性和性能故障. ...

  2. Redis的大白话解释

    Redis的官方解释可以百度,这里讲redis缓存为啥速度非常快! 这么说吧,别人问你什么是“redis”,如果你知道,你可以直接吧啦吧啦一大堆,其实这个时候你的大脑就类似redis缓存,别人问的“r ...

  3. 解决 ThinkPHP 5 把控制器下的文件夹当做控制器输出的问题

    目录结构: application/home/controller/user_info/User.php 输入路由:/home/user_info/user/index 看样子没毛病,但会报错: 这是 ...

  4. Linux远程开发

    Linux远程开发 通常,当我们开发Linux程序时有两种方案: 在Linux上直接编写程序并进行运行测试和调试 在Windows或Mac OS X上借助工具进行远程开发 虽然我自己是在Linux环境 ...

  5. #内存不够,swap来凑# Linux上创建SWAP文件/分区

    转自:https://www.vmvps.com/how-to-create-a-swap-file-on-the-linux-os.html 很久很久以前,电脑的内存是个珍贵东西,于是乎就有了swa ...

  6. js放到head中失效的原因与解决方法

    1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  7. superset采集流程

    superset采集流程: 先从业务的bi从库oride-slave-bi(10.52.123.212)去拿数,然后计算(每10分钟由airflow调py代码),放到bi的库(BI业务-数据指标存储1 ...

  8. # MATLAB数据处理

    目录 MATLAB数据处理 数据归一化处理 冒号的作用(获取指定行列的数据) MATLAB数据处理 mean(A,(b)) %均值函数,b为设置对哪一维上的数据进行处理,默认为第一维(列),行为第二维 ...

  9. 【求教 探讨】python tkinter的messagebox

    最近有一个要求,用python的tkinter制作一个messagebox,传入3个参数: title  text timeout.用户可以点击“确定” 关闭窗口:  或者 等待几秒(timeout) ...

  10. 进阶Python:装饰器 全面详解

    进阶Python:装饰器 前言 前段时间我发了一篇讲解Python调试工具PySnooper的文章,在那篇文章开始一部分我简单的介绍了一下装饰器,文章发出之后有几位同学说"终于了解装饰器的用 ...