SPFX WebPart exposed as teams' compose extension is not working inside Teams Mobile

[stevebeauge]

(also posted here: https://github.com/SharePoint/sp-dev-docs/issues/9018 as requested by Microsoft Teams app submissions team)

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

None

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [X] other (enter in the "Additional environment details" area below)

Additional environment details

On desktop :

• latest EDGE Chromium
• Teams desktop 1.6.00.13566

On android : latest Teams app (1416/1.0.0.2023103504/0605)

Tested with SPFX 1.17.3 + node 16.20.1

Describe the bug / error

We are developing SPFX webparts that are exposed in Microsoft Teams.

Some webparts are exposed as staticTabs, some others as composeExtension.

On desktop, everything is working properly: both static tabs and compose extension are able to show the webparts:

Exemple of compose extension:

However, on Teams mobile I get an error (Android version but some users reported issue with IOS too):

In english: Failed to load webview. Please check whether the specified app is available.

Most of the discussions I found related to this issue (like https://github.com/MicrosoftDocs/msteams-docs/issues/4254) are related to targeted content not available as IFrame because of CSP issues.

However, because the task module is hosted by SharePoint itself, I cannot control the headers sent by the server.

Since the webparts are OK as static tabs, I think this is very specific to the way Teams load the task module.

Because the failure happens before the webview is loaded. Web dev tools (inspect from edge://inspect) is not possible, the page is not yet loaded. I didn't find any location where I can get some clue about the error (no console,...).

In order to test, I took the manifest build automatically by sharepoint, and I just added the compose extension:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
  "version": "1.0.0",
  "manifestVersion": "1.16",
  "id": "3249eed9-2f35-4ba0-a3f0-57cac9caccf7",
  "packageName": "InTeams",
  "name": {
    "short": "InTeams",
    "full": "InTeams"
  },
  "developer": {
    "name": "SPFx + Teams Dev",
    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
  },
  "description": {
    "short": "InTeams",
    "full": "InTeams"
  },
  "icons": {
    "outline": "outline.png",
    "color": "color.png"
  },
  "accentColor": "#004578",
  "configurableTabs": [
    {
      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=3249eed9-2f35-4ba0-a3f0-57cac9caccf7%26forceLocale={locale}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ]
    }
  ],
  "staticTabs": [
    {
      "entityId": "3249eed9-2f35-4ba0-a3f0-57cac9caccf7",
      "name": "InTeams",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=3249eed9-2f35-4ba0-a3f0-57cac9caccf7%26forceLocale={locale}",
      "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
      "scopes": [
        "personal"
      ]
    }
  ],
  "composeExtensions": [
    {
      "botId": "ea6b93fd-0bdf-4cd2-b4ea-4e051f1af636",
      "commands": [
        {
          "id": "uploadFileSP",
          "type": "action",
          "title": "Test compose extension",
          "description": "",
          "initialRun": false,
          "fetchTask": false,
          "context": [
            "message"
          ],
          "taskInfo": {
            "title": "Test compose extension",
            "width": "large",
            "height": "large",
            "url": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=3249eed9-2f35-4ba0-a3f0-57cac9caccf7%26forceLocale={locale}"
          }
        }
      ],
      "canUpdateConfiguration": false
    }
  ],
  "validDomains": [
    "{teamsitedomain}{teamsitepath}",
    "{teamsitedomain}",
    "products.office.com",
    "*.login.microsoftonline.com",
    "*.sharepoint.com",
    "*.sharepoint-df.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
  ],
  "webApplicationInfo": {
    "id": "00000003-0000-0ff1-ce00-000000000000",
    "resource": "https://{teamSiteDomain}"
  }
}

Steps to reproduce

1. bootstrap a new SPFX project using the latest version of spfx (1.17.3)
2. generate the sppkg solution
3. Add to the tenant's app catalog the generated package.
4. Ensure "Add to teams" is enabled
5. Export the generated manifest (as described in Deployment options for SharePoint Framework solutions for Microsoft Teams using _api/web/tenantappcatalog/downloadteamssolution(id)/$value endpoint)
6. In Teams, using Developer Portal, declare a bot

7. In the extracted manifest, add a compose extension:

   "composeExtensions": [
     {
       "botId": "191dd4c6-67de-46e6-9283-cceaaafccec6",
       "canUpdateConfiguration": false,
       "commands": [
         {
           "id": "uploadFileSP",
           "type": "action",
           "title": "Test compose extension",
           "description": "",
           "initialRun": false,
           "fetchTask": false,
           "context": [
             "message"
           ],
         "taskInfo": {
           "title": "Test compose extension",
           "height": "large",
           "width": "large",
           "url": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamstaskhostedapp.aspx%3Fteams%26personal%26componentId=3249eed9-2f35-4ba0-a3f0-57cac9caccf7%26forceLocale={locale}"
         }
         }
       ]
     }
   ]

8. Fix botId to match the bot you set up previously and set the componentId part inside the taskinfo url to your WebPart component (should be the same as the static tab already in the manifest)
9. Zip the manifest
10. Inside teams, publish the updated manifest either in the organization store or as side-loaded app and install the application
11. On the desktop, ensure everything is working properly:
    • The static tab of the application should contains the webpart ✅
    • From a conversation, your should have the "Test compose extension" available and when you select it, the task module should open (maybe you'll have to add the application to the conversation) ✅
12. On an Android mobile device (actual device or emulator), open MS Teams
    • From the application list, you should see your app. Open it and it should be working ✅
    • From a conversation, in message action, you should see the "Test compose extension". Click of the action. Instead of displaying the task module, you'll end up with the error window ❌

FYI: a repro project has been created here: https://github.com/stevebeauge/repro-sp-dev-docs-issues-9018

Expected behavior

Compose extension built using SPFX should works, same as static tabs built using same framework.

[ghost]

Hi stevebeauge! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out in one business day. Please use this link to escalate if you don't get replies.

Best regards, Teams Platform

[nwojod-MSFT]

@stevebeauge thanks for raising this issue and providing detailed repro steps. We will investigate this and get back to you with an update.

[sayali-MSFT]

@stevebeauge - We have tried to test the app but are getting some errors. We will let you know the update once testing is done. If it is bug then raised it accordingly.

[sayali-MSFT]

@stevebeauge -Sorry for delay in response, We have tried to add as compose extension,but still it is not showing the app in conversation. We have added like below:-

We will let you know the updates once testing is done.

[sayali-MSFT]

Tracking issue from here-https://github.com/SharePoint/sp-dev-docs/issues/9018