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 订阅本博客。

1 条评论:

  1. Hard Rock Casino & Hotel Montgomery - MapyRO
    The casino hotel Montgomery, Montgomery, AL, features slot machines, blackjack, 포천 출장안마 poker 경주 출장마사지 and blackjack 바카라 사이트 가입 쿠폰 machines. The casino 군포 출장안마 hotel Montgomery 제주도 출장안마

    回复删除