External website communication

ExternalCommunication service allows web RedApps to open a new window (or tab) and then post and receive messages from it.

It uses PostMessage API (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).

RedApp

From within web Redapp we use IExternallCommunicationService to open a new window and send messages.

IExternalCommunicationService.openWindow(url, targetOrigin, listener) opens a new window with URL set as the first parameter. targetOrigin is the origin of URL, listener send as the third parameter will only work with messages send from targetOrigin. listener parameter has to be a function that accepts one parameter of MessageEvent type with void return type.

com.sabre.redapp.example3.web.crosswindow sample

const listener = (event) => {
    console.log(event);
    this.$('.response').val(JSON.stringify(event.data))
};

this.externalReference = getService(IExternalCommunicationService).openWindow("https://redapp-examples.cert.sabre.com/crosswindow/", "*", listener);

* send as target origin allows this listener to work with every message that will be posted to/fromsrw. This is not secure approach and in production, code it should be set to the actual origin.

openWindow returns a function that then can be used to post data to opened website.

com.sabre.redapp.example3.web.crosswindow sample

    const payload: string = this.$('.payload-field').find('.payload').val();

    this.externalReference(JSON.parse(payload));

External website

External website that has been opened using IExternalCommunicationService.openWindow method can acquire SRW window using window.opener method. Then, thanks to this reference, messages can be sent to SRW and handled using listener defined in web Redapp.

To listen to Redapp messages external website should implement it’s own listener using window.addEventListener("message", (event)⇒void) method.

com.sabre.redapp.example3.web.crosswindow/externalWeb sample

    window.opener.postMessage(JSON.parse(jsonString), "*");

    window.addEventListener("message", event => {
    console.log(event);
    document.getElementById("incomingMessageBox").innerHTML = JSON.stringify(
      event.data
    );

Sample named com.sabre.redapp.example3.web.crosswindow showcases use of the service and provide sample website that implements postMessage and event listener.