From 990e8e9ff700c7afe727a0cb0c72d88372ce0888 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Thu, 5 Jan 2017 16:53:36 +0000 Subject: [PATCH 1/4] =?UTF-8?q?Adding=20examples=20for=20=E2=80=9Cversionc?= =?UTF-8?q?hange=E2=80=9D=20and=20=E2=80=9Cblocked=E2=80=9D.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.bs | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/index.bs b/index.bs index 11c1533..85a544c 100644 --- a/index.bs +++ b/index.bs @@ -247,7 +247,7 @@ db.close(); In the future, the database may have grown to contain other object stores and indexes. The following example shows one way to handle -opening an older version of the database. +migrating from an older version of the database. 
 var request = indexedDB.open("library", 3); // Request version 3.
@@ -278,6 +278,63 @@ request.onsuccess = function() {
 };
+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 +the database. + +
+db.onversionchange = function() {
+  // First, save any unsaved data:
+  saveUnsavedData().then(function() {
+    // Now you need to close the database.
+    // If the document isn't being actively used, it may be appropriate to reload:
+    if (!document.hasFocus()) {
+      location.reload();
+      // Reloading will close the database, and also reload with the new JavaScript
+      // 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.
+      db.close();
+      displayMessage("Disconnected from database, please refresh to reconnect.");
+    }
+  });
+};
+
+function saveUnsavedData() {
+  // How you do this depends on your app.
+}
+
+function displayMessage() {
+  // Show some sort of alert to the user.
+}
+
+ +Your new tabs can use the "blocked" event to detect if older tabs are preventing +them from upgrading the database. + +
+var request = indexedDB.open("library", 4); // Request version 4.
+
+request.onupgradeneeded = function(event) {
+  // ...
+};
+
+request.onblocked = function() {
+  displayMessage("Please close other tabs to this site.");
+};
+
+request.onsuccess = function() {
+  hideMessage();
+};
+
+function hideMessage() {
+  // Hide a previously displayed message.
+}
+
+ +The user will only see the above message if another tab fails to disconnect from +the database. Ideally the user won't see this! From ba42a985f57422c4cfb60aac50f48ef57250f980 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Fri, 6 Jan 2017 11:44:07 +0000 Subject: [PATCH 2/4] =?UTF-8?q?=E2=80=9Cversionchange=E2=80=9D=20example?= =?UTF-8?q?=20now=20on=20its=20own.=20Expanding=20on=20methods.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.bs | 70 ++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 50 insertions(+), 20 deletions(-) diff --git a/index.bs b/index.bs index 85a544c..d4433fe 100644 --- a/index.bs +++ b/index.bs @@ -277,26 +277,36 @@ request.onsuccess = function() { db = request.result; // db.version will be 3. }; + + + From 7d376899cc1e5aa572f65c25c41ed19af508330c Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Fri, 6 Jan 2017 11:47:30 +0000 Subject: [PATCH 3/4] *twitches* --- index.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.bs b/index.bs index d4433fe..547126d 100644 --- a/index.bs +++ b/index.bs @@ -328,7 +328,7 @@ longer accessible. db.onversionchange = function() { saveUnsavedData().then(function() { db.close(); - }) + }); }; db.addEventListener('close', function() { From c5bc0a9666318d8488d9950f5e8d4991ab97aad9 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Mon, 9 Jan 2017 13:11:55 +0000 Subject: [PATCH 4/4] =?UTF-8?q?Removing=20use=20of=20close=20event.=20Addi?= =?UTF-8?q?ng=20note=20for=20=E2=80=9Conclose=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.bs | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/index.bs b/index.bs index 547126d..66246f9 100644 --- a/index.bs +++ b/index.bs @@ -320,20 +320,21 @@ function displayMessage() { } -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 -longer accessible. +Another way is to call the database's close method. However, you need to make +sure your app is aware of this, as subsiquent attempts to access the database +will fail. 
 db.onversionchange = function() {
   saveUnsavedData().then(function() {
     db.close();
+    stopUsingTheDatabase();
   });
 };
 
-db.addEventListener('close', function() {
+function stopUsingTheDatabase() {
   // Put the app into a state where it no longer uses the database.
-});
+}
The new client (the one attempting the upgrade) can use the "blocked" event to @@ -5212,6 +5213,13 @@ optional |forced flag|. have its type set to "close". The event must not bubble or be cancelable. + +