Microsoft Teams Custom App doesn't work on mobile

Question

I've already develop one custom Microsoft Teams app that correctly works on Desktop, but it doesn't work on mobile app. It only display the page about the debug.

This is the tab into mobile app:

how can I solve it? Thanks

This is the tab into desktop app:

This is one part of the code of my home tab for my personal app:

class Tab extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        user: null,
        loading: true,
        isLogged: false,
        error: null,
        layout: true
    }
}

componentDidMount() {
    const params = new URLSearchParams(this.props.location.search);
    let teamsUser = {
        Tid: params.get('tid'),
        Aaid: params.get('aaId')
    }

    getUser(teamsUser).then((userResponse) => {
        this.setState({
            user: userResponse,
            loading: false,
            isLogged: true
        })
    }).catch((error) => {
        logger.warn(JSON.stringify(error));
        this.setState({
            error: error,
            loading: false
        })
    });
}

setLogged = (user) => {
    this.setState({
        user: user,
        isLogged: true,
        loading: false
    })
}

render() {
    let content;

    const { user, loading, isLogged, error } = this.state;

    if (loading) {
        content = <Loading></Loading>
    } else if (error) {
        throw Error(error)
    }
    else if (isLogged) {
        content = <Catalogue user={user}></Catalogue>
    } else {
        content = <UserLogin setLogged={this.setLogged}></UserLogin>
    }

    return (
        <Layout>
            {content}
        </Layout>
    );
}
}
export default Tab

and this is my manifest where I put the url with the tid and aaid:

        {
      "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
      "manifestVersion": "1.9",
      "version": "1.0.0",
      "id": "86af4197-14c8-4439-a440-3d33b4567f54",
      "packageName": "com.microsoft.teams.extension",
      "developer": {
        "name": "Teams App, Inc.",
        "websiteUrl": "https://localhost:3000",
        "privacyUrl": "https://localhost:3000/privacy",
        "termsOfUseUrl": "https://localhost:3000/termsofuse"
      },
      "icons": {
        "color": "color.png",
        "outline": "outline.png"
      },
      "name": {
        "short": "AppLocal",
        "full": ""
      },
      "description": {
        "short": "Short description for Personal App.",
        "full": "Full description of Personal App."
      },
      "accentColor": "#FFFFFF",
      "staticTabs": [
        {
          "entityId": "index",
          "name": "Catalogue",
          "contentUrl": "https://localhost:3000/catalogue?tid={tid}&aaId={userObjectId}",
          "websiteUrl": "https://localhost:3000/catalogue",
          "scopes": [
            "personal"
          ]
        },
        {
          "entityId": "live",
          "name": "Live",
          "contentUrl": "https://localhost:3000/live?tid={tid}&aaId={userObjectId}",
          "websiteUrl": "https://localhost:3000/live",
          "scopes": [
            "personal"
          ]
        },
        {
          "entityId": "about",
          "scopes": [
            "personal"
          ]
        }
      ],
      "permissions": [
        "identity",
        "messageTeamMembers"
      ],
      "validDomains": [
        "localhost:3000",
        "localhost"
      ]
    }

I hope the above mentioned code can help you help me.

Hi @Leonardo - Could you please confirm are you developing configurable Tab or personal Tab. Also debug your Tab in mobile using dev tool and follow this documentation for more info. — Mamatha-MSFT
Yes, it is a personal and messagging extension app. I've already deploy that app from azure and launch it from my mobile phone. I've read that a possible cause could be the way the content url is written. my url is written like this: domain/catalog? tid = {tid} & aaId = {userObjectId}. Should I change anything? — Leonardo
Can you please use content URLl as domain/catalog instead of domain/catalog? tid = {tid} & aaId = {userObjectId}. — Mamatha-MSFT
I added tid & userObjectIdto into the url because I need these in my personal app for run. If I took them off, how could I get them back? I have already tried with the get context function but in my case it has always worked badly being asynchronous. I've try it now and it return the same thing written above also if I put the url on the browser desktop. — Leonardo
Now I've tried to call url with the params added manually but the response was the same. It correctly run if I launch the app from Visual Studio Code or from Microsoft Teams desktop app. I don't be able to understand where is my error. This was added to my tenant store. Can was this the error? — Leonardo

Mamatha-MSFT Mamatha-MSFT · Accepted Answer · 2021-04-30T09:03:44

I have tested with your code and I replaced localhost URL with ngrok URL it's working fine. Running the application locally does not give you access to Teams app functionality. So could you please try with ngrok url.

Microsoft Teams Custom App doesn't work on mobile

2 Answers