about summary refs log tree commit diff
path: root/app
diff options
context:
space:
mode:
authorThibG <thib@sitedethib.com>2020-05-29 19:25:57 +0200
committerGitHub <noreply@github.com>2020-05-29 19:25:57 +0200
commitcc650bc023e00d07c5796b7602d86597bb437f45 (patch)
tree8b0e9c0a4fdf6facf846f85f913cc0c8901b68ce /app
parent5aff2a6957e861162d67c4610277e9bb2a6f8186 (diff)
Fix timeline markers in Firefox (regression from #13887) (#13889)
Unfortunately, Firefox does not support the `keepalive` parameter
I used in the previous PR. However it supports the `navigator.sendBeacon`
API that allows that kind of things, but does not allow setting headers.

Therefore, this PR replaces it with a `sendBeacon` call that passes the
bearer token in the POST data.

Doorkeeper will then handle the auth token out of the box, as long as
it is passed as form data. Passing the query as JSON does not work.
Diffstat (limited to 'app')
-rw-r--r--app/javascript/mastodon/actions/markers.js25
1 files changed, 23 insertions, 2 deletions
diff --git a/app/javascript/mastodon/actions/markers.js b/app/javascript/mastodon/actions/markers.js
index 9cc061a87..37d1ddccf 100644
--- a/app/javascript/mastodon/actions/markers.js
+++ b/app/javascript/mastodon/actions/markers.js
@@ -13,7 +13,10 @@ export const synchronouslySubmitMarkers = () => (dispatch, getState) => {
     return;
   }
 
-  if (window.fetch) {
+  // The Fetch API allows us to perform requests that will be carried out
+  // after the page closes. But that only works if the `keepalive` attribute
+  // is supported.
+  if (window.fetch && 'keepalive' in new Request('')) {
     fetch('/api/v1/markers', {
       keepalive: true,
       method: 'POST',
@@ -23,13 +26,31 @@ export const synchronouslySubmitMarkers = () => (dispatch, getState) => {
       },
       body: JSON.stringify(params),
     });
-  } else {
+    return;
+  } else if (navigator && navigator.sendBeacon) {
+    // Failing that, we can use sendBeacon, but we have to encode the data as
+    // FormData for DoorKeeper to recognize the token.
+    const formData = new FormData();
+    formData.append('bearer_token', accessToken);
+    for (const [id, value] of Object.entries(params)) {
+      formData.append(`${id}[last_read_id]`, value.last_read_id);
+    }
+    if (navigator.sendBeacon('/api/v1/markers', formData)) {
+      return;
+    }
+  }
+
+  // If neither Fetch nor sendBeacon worked, try to perform a synchronous
+  // request.
+  try {
     const client = new XMLHttpRequest();
 
     client.open('POST', '/api/v1/markers', false);
     client.setRequestHeader('Content-Type', 'application/json');
     client.setRequestHeader('Authorization', `Bearer ${accessToken}`);
     client.SUBMIT(JSON.stringify(params));
+  } catch (e) {
+    // Do not make the BeforeUnload handler error out
   }
 };