So the journey of integrating with the sister project continues. Last week, I had the issue of not being able to open the IDE in a new tab programmatically as the browser’s pop-up blocker is preventing it from doing so. As mentioned before, the reason is because of the fact that a new tab is being open as a result of an asynchronous operation and not by the user’s action. The solution is very simple actually. The moment the user double clicks a project, a blank window would be immediately open. The window.open() method returns a reference to a Window object containing information about the newly opened window. We would want to keep a reference to that Window object so that later, when the URL to the IDE is obtained from the cache endpoint, we can set the URL of that window to be the IDE’s URL. That’s all there is to it.
A project can now be edited by the IDE. But, at the moment, changes to the project are not updated. Here’s a brief explanation of how all this works behind the scenes. When the user wants to edit a project, a workspace is needed to be created in the S3 server first, then P3 server would need to push the project files to that newly created workspace. Eventually, we would need to get back the latest files from that workspace, regardless if any changes were made. We could get S3 to push the project files back to P3 as soon as the user finishes editing the project, or regularly do so based on some time interval. P3 could also explicitly request for the latest project files from S3. It is decided that we would do both.
The initial idea for deciding when should P3 make that explicit request to S3 was to attach event listeners to the Window object where the IDE is. This is done through the addEventListener method. The sort of events we could listen for could be when the user switches tab, or in other words, that Window loses focus, i.e the blur event, and also when the user actually closes the IDE tab, i.e the unload event. However, there is a problem with that. The IDE would be of a different origin from the P3 user interface, therefore the same origin policy applies to windows as well. This means that, only certain methods and attributes are available for a Window that is of a different origin. You cannot attach event listeners to such windows, for security reasons.
Having known that, we need to find another way. Fortunately, Dr Shawn was able to quickly realize that P3 could make one last request to S3 for the latest project files, and update the project files that are about to be flushed from the cache and be pushed into user’s storage. Regardless of whether the request is successful or not, the project files would still be pushed to user’s storage. At least, that is one of the ways for getting the latest project files. I know what I’ll be working on for next week now.
0 Comments