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.

Sure there was Microsoft Apps for Flow, OneNote, Planner and Stream, but not even the Website app that is available in the add tab under a channel.

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:

• https://blog.thoughtstuff.co.uk/2017/09/developing-with-microsoft-teams-creating-static-tabs/
• https://blog.thoughtstuff.co.uk/2017/08/developing-with-microsoft-teams-applications-manifests/
• https://blog.thoughtstuff.co.uk/2018/02/microsoft-teams-app-studio-video-walkthrough/

Of course Teams App Studio came out a few days after I built my test apps by hand using JSON, take my word, App Studio is so much easier!

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 &amp;&amp; webpageTab.validUrl &amp;&amp; !webpageTab.showEmptyFrame &amp;&amp; !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 &amp;&amp; !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 ’’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’”. Details about X-Frame-Options: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options.

SAMEORIGIN 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.

iframe-container.html source:

With Chrome’s DevTools you can modify html of a site on the fly, so I updated the src attribute to the original Consent URL and of course OWA loads in the Personal App.

If running Teams in a browser, you’ll find both the Channel and Personal app tabs are stuffed into an iframe. Edge browser surprising will display the issue details in frame.

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.