Teams Tab App 的 manifest 分析

上一篇文章我们深入来分析了 tab app 的代码，这篇文章我们研究一下 manifest。

Teams 的 manifest 实际上是一个很复杂的 json，里面的配置非常多，之前的文章陆陆续续的讲过一些配置，我们在这篇文章里来看看关于 tabs 的一些配置，我简化了一下 manifest 文件如下：

{........"configurableTabs": [{"configurationUrl": "https://localhost:53000/index.html#/config","canUpdateConfiguration": true,"scopes": ["team","groupchat"]}],"staticTabs": [{"entityId": "index","name": "Personal Tab","contentUrl": "https://localhost:53000/index.html#/tab","websiteUrl": "https://localhost:53000/index.html#/tab","scopes": ["personal"]}],"validDomains": ["localhost","localhost:53000"]
}

我们可以看到里面主要有两块 configurableTabs 和 staticTabs，从名字我们也可以知道他们的区别，第一个是可以被配置的一些 tab，后一个是不可配置的静态的 tabs。

我们运行一下 tabs app，在安装界面的”Add” 按钮旁边，我们点击箭头，可以看到两个选项：Add to a team 和 Add to a chat。

这两个实际上就是对应了 manifest 文件里的 scope。

    ........"configurableTabs": [{"scopes": ["team","groupchat"]}],

我们点击 “Add to a team”，就会进入配置页面，如下图，这个配置页面的网址也是在 manifest 里指定的："configurationUrl": "https://localhost:53000/index.html#/config"

当我们点击 Save 按钮后，就可以把 tab 安装到了 team 的一个 channel 里。

如果前面选择的是 Add to a chat，那 tab 就会被安装到我们指定的 chat 里。如下图：

看到这里，大家应该已经对 configurable tabs 有所了解了，那我们再来看看 static tab，在sample 里，static tab 指定的 scope 是 personal，所以我们可以从 Teams 界面的左边，选择这个 app，如果大家没有看到这个 app 的图标，那就选择 “…” 按钮，在弹出的对话框中选择我们的app，然后我们就能看到这个叫 Personal Tab 的 static tab 了，由于它是一个静态的页面，我们不需要配置安装。

看到这里，大家可能会问，contentUrl 和 websiteUrl 有什么区别吗？那我们就来研究一下，我们把 manifest 文件改成如下的配置：

    "staticTabs": [{"entityId": "index","name": "MyTest Tab","contentUrl": "https://www.bing.com","websiteUrl": "https://www.microsoft.com","scopes": ["personal"]}],

再次运行后，我们就能看到 tab 的名字变成了 MyTest Tab，tab 的内容也变成了 “https://www.bing.com” 的内容，当我们点击了右上方的地图的图标后，teams 会另外打开一个浏览器页面，新打开的页面是 “https://www.microsoft.com” 的内容。