Microsoft announced on January 29, 2018, new features for Microsoft Teams which included Personal App space and the Store: https://blogs.office.com/en-us/2018/01/29/new-ways-to-use-apps-and-get-more-done-in-microsoft-teams/.
Excited that this announcement could finally put the end to my reliance on Outlook and allow Teams to be my single communications app, I headed to the Store. A bit shocked at what I found, there was no Personal App entry for Mail.
Not to be discouraged, I thought to myself why don’t I just create an app… A bit of research and I came across the details that a Personal App is an app classified under the personal scope and is a static tab: https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-overview. This lead me to review some great Teams App development content from Tom Morgan:
Armed with my https://outlook.office365.com Personal App, I was greeted with an empty tab…
I proceeded to modify the manifest.json and repackage my app many times (cruel joke Microsoft releasing App Studio a few days after all this testing). I found that my blog URL would load as a Personal App, but not Google or OWA. All the URLs would load without issue as a Website tab in a channel. Using Fiddler and Charles, I could see the sites connecting but didn’t see the issue loading the site. I learned that you could launch the Teams desktop application in debug mode using: teams.exe –remote-debugging-port=5858
After you can use Google Chrome browser’s DevTools via chrome://inspect in the address bar to debug.
Looking at OWA via the Website app in a Channel:
<webview ng-if="webpageTab.useWebView && webpageTab.validUrl && !webpageTab.showEmptyFrame && !webpageTab.addEmbeddedPageContainer" id="wv1" class="webpage-iframe" tabindex="-1" ng-src="https://outlook.office365.com" src="https://outlook.office365.com" guestinstance="1"> </webview>
Looking at OWA via the Personal App:
<webview ng-if="extensionTab.useWebView && !extensionTab.addEmbeddedPageContainer" class="extension-tab-frame" tabindex="-1" src="https://teams.microsoft.com/iframe-container.html#iframeurl=https%3A%2F%2Foutlook.office365.com%2F" guestinstance="2"> </webview>
What we see is the Content URL defined in the Personal App is sent to https://teams.microsoft.com/iframe-container.html to be loaded within an iframe. We hit the Consent URL’s site security settings and “Refused to display ‘
The page can only be displayed in a frame on the same origin as the page itself. The spec leaves it up to browser vendors to decide whether this option applies to the top level, the parent, or the whole chain, although it is argued that the option is not very useful unless all ancestors are also in the same origin.
In Chrome, a Channel app tab will alert you that the site is having issues and to click for more info, basically directing you to open the site in another tab or to use the Teams Desktop app. For a Personal App, Chrome shows nothing, similar to the Teams Desktop app.
Not sure why Personal Apps are loaded in an iframe in the Desktop app, but hopefully this changes and Microsoft also releases their own Mail app for Teams. Another issue with Personal Apps is the pages are loaded each time you navigate to the app.