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. vue的特点 关键字

    1.对mvvm模式的理解 Model-view-viewmodel Model数据模型 View代表ui组件 Viewmodel监听模型数据的改变和控制视图行为.处理用户交互,简单理解就是一个同步vi ...

  2. Docker部署Nextcloud私有网盘

    对于国内某度的网盘限速行为大家有目共睹,不过对于商业化的产品模式这样也无可厚非,毕竟企业也是盈利为目的.如果想享受互联网技术带来的便利,刚好也懂一点技术的话可以尝试搭建属于私有的网盘.个人比较推荐的是 ...

  3. SaltStack安装部署

    SaltStack安装部署 安装: 一. master: 1. 配置yum源安装 # rpm --import https://repo.saltstack.com/yum/redhat/6/x86_ ...

  4. java23种设计模式之五:代理模式

    一.代理模式介绍 代理模式的定义:就是为一个接品(对象)提供一个代理的对象,并由这个代理对象控制对原对象的访问流程 其中代理又分为:静态代理和动态代理 静态代理:指的是自己要写一个代理类,或者用工具生 ...

  5. 【Python】【demo实验19】【练习实例】【不同位数相同阿拉伯数字组成的数之和】

    原题: 求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字.例如2+22+222+2222+22222(此时共有5个数相加),几个数相加由键盘控制. 我的代码: #!/usr/bin ...

  6. 【Python】【demo实验18】【练习实例】【统计输入字符串中,数字的个数、英文字母的个数及其他符号的个数】

    原题: 输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. (本题暂时不支持中文字符及汉字) 我的代码: #!/usr/bin/python # encoding=utf-8 # -* ...

  7. mybatis-plus配置多数据源invalid bound statement (not found)

    mybatis-plus配置多数据源invalid bound statement (not found) 错误原因 引入mybatis-plus应该使用的依赖如下,而不是mybatis <de ...

  8. Spring4学习回顾之路07- 通过工厂方法配置Bean

    一:通过静态工厂配置Bean 建立Student.java package com.lql.srping04; /** * @author: lql * @date: 2019.10.28 * Des ...

  9. 基于Springboot后台,前台 vue.js 跨域 Activiti6 工作流(用到websocket技术) 的项目

    工作流模块----------------------------------------------------------------------------------------------- ...

  10. springboot2.0application.在yml文件中添加自定义配置

    1. 在application.yml文件中添加自定义配置 app: platform: version: code: '1.0.0' 2. 定义bean类   具体格式: 其中的成员变量名称需要与配 ...