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. Elasticsearch全文检索引擎。什么是elasticsearch? 有什么特点? 怎么使用?

    什么是ElasticSearch? Elasticsearch是一个基于Lucene的搜索引擎.它提供了具有HTTPWeb界面和无架构JSON文档的分布式,多租户能力的全文搜索引擎.Elasticse ...

  2. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  3. ROS topic,service和action的使用场景

    参考:ROS中关于topic和service的运用场合 Topics 特点: 1.单向,分工明确,处理连续数据流,topic是一种多对多的形式,一个Node可以订阅多个Topic,可以publish到 ...

  4. 【Python】【demo实验14】【练习实例】【斐波那契数列】【经典兔子生小兔子问题】

    古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 每个月的兔子数量 1:22:23:4 2+24:6 2+ ...

  5. 获取web项目的绝对路径的方法总结

    一.用Jsp获取 1.获取文件的绝对路径 String file="文件";(例如:data.mdb) String path=application.getRealPath(fi ...

  6. vue 简易学习

    好记性不如烂笔头 最近公司新出一个框架,采用的是前后端分离的开发方式,后端用的是springboot+mybatis(还有额外的zk.缓存.日志等待),前端采用的是vue+es6,由于以前对vue只知 ...

  7. Spring 循环依赖的三种方式(三级缓存解决Set循环依赖问题)

    本篇文章解决以下问题: [1] . Spring循环依赖指的是什么? [2] . Spring能解决哪种情况的循环依赖?不能解决哪种情况? [3] . Spring能解决的循环依赖原理(三级缓存) 一 ...

  8. 基于全备份+binlog方式恢复数据

    基于全备份+binlog方式恢复数据 将bkxt从库的全备份在rescs5上恢复一份,用cmdb操作 恢复全备后执行如下操作 set global read_only=OFF; stop slave; ...

  9. peewee无外键连接

    # 参考:https://blog.csdn.net/weixin_34273479/article/details/87587183 res = Name.select(Name, User.xxx ...

  10. CF 666C & 牛客 36D

    给定字符串S, 求有多少长为$n$的字符串T, 使得S为T的子序列. 可以得到转移矩阵为 $\begin{equation}A=\begin{bmatrix}25 & 0 & 0 &a ...