├── README.md ├── index.html ├── style.css ├── sw.js └── script.js /README.md: -------------------------------------------------------------------------------- 1 | This repository showcases a very simple demo of different ways of communication between Service Workers and Web Pages. 2 | 3 | For more info visit [this](https://dbwriteups.wordpress.com/2015/11/16/service-workers-part-3-communication-between-sw-and-pages/) page. -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Service Workers - Communication 6 | 7 | 8 | 9 | 10 | 11 |
12 |
Service Worker - Communication
13 | 14 | 15 | 16 |
Open your console and make sure to refresh the page once to get demo working.
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #09F; 3 | } 4 | 5 | .container { 6 | position: absolute; 7 | width: 320px; 8 | top: 50%; 9 | left: 50%; 10 | -webkit-transform: translate(-50%, -50%); 11 | -moz-transform: translate(-50%, -50%); 12 | transform: translate(-50%, -50%); 13 | 14 | color: white; 15 | font-family: sans-serif; 16 | text-align: center; 17 | } 18 | 19 | .title { 20 | font-size: 17px; 21 | margin: 50px 0px; 22 | text-align: center; 23 | text-transform: uppercase; 24 | font-weight: 500; 25 | } 26 | 27 | .help { 28 | font-size: 14px; 29 | margin: 10px 0px; 30 | } 31 | button { 32 | display: inline-block; 33 | background: transparent; 34 | width: 100px; 35 | margin: 10px auto; 36 | box-sizing: border-box; 37 | 38 | border: 2px solid white; 39 | padding: 10px 0px; 40 | color: white; 41 | text-transform: uppercase; 42 | cursor: pointer; 43 | font-weight: bold; 44 | } 45 | button:focus { 46 | outline:0; 47 | } 48 | button:active { 49 | background: rgba(0, 0, 0, 0.2); 50 | } -------------------------------------------------------------------------------- /sw.js: -------------------------------------------------------------------------------- 1 | self.addEventListener('activate', function(event) { 2 | console.log("Ready for the demo"); 3 | }); 4 | 5 | self.addEventListener('message', function(event) { 6 | var data = event.data; 7 | 8 | if (data.command == "oneWayCommunication") { 9 | console.log("Message from the Page : ", data.message); 10 | } else if (data.command == "twoWayCommunication") { 11 | console.log("Responding to message from the Page: ", data.message); 12 | event.ports[0].postMessage({ 13 | "message": "Hi, Page" 14 | }); 15 | } else if (data.command == "broadcast") { 16 | console.log("Broadcasting to the clients"); 17 | 18 | self.clients.matchAll().then(function(clients) { 19 | clients.forEach(function(client) { 20 | client.postMessage({ 21 | "command": "broadcastOnRequest", 22 | "message": "This is a broadcast on request from the SW" 23 | }); 24 | }) 25 | }) 26 | } 27 | }); 28 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | if (navigator.serviceWorker) { 2 | console.log("ServiceWorkers are supported"); 3 | 4 | navigator.serviceWorker.register('sw.js', { 5 | scope: './' 6 | }) 7 | .then(function(reg) { 8 | console.log("ServiceWorker registered", reg); 9 | }) 10 | .catch(function(error) { 11 | console.log("Failed to register ServiceWorker", error); 12 | }); 13 | } 14 | 15 | function oneWayCommunication() { 16 | // ONE WAY COMMUNICATION 17 | if (navigator.serviceWorker.controller) { 18 | console.log("Sending message to service worker"); 19 | navigator.serviceWorker.controller.postMessage({ 20 | "command": "oneWayCommunication", 21 | "message": "Hi, SW" 22 | }); 23 | } else { 24 | console.log("No active ServiceWorker"); 25 | } 26 | } 27 | 28 | function twoWayCommunication() { 29 | if (navigator.serviceWorker.controller) { 30 | var messageChannel = new MessageChannel(); 31 | messageChannel.port1.onmessage = function(event) { 32 | console.log("Response from the SW : ", event.data.message); 33 | } 34 | 35 | console.log("Sending message to the service worker"); 36 | navigator.serviceWorker.controller.postMessage({ 37 | "command": "twoWayCommunication", 38 | "message": "Hi, SW" 39 | }, [messageChannel.port2]); 40 | } else { 41 | console.log("No active ServiceWorker"); 42 | } 43 | } 44 | 45 | function registerBroadcastReceiver() { 46 | navigator.serviceWorker.onmessage = function(event) { 47 | console.log("Broadcasted from SW : ", event.data); 48 | 49 | var data = event.data; 50 | 51 | if (data.command == "broadcastOnRequest") { 52 | console.log("Broadcasted message from the ServiceWorker : ", data.message); 53 | } 54 | }; 55 | } 56 | 57 | function requestBroadcast() { 58 | console.log("Requesting for broadcast"); 59 | registerBroadcastReceiver(); 60 | if (navigator.serviceWorker.controller) { 61 | console.log("Sending message to service worker"); 62 | navigator.serviceWorker.controller.postMessage({ 63 | "command": "broadcast" 64 | }); 65 | } else { 66 | console.log("No active ServiceWorker"); 67 | } 68 | } 69 | --------------------------------------------------------------------------------