Adding examples for “versionchange” and “blocked”. #133
Conversation
| @@ -278,6 +278,63 @@ request.onsuccess = function() { | |||
| }; | |||
| </pre> | |||
|
|
|||
| The database cannot upgrade while other tabs are still using it. To avoid blocking | |||
| other tabs, you should use the "versionchange" event to close the connection to | |||
There was a problem hiding this comment.
should use → may listen for
| } else { | ||
| // Alternatively you may close the database and display a message to the | ||
| // user. You need to ensure this isn't a disruptive user experience. | ||
| db.close(); |
There was a problem hiding this comment.
maybe also db = null so that other page logic can notice the connection is done.
There was a problem hiding this comment.
I'll make a reference to the onclose event.
| } | ||
| </pre> | ||
|
|
||
| Your new tabs can use the "blocked" event to detect if older tabs are preventing |
There was a problem hiding this comment.
Your new tabs → Pages
older tabs → tabs with older versions of the code
| } | ||
| </pre> | ||
|
|
||
| The user will only see the above message if another tab fails to disconnect from |
There was a problem hiding this comment.
Maybe clarify (based on previous questions that have been raised in this area)
If all recipients of "versionchange" close the connection synchronously within the handler then "blocked" will not be fired. But if they don't close synchronously (i.e. they ignored it, or they do async work like starting a final transaction to save state) then the "blocked" event will be seen.
Once all connections finally close then "success" will be seen - that is, the blocked state is not permanent. That's why it's important to hide the message when "success" comes in.
| }; | ||
|
|
||
| request.onsuccess = function() { | ||
| hideMessage(); |
There was a problem hiding this comment.
Should probably have // ... here indicating proceeding with the usual open steps
| @@ -278,6 +278,63 @@ request.onsuccess = function() { | |||
| }; | |||
| </pre> | |||
|
|
|||
| The database cannot upgrade while other tabs are still using it. To avoid blocking | |||
| other tabs, you should use the "versionchange" event to close the connection to | |||
There was a problem hiding this comment.
other tabs → other tabs trying to upgrade the database
| // and database definitions. | ||
| } else { | ||
| // Alternatively you may close the database and display a message to the | ||
| // user. You need to ensure this isn't a disruptive user experience. |
There was a problem hiding this comment.
Do we want to list the other alternative, which is to notify the user that another tab wants to upgrade, so the user should finish their work and close (or reload) this one?
(That's probably getting too long.)
There was a problem hiding this comment.
I think that would be good, to be honest. I guess you could use new BroadcastChannel("idb-messages") or something?
There was a problem hiding this comment.
No need for BroadcastChannel - the receiver of "versionchange" could pop up a modeless notification saying e.g. "There's a new version of this web app available! Just click reload whenever you're ready."
There was a problem hiding this comment.
ah - ok. I gotta get my head out of service worker land and message passing.
I'm still not totally clear where .onblocked comes into play... if at all?
There was a problem hiding this comment.
The open request trying to do the upgrade gets "blocked" if there are any other connections that don't close as soon as they receive "versionchange".
So one approach might be:
const open = indexedDB.open(name, version);
open.onerror = e => notify(`Something went wrong: ${e.message}`);
open.onblocked = e => notify('Close the other tabs and then click OK');
open.onupgradeneeded = e => {
if (e.oldVersion === 0) { ... }
if (e.oldVersion === 1) { ... }
...
};
open.onsuccess = e => {
const db = open.result;
db.onversionchange = e => notify('Another tab wants to upgrade. Close this one.');
};There was a problem hiding this comment.
But another might be:
const open = indexedDB.open(name, version);
open.onerror = e => notify(`Something went wrong: ${e.message}`);
open.onblocked = e => notify('THIS SHOULD NEVER HAPPEN!');
open.onupgradeneeded = e => {
if (e.oldVersion === 0) { ... }
if (e.oldVersion === 1) { ... }
...
};
open.onsuccess = e => {
const db = open.result;
db.onversionchange = e => {
notify('Getting out of the way because another tab wants to upgrade.');
db.close();
};
};There was a problem hiding this comment.
In reality, you want something more subtle and user friendly like Jake has, such as trying to transparently reload if possible and if not then pestering the user the minimal amount.
|
this is super helpful! Thanks @jakearchibald! |
|
@inexorabletash excellent feedback. I've made some major changes to the original PR. The example is now in its own section with its own ID. I've covered more ways to handle "versionchange", and gone into more detail with "blocked". |
| </pre> | ||
|
|
||
| Another way is to call the database's close method. Other code on your page | ||
| should react to the database's "close" event, so it knows the database is no |
There was a problem hiding this comment.
The close event only fires when the connection closes abnormally, e.g. when the user deletes browsing data or there is corruption or an I/O error. If close() is called explicitly the event does not fire.
There was a problem hiding this comment.
And therefore it might be worth adding a note to the onclose definition that it's only fired in abnormal close scenarios. Look for the forced close flag.
|
@inexorabletash updated! |
|
Cheers! |
|
Thanks @jakearchibald ! I made some subsequent tweaks (wordsmithing, spelling fix, definition links) - can you take a peek at the live spec and make sure I didn't make it worse? |
|
@inexorabletash looks good to me, thanks! |
No description provided.