如何知道 web 应用程序可在浏览器或团队自定义应用程序上访问

Question

My web application is created in angular. Can I check whether web application is accessed from browser or Teams custom apps.

As I know this features is available for app which are created in react. example:- import { useTeams } from "msteams-react-base-component"; const [{ inTeams, theme, context }] = useTeams();

Above inTeams return boolean, which tells whether app is accessed from browser or custom app.

So I get this in angular as well?

Answer 1

You can take the function from msteams-react-base-component, it's very simple:

import * as microsoftTeams from "@microsoft/teams-js";

export const checkInTeams = (): boolean => {
    // eslint-disable-next-line dot-notation
    const microsoftTeamsLib = microsoftTeams || window["microsoftTeams"];

    if (!microsoftTeamsLib) {
        return false; // the Microsoft Teams library is for some reason not loaded
    }

    if ((window.parent === window.self && (window as any).nativeInterface) ||
        window.name === "embedded-page-container" ||
        window.name === "extension-tab-frame") {
        return true;
    }
    return false;
};

Source

Answer 2

There is a property on the Teams Context object called hostClientType , which I think is/was meant to deal with this. It contains values like 'web' and 'desktop', and it used to be documented here but this doc has been updated to remove this property (amongst others). Here is an older version of the same doc which contains more info. The property still exists, and it holds this info, but I'm not sure why it was removed from the documents (perhaps the property has been deprecated).