2019年11月9日星期六

追踪短地址的小工具:Trace URL

我写了一个追踪短地址的小工具,输入任何短地址(或普通带重定向的地址),它就能找到原地址显示给你看。我把它叫做 Trace URL,欢迎大家来使用。这是一个 PWA (Progressive Web App),所以 Android 用户可以把它添加到首屏,添加后就可以把短地址「分享」给 Trace URL 进行追踪。

这个项目是完全开源的,不过源代码分布在多个 GitHub 项目当中。traceurl-web 包含了 PWA 客户端代码。这个项目使用 Create React App 创建,然后使用 Material UI 做样式模板,最后手工编辑了一堆 metadata 使它成为一个好用的 PWA。在这里我分享一个比较小众的 PWA 知识吧,也就是如何让 PWA 接受来自 Android 分享的数据,这需要在 manifest.json 里面添加一个叫做 share_target 的信息,例如说:

{
  "share_target": {
    "action": "/",
    "method": "GET",
    "enctype": "application/x-www-form-urlencoded",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}

添加 share_target 信息后,只要 PWA 被添加到首屏,它就能成为 Android 系统的分享目标。需要注意的是,Chrome for Android 有个已知的 bug,分享地址时会把地址传输给 text 参数而非 url 参数。所以在处理传入参数时我们需要同时看 texturl,哪个有值就处理哪个。

这个 PWA 背后实际调用的 API 在 traceurl-api 项目里。这个 API 其实只是对 traceurl 库做了个简单的封装,这个库才是真正负责跟踪短地址的。这样层层封装只是为了好玩,让我能够尝试一些新技术,学习新知识。例如说,traceurl 其实是一个 package,我原本把它发布到 NPM Registry 了,后来 GitHub 发布测试版的 GitHub Package Registry 时我就试用了一下,把 traceurl 发布到那里去然后在 traceurl-api 里面引用。这就让我理解到了到底为什么 GitHub 要做自己的 Registry。(到底是为什么?我另外写一篇文章解释。)

这次就先说这么多吧,大家记得来试用一下 Trace URL 哦,好用的话记得添加到 Android 首屏哦!下次我再写文章讲述 GitHub Package Registry,感兴趣的话请记得通过邮件RSS/Atom 订阅本博客。

没有评论:

发表评论