NOTE: Using Create-React-App Template... (Modifying the Service Worker in it)
I am using the communication channel api to send a message to a service worker for caching. I use an xmlhttp request because of its progress api since fetch needs an indefinite loader afaik.
So after receiving the data on readystate 4 and status code 200 I go to postMessage to SW. I get logging on client side but don't receive the message in the service worker.
I am developing locally and using a Chrome Extension to allow local testing of SW and Build:
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en
CLIENT SNIPPET
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {
const res = JSON.parse(this.responseText);
function sendMessage(msg){
console.log("SEND SW MESSAGE");
const msgChan = new MessageChannel();
// This wraps the message posting/response in a promise, which will resolve if the response doesn't
// contain an error, and reject with the error if it does. If you'd prefer, it's possible to call
// controller.postMessage() and set up the onmessage handler independently of a promise, but this is
// a convenient wrapper.
return new Promise(function(resolve, reject){
console.log("Promise Scope");
msgChan.port1.onmessage = function(event){
event.data.error ? reject(event.data.error) : resolve(event.data);
}
// This sends the message data as well as transferring messageChannel.port2 to the service worker.
// The service worker can then use the transferred port to reply via postMessage(), which
// will in turn trigger the onmessage handler on messageChannel.port1.
// See https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage
navigator.serviceWorker.controller.postMessage(msg, [msgChan.port2]);
});
}
sendMessage(res).then(function(){
console.log("SW MESSAGE SENT");
// Storing Quake Data
that.props.setQuakes(res[0]);
// Storing Three Data Obj - SSR Parsing and Creation
that.props.setThreeData(res[1]);
// Greenlight
that.props.setVizInitSuccess(true);
}).catch(function(err){
console.log("Error Caching Data: "+err);
});
} };
SERVICE WORKER SNIPPET
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
// Set up a listener for messages posted from the service worker.
// The service worker is set to post a message to all its clients once it's run its activation
// handler and taken control of the page, so you should see this message event fire once.
// You can force it to fire again by visiting this page in an Incognito window.
navigator.serviceWorker.onmessage = function(event) {
console.log("SERVICE WORKER RECIEVED MESSAGE");
console.log(event);
event.ports[0].postMessage("SW Says Hello Back!");
if (event.data.requireData == true && 'caches' in window) {
// Check for cache'd data and load
// clients.matchAll().then(clients => {
// clients.forEach(client => {
// console.log(client);
// //send_message_to_client(client, msg).then(m => console.log("SW Received Message: "+m));
// })
// })
// caches.open('threeData').then(function(cache){
// console.log("SW Cache");
// console.log(cache)
// event.ports[0].postMessage(cache);
// });
} else {
// Cache Data
caches.open('threeData').then(function(cache){
cache.put('/data.json', new Response(event.data.json))
});
}
};
...
navigator used in Service Worker file is WorkerNavigator Interface and not Navigator Interface.
WorkerNavigator is a subset of the Navigator interface allowed to be accessed from a Worker (In this case its Service worker).
WorkerNavigator Reference.
So navigator inside Service worker file doesn't contains serviceWorker object. So it throws error when you call navigator.serviceWorker.onMessage.
To receive the messages from client use self.addEventListener in Service Worker file.
self.addEventListener('message', event => {
console.log(`[Message] event: `, event.data);
});
Related
I'm trying to get just a simple working example of this going, but I feel like I'm misunderstanding something.
My page is dynamically generated (Django), but all I want is to register a service worker to have a fallback page if the user is offline anywhere in the app. I'm testing this on http://localhost:8000, so maybe this is keeping it from working?
This is what I was basing my code from, which I've copied 99% aside from the location of the offline HTML file, which is correctly getting cached, so I can verify it works.
https://googlechrome.github.io/samples/service-worker/custom-offline-page/
The SW is registered at the bottom of my HTML's body:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/static/js/service-worker.js');
}
</script>
For /static/js/service-worker.js:
const OFFLINE_VERSION = 1;
const CACHE_NAME = 'offline';
// Customize this with a different URL if needed.
const OFFLINE_URL = '/static/offline/offline.html';
self.addEventListener('install', (event) => {
event.waitUntil((async () => {
const cache = await caches.open(CACHE_NAME);
// Setting {cache: 'reload'} in the new request will ensure that the response
// isn't fulfilled from the HTTP cache; i.e., it will be from the network.
await cache.add(new Request(OFFLINE_URL, {cache: 'reload'}));
})());
});
self.addEventListener('activate', (event) => {
event.waitUntil((async () => {
// Enable navigation preload if it's supported.
// See https://developers.google.com/web/updates/2017/02/navigation-preload
if ('navigationPreload' in self.registration) {
await self.registration.navigationPreload.enable();
}
})());
// Tell the active service worker to take control of the page immediately.
self.clients.claim();
});
self.addEventListener('fetch', (event) => {
// We only want to call event.respondWith() if this is a navigation request
// for an HTML page.
if (event.request.mode === 'navigate') {
event.respondWith((async () => {
try {
// First, try to use the navigation preload response if it's supported.
const preloadResponse = await event.preloadResponse;
if (preloadResponse) {
return preloadResponse;
}
const networkResponse = await fetch(event.request);
return networkResponse;
} catch (error) {
// catch is only triggered if an exception is thrown, which is likely
// due to a network error.
// If fetch() returns a valid HTTP response with a response code in
// the 4xx or 5xx range, the catch() will NOT be called.
console.log('Fetch failed; returning offline page instead.', error);
const cache = await caches.open(CACHE_NAME);
const cachedResponse = await cache.match(OFFLINE_URL);
return cachedResponse;
}
})());
}
// If our if() condition is false, then this fetch handler won't intercept the
// request. If there are any other fetch handlers registered, they will get a
// chance to call event.respondWith(). If no fetch handlers call
// event.respondWith(), the request will be handled by the browser as if there
// were no service worker involvement.
});
The worker successfully installs and activates. The offline.html page is successfully cached and I can verify this in Chrome Inspector -> Application -> Service Workers. I can also verify it's the correct service-worker.js file and not an old one.
If I switch Chrome to "Offline" and refresh the page, I still get the standard "No Internet" page. It also doesn't look like the "fetch" event happens on any normal page loads due to a "console.log" never getting fired.
Is the sample code I'm using outdated? Is this a limitation of trying this on Localhost? What am I doing wrong? Thank you.
I asked a question last week about this and got a very helpful answer but I am still struggling to get this working as it is supposed to, although at this point I'm not entirely sure what I've been asked to do is possible.
So this service worker is supposed to activate when ?testMode=true is added to the URL and this seems to be happening okay. The service worker is then supposed to intercept specific requests before they happen and then redirect it to mock data instead. What I have got at the moment will store the mock data and call it when specific requests are made but it doesn't actually stop the initial request from happening as it still appears within the network tab.
So for example if the request contains /units/all?availability=Active&roomTypeHandle=kitchens, the service worker is meant to intercept this and instead of that request going through, mock-data/unitData.json is supposed to be used instead.
This is what I have so far:
TestMode.ts
class TestMode {
constructor() {
if (!this.isEnabled()) {
return;
}
if (!('serviceWorker' in navigator)) {
console.log('Browser does not support service workers');
return;
}
this.init();
}
private init(): void {
navigator.serviceWorker
.register('planner-worker/js/worker.min.js')
.then(this.handleRegistration)
.catch((error) => { throw new Error('Service Worker registration failed: ' + error.message); });
navigator.serviceWorker.addEventListener('message', event => {
// event is a MessageEvent object
console.log(`The service worker sent me a message: ${event.data}`);
});
navigator.serviceWorker.ready.then( registration => {
if (!registration.active) {
console.log('failed to communicate')
return;
}
registration.active.postMessage("Hi service worker");
});
}
private handleRegistration(registration: ServiceWorkerRegistration): void {
registration.update();
console.log('Registration successful, scope is:', registration.scope);
}
private isEnabled(): boolean {
return locationService.hasParam('testMode');
}
}
export default new TestMode();
serviceWorker.js
const CACHE_NAME = 'mockData-cache';
const MOCK_DATA = {
'/units/all?availability=Active&roomTypeHandle=kitchens': 'mock-data/unitData.json',
'/frontal-ranges/kitchens?' : 'mock-data/kitchensData.json',
'/carcase-ranges/?availability=Active&roomTypeHandle=kitchens' : 'mock-data/carcaseRangesData.json',
'/products/830368/related?roomTypeHandle=kitchens&productStateHandle=Active&limit=1000&campaignPhaseId=183&retailStore=Finishing%20Touches%20%28Extra%29'
: 'mock-data/relatedItems.json'
};
self.addEventListener('install', event => {
console.log('Attempting to install service worker and cache static assets');
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(Object.values(MOCK_DATA));
})
);
});
self.addEventListener('activate', function(event) {
return self.clients.claim();
});
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
const pathAndQuery = url.pathname + url.search;
if (pathAndQuery in MOCK_DATA) {
const cacheKey = MOCK_DATA[pathAndQuery];
event.respondWith(
caches.match(cacheKey, {
cacheName: CACHE_NAME,
})
);
}
});
Another thing that happens which I'm not sure how to get around is that the fetch event only happens once. By that I mean that when a change is made to serviceWorker.js, the mock data is stored in the cache and the files appear in the network tab of dev tools, but if I refresh the page, or close it and reopen in another tab, the mock data is no longer in the network tab and it's as if the service worker is not being used at all. How can I update this so that it's always used? I can see in the console log that the service worker is registered, but it just don't seem to get used.
Apologies if I shouldn't be asking 2 questions in 1 post, just really not sure how to solve my issue. Thanks in advance for any guidance.
Turns out my issue was a scope one. Once moving where the service worker was stored it started working as intended. Realised this was the case as I figured out the fetch event wasn't actually firing.
I am using the service worker to cache requests made ot a rest service.
The implementation corresponds to 'on network response' described on this page https://web.dev/offline-cookbook/.
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.open('mysite-dynamic').then(function (cache) {
return cache.match(event.request).then(function (response) {
return (
response ||
fetch(event.request).then(function (response) {
cache.put(event.request, response.clone());
return response;
})
);
});
}),
);
});
The idea is that:
1. caller makes 1st request A
2. service worker intercepts the request A
3. service worker checks whether a request A is in storage -> no
4. service worker sends the request A to the rest service
5. service worker gets the response A
6. service worker stores the response A
7. service worker returns the response A to the caller
...
8. caller makes 2nd request A
9. service worker intercepts the request A
10. service worker checks whether a request A is in the cache -> yes
11. service worker gets the response A from storage
12. service worker returns the response A to the caller
The problem is that the rest request takes some time to return a response and this scenario where 2 or more requests are made to the rest service can occur:
1. caller makes 1st request A
2. service worker intercepts the request A
3. service worker checks whether a request A is in storage -> no
4. service worker sends the request A to the rest service
5. caller makes 2nd request A
6. service worker intercepts the request A
7. service worker checks whether a request A is in storage -> no
8. service worker gets the response A
9. service worker stores the response A
10. service worker returns the response A to the caller
11. service worker gets the response A
12. service worker stores the response A
13. service worker returns the response A to the caller
How to have only 1 request sent?
If you're open to using the Workbox libraries, instead of "vanilla" service worker code, this recipe might help:
// See https://developers.google.com/web/tools/workbox/guides/using-bundlers
import {NetworkFirst} from 'workbox-strategies';
class DedupeNetworkFirst extends NetworkFirst {
constructor(options) {
super(options);
// This maps inflight requests to response promises.
this._requests = new Map();
}
// _handle is the standard entry point for our logic.
async _handle(request, handler) {
let responsePromise = this._requests.get(request.url);
if (responsePromise) {
// If there's already an inflight request, return a copy
// of the eventual response.
const response = await responsePromise;
return response.clone();
} else {
// If there isn't already an inflight request, then use
// the _handle() method of NetworkFirst to kick one off.
responsePromise = super._handle(request, handler);
this._requests.set(request.url, responsePromise);
try {
const response = await responsePromise;
return response.clone();
} finally {
// Make sure to clean up after a batch of inflight
// requests are fulfilled!
this._requests.delete(request.url);
}
}
}
}
You could then use the DedupeNetworkFirst class along with Workbox's router, or alternatively, use it directly in your own fetch handler if you'd rather not use more of Workbox.
I use pushwoosh for receive push notification in my web app.
every things working well and received push message in serviceworker listener but I want give push messge data from serviceworker and process it in another js class
main.js like this:
if ('serviceWorker' in navigator) {
console.log('Service Worker is supported');
navigator.serviceWorker.register('sw.js').then(function() {
return navigator.serviceWorker.ready;
}).then(function(reg) {
console.log('Service Worker is ready :^)', reg);
// TODO
}).catch(function(error) {
console.log('Service Worker error :^(', error);
});
}
// get push message data in main.js and process it
service worker like this :
self.addEventListener('push', function(event) {
console.log('Push message', event);
var title = 'Push message';
event.waitUntil(
self.registration.showNotification(title, {
'body': 'The Message',
'icon': 'images/icon.png'
}));
});
As I mentioned in a comment, this seems a slightly odd use-case for a service worker rather than a standard worker, but:
You can have your service worker send a message to all connected clients when it gets a message pushed to it.
This answer shows a complete example of a service worker talking to clients, but fundamentally:
The pages it manages listen for messages:
navigator.serviceWorker.addEventListener('message', event => {
// use `event.data`
});
The service worker sends to them like this:
self.clients.matchAll().then(all => all.forEach(client => {
client.postMessage(/*...message here...*/);
}));
Or with ES5 and earlier syntax (but I don't think any browser supporting service workers doesn't also support arrow functions):
Page listening:
navigator.serviceWorker.addEventListener('message', function(event) {
// use `event.data`
});
Worker sending:
self.clients.matchAll().then(function(all) {
all.forEach(function(client) {
client.postMessage(/*...message here...*/);
});
});
I'm using server send event to display a notification.I have created a service worker and i used EventSource to connect with the server (in my case i used a servlet. ) once i run the project. everything is working fine.
but the contents inside the event execute countiously. I want to know why?
my other question is
once i close the tab. it stops sending notification. service worker is nunning and server also running. but why it stops?
this is my service worker code.
var eventSource = new EventSource("HelloServ");
//MyDiv1 is a custom event
eventSource.addEventListener("MyDiv1",function(event){
console.log("data from down" , event.data);
var title = event.data;
//below notification is displaying continuously. why ?
var notification = new Notification(title, {
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
body: event.data,
});
notification.onclick = function () {
window.open("http://ageofthecustomer.com/wp-content/uploads/2014/03/success.jpg");
};
console.log("down");
});
this is my servlet code;
response.setContentType("text/event-stream");
response.setCharacterEncoding("UTF-8");
PrintWriter writer = response.getWriter();
String upVote = "my up vote";
writer.write("id:1\n");
writer.write("event:myid\n");
writer.write("data: "+ upVote +"\n");
writer.write("data: "+"new data 2\n\n");
System.out.println("servlet "+ i);
writer.flush();
i++;
writer.close();
Service workers have a limited lifetime, you shouldn't use things like web sockets or server sent events.
Push notifications are implemented in a different way.
In your page, you need to subscribe the user for push notifications. The subscription is an endpoint URL (and a set of keys, if you plan to use payloads). Once the user is subscribed, you need to send the subscription information to your server.
The server will send a push notification to the user via a POST request to the endpoint URL.
The service worker will be awakened when a push notification arrives, its 'push' event handler is going to be executed.
A simple example (for more complex ones, take a look at the ServiceWorker Cookbook).
Page
// Register a Service Worker.
navigator.serviceWorker.register('service-worker.js')
.then(function(registration) {
// Use the PushManager to get the user's subscription to the push service.
return registration.pushManager.getSubscription()
.then(function(subscription) {
// If a subscription was found, return it.
if (subscription) {
return subscription;
}
// Otherwise, subscribe the user (userVisibleOnly allows to
// specify that you don't plan to send notifications that
// don't have a visible effect for the user).
return registration.pushManager.subscribe({
userVisibleOnly: true
});
});
}).then(function(subscription) {
// subscription.endpoint is the endpoint URL that you want to
// send to the server (e.g. via the Fetch API or via
// XMLHTTPRequest).
console.log(subscription.endpoint);
// Here's an example with the Fetch API:
fetch('./register', {
method: 'post',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify({
endpoint: subscription.endpoint,
}),
});
});
Service Worker
// Register event listener for the 'push' event.
self.addEventListener('push', function(event) {
// Keep the service worker alive until the notification is created.
event.waitUntil(
self.registration.showNotification('Title', {
body: 'Body',
})
);
});
Server
In the server, simply send a POST request to the endpoint URL.
For example, with curl:
curl -X POST [endpointURL]
Or, if you're using Node.js, you can use the web-push library (https://github.com/marco-c/web-push):
var webPush = require('web-push');
webPush.sendNotification(req.query.endpoint, req.query.ttl);
In Java, you could use this class (https://github.com/marco-c/java-web-push) that hides the details of the implementation and the differences between the protocols in the current versions of Firefox and Chrome (differences destined to disappear since Chrome is going to use the Web Push protocol soon).
Here's a "manual" example with a push service that implements the Web Push protocol (currently only works with Firefox):
URL url = new URL(endpointURL);
HttpURLConnection conn = (HttpURLConnection)url.openConnection();
conn.setDoOutput(true);
conn.setRequestMethod("POST");
OutputStreamWriter writer = new OutputStreamWriter(conn.getOutputStream());
writer.write("");
writer.flush();
String line;
BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
while ((line = reader.readLine()) != null) {
System.out.println(line);
}
writer.close();
reader.close();