All geek questions in one place

Is there an easy way to run Firebase in a web worker?

I have a one-page React application that consists of many files, complete with gulp / browsify.

Firebase javascript is built into this package.

I would like to know if there is an easy way to execute some Firebase actions in another workflow?

What I tried:

Setting up the worker and sending the Firebase object or instance via worker.postMessage(xxx) . In both cases, it throws the error message the object cannot be cloned . Example below with a Firebase object.

 var blobURL = URL.createObjectURL(new Blob([ '(', (function() { var onmessage = function(event) { var FB = new event.data.Firebase('my firebase URL'); // Here, some Firebase operations // ... }; }).toString(), ')()' ], { type: 'application/javascript' })); var postViewedWorker = new Worker(blobURL); URL.revokeObjectURL(blobURL); [... later on ...] postViewedWorker.postMessage({Firebase: Firebase, ...otherParams});

In the above example, the worker works (ha ha) until I try to pass Firebase.

What I would like to avoid:

Installing two completely different bundles: one with the main application and one dedicated to all Firebase operations, using the auxiliary library to send operations from each other.

Note. The reason for this question is because my interface is slowed down by Firebase operations. For example, I have a list of elements displayed on the page, and when I scroll, each time the element is visible, the view count of this object is updated by Firebase. Scrolling the page is smooth without these operations and becomes sharp when I add them.

Edit: Also, I get the following warning: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user experience.

+4
source share
2 answers

Easy, depending on your values ​​for convenience. Probably definitely.

I used a microdomain to make it work. Here's a rough / dirty version, bundle, as it makes sense to you.

Your worker:

 importScripts("http://raw.github.com/tmpvar/microdom/master/microdom.min.js"); var window = microdom('<html></html>'); var document = window; importScripts("https://cdn.firebase.com/js/client/2.4.2/firebase.js"); var ref = new Firebase(input.firebase_endpoint); // This ref now works, authenticates, etc. You can use .notify() to pass info to the main thread, etc. ref.on("value", function(snapshot) { output.notify(snapshot.val()); });
+2
source

I have a working open source version that puts Firebase in a working one: https://github.com/pkaminski/fireworker . It can use both regular and general workers (where supported) and integrates additional features from other additional Firebase libraries. It emulates the Firebase API and automatically transfers calls from the main page to the working page, so your existing code should more or less continue to work as it is. It also has some nontrivial limitations:

  • Only supports Firebase SDK 2.4.2. It may have been adapted to the SDK 3.x, but it will be harder because the source code is not available.
  • Interactive authentication methods do not work; calling authWithPassword , authWithOAuthPopup or authWithOAuthRedirect will throw an exception. Instead, use your own server to log in and call authWithCustomToken .
  • The priority of the item is not currently implemented. Since priority is kept out of range, it is difficult to maintain efficiently, and Firebase people have indicated that they are essentially not approved.
+1
source

Source: https://habr.com/ru/post/989972/

More articles:


All Articles