SharePoint 2013 - Display Notification on Parent Page after App Part completes its task

For a typical web part operation, you usually display some kind of message/notification when you completed a task.  So that user know the status.  The problem with the App part is that it's within an iFrame on the page.  You can't just call SP.UI.Notify.addNotification("").

The OOTB App Part support resizing of iFrame with postMessage technique only.  So, what to do ...

Below is a technique that allows you to display the SharePoint popup notification on the top right corner of the parent page.  The code below is tested using JavaScript and C# in a provider-hosted app.  The basic components are as follow

1. You have to register a custom event listener for the message event on the SharePoint page.  You can register this event on the master page so that all your App Parts can utilize the event handler
2. You have JavaScript function that post message back to the parent
3. On your App part post back event, you call the JavaScript to post the message back to the parent.

On master page:

$(document).ready(function () {
 
    //register Custom Message event handler
    if (typeof window.addEventListener != 'undefined') {
        window.addEventListener('message', CustomAppIFramePostMsgHandler, false);
    }
    else if (typeof window.attachEvent != 'undefined') {
        window.attachEvent('onmessage', CustomAppIFramePostMsgHandler);
    }
});

function CustomAppIFramePostMsgHandler(e) {

    var messageData = e.data;

    if (messageData.length > 100 || messageData.indexOf("::") < 0)
        return; //don't need to handle it

    //can do more to identify which action to perform
    var message = messageData.substring(messageData.indexOf("::") + 2);

    if (message != "undefined" && message != "") {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { SP.UI.Notify.addNotification(message, false); });
        setTimeout(function () { document.location = document.location; }, 2000);
    }
}


On app part page:

function displayNotification(msg) {

    $(document).ready(
   function () {
       var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
       var message = "Message::" + msg;
       target.postMessage(message, '*');
   });  
}


On app part post back handler:

protected void btnDisplayMessage_Click(object sender, EventArgs e)
        {
            ltMsg.Text = "";
               
        }