共计 2550 个字符，预计需要花费 7 分钟才能阅读完成。
将 web 内容分享到 twitter
需要背景
公司为 数百万个用户 提供了年度报告的数据。因为不心愿更新 APP 版本，所以决定用 web 的模式展现在 APP 内，并且能够一键分享到 twitter。同时分享到 twitter 的内容须要生成 twitter 卡片，而且卡片的内容是动静生成的；以图片的模式分享。
技术调研
如何分享
依据 twitter-for-websites 材料得悉，分享到 twitter，是通过链接跳转的模式实现的。然而 携带过来的内容只能是字符串 。如果 携带的字符串蕴含一个非法 URL 的时候，twitter 就会开始剖析这个地址所指向的页面内容以生成卡片。
生成规定
依据 twitter-for-websites 下 card 的 getting-started 材料得悉，卡片的生成规定是辨认页面的 head 标签里非凡的 meta 配置。例如：
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />twiiter 辨认到的 meta 配置必须是动态的，也就是说用 js 动态创建的标签是有效的。
需要边界
卡片辨认出的图片是动静的，动静内容次要从 web 页面到图片的生成，最初到一个动静的 html 构造。如何解决图片就须要额定留神：
- 当工夫和估算都足够，能够依据用户活跃度的程序，为一定量的用户提前生成好图片。最初把大量的图片放到购买的云存储服务上
-
条件无限时，按需生成的图片须要思考服务器的负载状况
- 为了进步读取速度，服务器的存储是否足够
- 为了缓解存储压力，服务器的运行内存是否足够
开发调试
倡议配合 vercel 来校验生成的成果，把 vercel 赋予的域名粘贴到 twiiter 里即可。但须要留神，一旦 twitter 从一个域名地址里辨认到了生成卡片的配置，就会产生强缓存。只有地址变了，才会从新辨认，所以能够每次校验的时候给域名轻易增加一个参数即可。
具体实施
Web
<a href="https://twitter.com/intent/tweet?url=hello">share</a>点击这个链接就会跳转到 twitter，并且会辨认出 url 字段的字符自动弹出表单填入
- 如果作为 webview 被嵌入到 app 里，并且手机也装置了 twitter，跳转时会主动关上 twitter 并填入 url 字段的字符
- 如果只是为了填入表单，不作卡片辨认，倡议用 text 字段
Server
上述的 url 的字段，须要指向一个服务端渲染的 html 页面，内容还是动静的。以 Express 为例
export const shareTwitter: RequestHandler = async (req, res) => {
const url = ''; // 点击 twitter 卡片时跳转的地址
const image = ''; // 卡片辨认到的图片地址
res.send(`<!DOCTYPE html>
<html lang="en">
<head>
<meta name="twitter:site" content="@xxx" />
<meta name="twitter:creator" content="@xxx" />
<meta property="og:url" content="${url}" />
<meta property="og:title" content="title" />
<meta property="og:image" content="${image}" />
<meta content="summary_large_image" name="twitter:card" />
</head>
<body>
</body>
</html>
`);
};假如这个接口的申请地址为 https://xxx.com/api/shareTwitter，那么在 web 页面下就是
<a href="https://twitter.com/intent/tweet?url=https://xxx.com/api/shareTwitter">share</a>留神为 a 标签的 href 作 URL 编码
这时跳转到 twitter 后，主动填入表单的就是一个服务端渲染的 html 页面了。
从 web 内容到图片的生成就另一个技术方向了，可供选择的计划有很多，比方 sharp、puppeteer 等等。笔者的做法是采纳的 sharp，因为 puppeteer 对内存的占用太大。即便如此，sharp 生成图片的单次申请，也会耗费几兆的内存。倡议应用 vercel 的 satori 工具，能够将 html 转换成 svg，对内存耗费更小，出现成果也更好。
作者：Alex
文章公布日期：2023-01-28 13:11
原文博客链接：https://alex-blog-site.vercel…
GitHub: https://github.com/Alex-Progr…
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。
