I'm playing with the service worker API in my computer so I can grasp how can I benefit from it in my real world apps.
I came across a weird situation where I registered a service worker which intercepts fetch event so it can check its cache for requested content before sending a request to the origin.
The problem is that this code has an error which prevented the function from making the request, so my page is left blank; nothing happens.
As the service worker has been registered, the second time I load the page it intercepts the very first request (the one which loads the HTML). Because I have this bug, that fetch event fails, it never requests the HTML and all I see its a blank page.
In this situation, the only way I know to remove the bad service worker script is through chrome://serviceworker-internals/ console.
If this error gets to a live website, which is the best way to solve it?
Thanks!
I wanted to expand on some of the other answers here, and approach this from the point of view of "what strategies can I use when rolling out a service worker to production to ensure that I can make any needed changes"? Those changes might include fixing any minor bugs that you discover in production, or it might (but hopefully doesn't) include neutralizing the service worker due to an insurmountable bug—a so called "kill switch".
For the purposes of this answer, let's assume you call
navigator.serviceWorker.register('service-worker.js');
on your pages, meaning your service worker JavaScript resource is service-worker.js. (See below if you're not sure the exact service worker URL that was used—perhaps because you added a hash or versioning info to the service worker script.)
The question boils down to how you go about resolving the initial issue in your service-worker.js code. If it's a small bug fix, then you can obviously just make the change and redeploy your service-worker.js to your hosting environment. If there's no obvious bug fix, and you don't want to leave your users running the buggy service worker code while you take the time to work out a solution, it's a good idea to keep a simple, no-op service-worker.js handy, like the following:
// A simple, no-op service worker that takes immediate control.
self.addEventListener('install', () => {
// Skip over the "waiting" lifecycle state, to ensure that our
// new service worker is activated immediately, even if there's
// another tab open controlled by our older service worker code.
self.skipWaiting();
});
/*
self.addEventListener('activate', () => {
// Optional: Get a list of all the current open windows/tabs under
// our service worker's control, and force them to reload.
// This can "unbreak" any open windows/tabs as soon as the new
// service worker activates, rather than users having to manually reload.
self.clients.matchAll({type: 'window'}).then(windowClients => {
windowClients.forEach(windowClient => {
windowClient.navigate(windowClient.url);
});
});
});
*/
That should be all your no-op service-worker.js needs to contain. Because there's no fetch handler registered, all navigation and resource requests from controlled pages will end up going directly against the network, effectively giving you the same behavior you'd get without if there were no service worker at all.
Additional steps
It's possible to go further, and forcibly delete everything stored using the Cache Storage API, or to explicitly unregister the service worker entirely. For most common cases, that's probably going to be overkill, and following the above recommendations should be sufficient to get you in a state where your current users get the expected behavior, and you're ready to redeploy updates once you've fixed your bugs. There is some degree of overhead involved with starting up even a no-op service worker, so you can go the route of unregistering the service worker if you have no plans to redeploy meaningful service worker code.
If you're already in a situation in which you're serving service-worker.js with HTTP caching directives giving it a lifetime that's longer than your users can wait for, keep in mind that a Shift + Reload on desktop browsers will force the page to reload outside of service worker control. Not every user will know how to do this, and it's not possible on mobile devices, though. So don't rely on Shift + Reload as a viable rollback plan.
What if you don't know the service worker URL?
The information above assumes that you know what the service worker URL is—service-worker.js, sw.js, or something else that's effectively constant. But what if you included some sort of versioning or hash information in your service worker script, like service-worker.abcd1234.js?
First of all, try to avoid this in the future—it's against best practices. But if you've already deployed a number of versioned service worker URLs already and you need to disable things for all users, regardless of which URL they might have registered, there is a way out.
Every time a browser makes a request for a service worker script, regardless of whether it's an initial registration or an update check, it will set an HTTP request header called Service-Worker:.
Assuming you have full control over your backend HTTP server, you can check incoming requests for the presence of this Service-Worker: header, and always respond with your no-op service worker script response, regardless of what the request URL is.
The specifics of configuring your web server to do this will vary from server to server.
The Clear-Site-Data: response header
A final note: some browsers will automatically clear out specific data and potentially unregister service workers when a special HTTP response header is returned as part of any response: Clear-Site-Data:.
Setting this header can be helpful when trying to recover from a bad service worker deployment, and kill-switch scenarios are included in the feature's specification as an example use case.
It's important to check the browser support story for Clear-Site-Data: before your rely solely on it as a kill-switch. As of July 2019, it's not supported in 100% of the browsers that support service workers, so at the moment, it's safest to use Clear-Site-Data: along with the techniques mentioned above if you're concerned about recovering from a faulty service worker in all browsers.
You can 'unregister' the service worker using javascript.
Here is an example:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function (registrations) {
//returns installed service workers
if (registrations.length) {
for(let registration of registrations) {
registration.unregister();
}
}
});
}
That's a really nasty situation, that hopefully won't happen to you in production.
In that case, if you don't want to go through the developer tools of the different browsers, chrome://serviceworker-internals/ for blink based browsers, or about:serviceworkers (about:debugging#workers in the future) in Firefox, there are two things that come to my mind:
Use the serviceworker update mechanism. Your user agent will check if there is any change on the worker registered, will fetch it and will go through the activate phase again. So potentially you can change the serviceworker script, fix (purge caches, etc) any weird situation and continue working. The only downside is you will need to wait until the browser updates the worker that could be 1 day.
Add some kind of kill switch to your worker. Having a special url where you can point users to visit that can restore the status of your caches, etc.
I'm not sure if clearing your browser data will remove the worker, so that could be another option.
I haven't tested this, but there is an unregister() and an update() method on the ServiceWorkerRegistration object. you can get this from the navigator.serviceWorker.
navigator.serviceWorker.getRegistration('/').then(function(registration) {
registration.update();
});
update should then immediately check if there is a new serviceworker and if so install it. This bypasses the 24 hour waiting period and will download the serviceworker.js every time this javascript is encountered.
For live situations you need to alter the service worker at byte-level (put a comment on the first line, for instance) and it will be updated in the next 24 hours. You can emulate this with the chrome://serviceworker-internals/ in Chrome by clicking on Update button.
This should work even for situations when the service worker itself got cached as the step 9 of the update algorithm set a flag to bypass the service worker.
We had moved a site from godaddy.com to a regular WordPress install. Client (not us) had a serviceworker file (sw.js) cached into all their browsers which completely messed things up. Our site, a normal WordPress site, has no service workers.
It's like a virus, in that it's on every page, it does not come from our server and there is no way to get rid of it easily.
We made a new empty file called sw.js on the root of the server, then added the following to every page on the site.
<script>
if (navigator && navigator.serviceWorker && navigator.serviceWorker.getRegistration) {
navigator.serviceWorker.getRegistration('/').then(function(registration) {
if (registration) {
registration.update();
registration.unregister();
}
});
}
</script>
In case it helps someone else, I was trying to kill off service workers that were running in browsers that had hit a production site that used to register them.
I solved it by publishing a service-worker.js that contained just this:
self.globalThis.registration.unregister();
Does anyone know of an example which has really simple onConnect onMessage onClose structure for use with grails-spring-websocket?
The first problem when trying to implement web sockets in grails 3 is which plugin library to use. It needs to be one which will be supported in grails so it gets new versions, and one which has lots of users, examples and/or documentation.
This article has exactly what i need - the ability for users to connect, to store the list of connected users in a collection, for clients send messages to the server, and have the server send async "replies" back to one or small subset of the connected users. But it uses an obscure socket implementation (javax.websocket:javax.websocket-api:1.1) with grails.
This one: https://plugins.grails.org/plugin/zyro/grails-spring-websocket seems to be more popular, but all the examples I can find only cover publish/subscribe via topics, and don't have any connection to the individual client. While I could create a topic per client, this is far more complicated than it should be. Also, configuration looks to be arcane and overly complex, there should be none.
Someone suggested using the wschat plugin as a tictactoe game was done with it, but really I just need a simple socket implemenation with onConnect onMessage and onClose callbacks - no publish and subscribe, no topics etc.
I implemented this in 5 minutes in node.js using the "ws" plugin, which is really simple, e.g.:
wss.on("connection", myFunction(ws) {..}
ws.on('message', function(message) {
messageHandler(message, ws)
})
ws.on('error', function(er) {
console.log(er)
})
ws.on('close', function() {
console.log('Connection closed')
})
Is anything like this available in grails with an official web socket plugin, or should I stick to node for websockets? no security or other features are required (security is handled by passing user/pass down the secure socket in a "login" message - more or less the same as a web login)
Update
No luck yet finding a way to handle simple websocket events and to send web socket messages back to users. This plugin looked promising, but it only handles topics/queues. The article mentioned earlier which uses javax.websocket-api is ugly but more or less what we need, but unfortunately as it is stand alone code, you cant access the database or services from the handlers, and services can't send messages.
Here is my need:
I have to displays some information from a web page.
The web browser is actually on the same machine (localhost).
I want the data to be updated dynamically by the server initiative.
Since HTTP protocol is actually a request/response protocol, I know that to get this functionality, the connection between the server and the client (which is local here) should be kept open in some way (Websocket, Server-Sent Events, etc..)
Yes, "realtime" is really a fashion trend nowadays and there are many frameworks out there to do this (meteor, etc...)
And indeed, it seems that Rails supports this functionnality too in addition to using Websockets (Server-Sent Events in Rails 4 and ActionCable in Rails 5)
So achieving this functionnality would not be a big deal, I guess...
Nevertheless what I really want is to trigger an update of the webpage (displayed here locally) from a request made by another client..
This picture will explain that better :
At the beginning, the browser connects to the (local) server (green arrows).
I guess that a thread is executed where all the session data (instance variables) are stored.
In order to use some "realtime" mechanisms, the connection remains open and therefore the thread Y is not terminated. (I guess this is how it works)
A second user is connecting (blue arrows) to the server (could be or not be the same web page) and make some actions (eg. posting a form).
Here the response to that external client does not matter. Just an HTTP OK response is fine. But a confirmation web page could also be returned.
But in anyway the thread X (and/or the connection) has no particular reason to be kept.
Ok, here is my question (BTW thank you for reading me thus far).
How can I echo this new data on the local web browser ?
I see 2 differents ways to do this :
Path A: Before terminating, the thread X passes the data (its instance variables) to the thread Y which has its connection still open. Thus the server is able to update the web browser.
Path B: Before terminating the thread X sends a request (I mean a response since it is the server) directly to the web browser using a particular socket.
Which mechanisms should I use in either method to achieve this functionnality ?
For method A, how can I exchange data between threads ?
For method B, how can I use an already opened socket ?
But which of these two methods (or another one) is actually the best way to do that?
Again thank you for reading me thus far, and sorry for my bad english.
I hope I've been clear enough to expose my need.
You are overthinking this. There is no need to think of such low-level mechanisms as threads and sockets. Most (all?) pub-sub live-update tools (ActionCable, faye, etc.) operate in terms of "channels" and "events".
So, your flow will look like this:
Client A (web browser) makes a request to your server and subscribes to events from channel "client-a-events" (or something).
Client B (the other browser) makes a request to your server with instructions to post an event to channel "client-a-events".
Pub-sub library does its magic.
Client A gets an update and updates the UI accordingly.
Check out this intro guide: Action Cable Overview.
Almost all of my graphql objects require that the user is authenticated to access them. If the user is not logged in, or their credentials are invalid, the server returns an error with a flag requireLogin set to true.
How can I intercept errors wherever they occur in Relay, capture this specific error, and then use it to update my state in redux (which will then show a message and a login box)?
The ideal place seems to be the NetworkLayer, but before I implement my own custom NetworkLayer is there a better existing solution (some sort of Relay-wide onError handler for example)?
You're likely looking for the renderFailure prop on your Relay Root Container. This gives you a place to handle errors that occur while fetching your data. If you're looking for errors directly relating to Relay Mutations, you can provider success and error handlers to Relay.Store.commitUpdate. I think those two should be capable of handling most scenarios.
You did mention using Redux along with Relay. I've not done any research into OSS projects combining these two tools, but Relay itself handles a lot of what Redux also handles and more. While Redux is great, I do think Relay is a more custom fit for GraphQL itself, and React, and I've not felt the need to find a spot for Redux in this stack, yet. It might complicate things.
I have an ASP.NET MVC application presenting some data and I want it to
open a new tab, or
redirect to a new view
when a web service gives me a signal. This WS is supposed to handle some external data and requests and when some specific action is called, I want it to be able to give my web application some kind of signal.
I was thinking about using Html.Action to an asynch controller but then I don't know how to provide the signal from the WS to the controller (or all instances of them).
Hopefully, it is understandable. Do you have an idea what needs to be done?
Thanks in advance.
So basically your problem comes down to the fact that server state is changed (through WS) and we want to make something happen at the client side where the your web app is being viewed.
Frankly it's not straightforward. Internet works on the Client -> Server architecture. User sends a request to the server, server responds. What you are trying to do is reverse of it. You want to send a request from server to user. HTTP protocol doesn't work like that.
Right now, to do something similar following two strategies are used:
Websockets : try searching them on google. You create a socket between the client and server and once server gets updated by the WS, it sends a request to the client through the socket. You can ask it to navigate to a different view or open a new window. The downside with it is that its not supported by the majority of the browsers. Might take a year or so to be. Not really recommend now.
Polling : You can make Ajax requests from your browser to server in certain intervals (you know like every 5 seconds) and see if the server state has changed or now. If yes, then do your stuff. That's the most common technique. Twitter.com uses it. There is also another version of it called Comet or Long Polling but I won't confuse you with that.
The important thing to note here is that whatever you want to do (open tab, change view etc) you have to do it through Javascript at the client side.
hope that helps