Initializing my HTML bridge component

General Q&A
1

What is the best way to initialize my HTML bridge component?

There seems to be a delay between when the view loads and completes the view init() function and when all of my HTML bridge code has run and the component has fully rendered?

Is there a best practice for ensuring that the View only tries to communicate to the HTML bridge component once the HTML has rendered / loaded completely?

1 Like
2

Adding an eventListener to the ā€˜loadā€™ event which letā€™s the App know that the HTML has fully loaded seems to be the best way to go about it (credit to @alex-valdez for the find)

In your HTML project you can add the listener as follows

HTML Bridge JS / TS

window.addEventListener('load', (event) => {
    console.log("HTML Bridge Main.TS: Letting the App know that HTML has loaded completely");
    client.post('loaded', true);
})

And then in the App JS only posting to the HMTL bridge once you have received the ā€œloadedā€ message
App JS/TS

function init() {
    component.html().on('loaded', function (params) {
        console.log("In App: Received 'loaded' from HTML bridge");
        // ready to start interacting with the HTML bridge app
        loadInitialData();
    });
}

You could theoretically use the DOMContentLoaded event, but practical experience has shown that it is better to use the load event. For more information on the different between these, see this article

1 Like
3

Thanks @alex-valdez!!

1 Like
4

Thanks for the credit! Just a note, if you utilize load event it will take a longer time for the page to load as it waits for page and all of the resources. Depending on your use case, this could cause an issue. In our teamā€™s use case, the load time is minimally delayed. So much so that most could not tell just by utilizing the feature. But, still something to take note of.

1 Like