feat: connect/disconnect on window focus/blur

[kptdobe]

DA Durable Objects gets a lot of traffic because of da-collab. While I did not manage to see in the logs if this PR has an effect on DO usage, my intuition tells me that if the websocket gets disconnected when the page is not being edited, this should reduce a lot of traffic.

The focus and blur events combined with connect and disconnect works like a charm on Chrome, Safari and Firefox: when leaving the window, disconnect is happening, I see in another editor that user got disconnected and when focusing back in the window, it immediately reconnects and re-sync the file.

To test:

• open https://da.live/edit#/aem-sandbox/block-collection/drafts/alex/test (does not have the fix, helps to stay connected)
• open in another window: https://lessreq--da-live--adobe.aem.live/edit#/aem-sandbox/block-collection/drafts/alex/test
• leave and come back from the second window
• you can see the user going on and off in the first window
• make some change in first window while the user is off
• go back to second window: changes appear!

(recreated on new branch with shorter name)

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 746a29e ❌ (latest)
• 654d88d ❌
• 4a02b44 ❌
• 05916b1 ❌

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/edit
🖥️	/edit

[auniverseaway]

We have seen some collab behaviors this week that I would like to clear out before we merge this.

@kptdobe how does this work if I want to move to a different window (or desktop) to drag and drop an image?

My gut says we should probably put this behind a 10 minute timeout so it doesn't immediately close the connection if you're doing document comparisons, etc. Even with a 10 minute timeout, I think this will still alleviate the issues we're seeing in logs.

I think we probably also want to put some sort of UI in place (change the doc opacity) in case it takes a second for the connection to come back. I don't want people to think they can write because they see content, but it's not quite live, yet.

[kptdobe]

The error @auniverseaway refers to is adobe/da-collab#76.

[kptdobe]

I just tested the d&d an image into the page and it works.
But... the frequent connect / disconnect reveals some flows in da-collab... the document gets updated with an older version at one point. The connect / disconnect stress just amplifies something which is already there but is an edge case for now.
I need to work with @karlpauls and @bosschaert on that first.

[kptdobe]

ok, the document is reload is because of the 2s second delay (https://github.com/adobe/da-collab/blob/main/src/shareddoc.js#L385-L391) to update the document in admin vs the 1s second delay (https://github.com/adobe/da-collab/blob/main/src/shareddoc.js#L355-L375) to restore from admin if there is some inconsistency. So of course, if the connection is closed before the 2s (i.e. make a change and leave the window), inconsistency is detected when connection is recreated and 1s later, the document is reloaded from admin...
These are things that can happen today without the current PR behavior. But while today it is an edge case, it would become pretty frequent with the connect / disconnect behavior introduced here.

+1 to add delay before disconnecting then.