自动推送新博客的泛用实现方案

这是一个适合大多数人的解决方案。它可以帮助你自动推送新博客给你的读者。有效提高网站的访问量。

Intro

前情回顾

在 Hexo 使用 Web Push Notification 浏览器通知推送中，我们讲到了 Web push notification 的好处，以及如何配置 Webpushr。在 Auto web push notification 中，我们讨论了自动推送通知的特殊解决方案。这个方案对于工具链有很多的局限性。网站源码必须在 Github 上，网站需要托管在 Netilfy 上，必须使用hexo-abbrlink这个插件。

在本篇文章中，我将给出一个更加泛用的解决方案。这次不再有那么的前提条件。唯一的前提条件是你需要注册 Webpushr, 将你的网站加入到 Webpushr 中。你并不需要将 Webpushr 的 SDK 加入你的网站。这个插件会为你搞定一切。

如果你想使用其他的通知推送服务，请提交 Issue 或者 PR。我们可以为其增加兼容性改进。

原理

想法

这一次我们只需要安装 hexo-web-push-notification 就可以解决所有问题。甚至 SDK 的集成也自动化了。

自动集成 SDK 很简单。将 SDK 代码直接插入渲染好的 HTML 中即可。

通知部分的想法与 Auto web push notification 一样。我们生成newPost.json。newPost.json包含了最新文章的信息。接着我们对比本地newPost.json与在线网站上的newPost.json。如果文章的 ID 有变化，那么我们就对读者进行通知推送。

实现

除开简单的 SDK 自动集成，插件主要分为两部分。第一部分生成newPost.json。第二部分处理通知推送。

使用 Hexo Event，我们让第一部分在hexo generate之后执行。第二部分在hexo deploy之前执行。这个时候网站还没有进行更新。

第一部分

第一部分所做的事情很简单。找到最新发布的文章，根据其信息生成newPost.json到本地public/newPost.json。以下是newPost.json的范例：

{
  "title": "Auto web push notification",
  "id": "posts/afd56cf2/",
  "date_published": "02/24/2020",
  "summary": "如何自动通知读者有更新了？即只要正常更新博客，读者便可以在第一时间收到关于新文章的通知。",
  "url": "https://www.inevitable.tech/posts/afd56cf2/",
  "tags": ["hexo", "push notifications", "自动化", "CI"],
  "categories": ["开发"]
}

这一次，id 直接使用文章的路径。不管你怎么魔改 hexo，文章的路径永远具有唯一性。因此这次的解决方案适用范围更加广泛。

相比上一次的直接从源文件中读取数据进行处理。这一次的数据来自 Hexo API，加强了适用性。不管你的源文件长成什么样，只要 Hexo 能读懂，这个插件就能正常工作。

第二部分

第二部分将本地newPost.json于网站上的newPost.json进行比对。如果文章 ID 不一样，那么便是作者进行了更新（没考虑过作者删除最新文章的可能性）。这个时候便触发通知推送。推送内容包含文章标题，链接以及节选。节选便是 Summary 部分。

安装和使用

想要自动推送通知，你得先得处理好 Webpushr。你需要注册一个账号，加入你的网站，配置好 Safari 推送的证书，自定义请求通知弹窗的样式。具体可以参考 Hexo 使用 Web Push Notification 浏览器通知推送中，。

接下来的事情全交给hexo-web-push-notification。

安装这个插件，只需要执行npm i hexo-web-push-notification --save。

使用这个插件前记得添加以下配置到位于 hexo 根目录的_config.yml。

webPushNotification:
  webpushrKey: "your webpushr rest api key"
  webpushrAuthToken: "your webpushr authorize token"
  trackingCode: "AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88"

trackingCode可能有点难找。打开 webpushr，进入到配置网站的主页。打开 Setup>TrackingCode。tracking code 长这个样子：

<!-- start webpushr tracking code -->
<script>(function(w,d, s, id) {w.webpushr=w.webpushr||function(){(w.webpushr.q=w.webpushr.q||[]).push(arguments)};var js, fjs = d.getElementsByTagName(s)[0];js = d.createElement(s); js.id = id;js.src = "https://cdn.webpushr.com/app.min.js";
fjs.parentNode.appendChild(js);}(window,document, 'script', 'webpushr-jssdk'));
webpushr('init','AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88');</script>
<!-- end webpushr tracking code -->

最后第二行的AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88 便是你的trackingCode。

更多安装指南请参考 README.md。

后记

这是我第一次发行 NPM 包。我本来使用 Github 的包管理服务。但过程实在是有些麻烦。众所周知，发行包的第一步是npm adduser。如果是发行到 NPM 上，直接输入用户名和密码就行。但是如果是发行到 Github 上，密码得使用 Personal Access Token。生成 Personal Access Token 有点小麻烦。

包的名称似乎必须得是 Scoped。也就是包的名称必须得是作者名字开头。

成功发行到 Github 后，我遇到了不能下载的问题。使用npm i显示找不到我的包。可能运行npm i的时候，npm 在 NPM 上面找包，而不是 Github 上面找包。

鉴于以上并不是特别良好的体验，我想要删除这个包，将其在 NPM 上发行。看了一圈文档和别人的答案，删除包的唯一方法就是删除这个仓库。

最后，还是 NPM 香。