在 Svelte 中创建带有推送通知的 GitHub Tracker

suchonakaniz

在本文中，您将了解如何构建 GitHub 跟踪器，当跟踪的存储库上出现新问题/PR 时，该跟踪器通过发送推送通知来通知用户。 Backward Skip 10s Play Video Forward Skip 10s 如果您选择加入，GitHub 已经通过电子邮件发送通知，但许多研究表明，推送通知比电子邮件更能传达给用户。按照本教程构建 GitHub 跟踪器后，您将学会如何： 添加 Service Worker 并将跟踪器转换为PWA 订阅推送通知 使用GitHub API 通过Vercel云函数发送推送事件 使用EasyCron定期获取新问题 先决条件 为了阅读本文，您需要一些技能和服务： 安装了Node.js和 npm 先前的Svelte知识 一个免费的GitHub帐户，因为我们使用的是GitHub API 一个免费的MongoDB Atlas帐户，用于在云中使用 MongoDB 用于部署应用程序和云功能的免费Vercel帐户 Learn to Code with JavaScript 什么是推送通知？ 让我们看看这些所谓的“推送通知”是什么。

您必须熟悉定期通知。这些是出现在屏幕上的小文本气泡，用于通知您某些信息。推送通知类似，只不过它们不是按需生成的，而是在接收推送事件时生成的。推送通知在应用程序关闭时起作用，而常规通知则要求您打开应用程序。 Chrome 等现代网络浏览器通过使用称为服务工作者的东 决策者电子邮件列表 西来支持推送通知。Service Worker 是独立于浏览器主线程运行的 JavaScript 小片段，因此，如果您的应用程序安装为 PWA（渐进式 Web 应用程序），则可以离线运行。 推送通知用于在聊天应用程序中通知用户有未读消息、在游戏中通知用户游戏事件、在新闻网站中通知用户突发文章以及许多其他用途。 在应用程序中显示推送通知有四个步骤： 请求许可window.Notification.requestPermission将您的应用程序转换为 PWA 并安装它 订阅推送事件 收到推送事件后，发送通知 第 1 步：创建跟踪器 在本文中，我们将 Svelte 与Vite.js一起使用，而不是 Rollup。



Vite 顾名思义，比 Rollup 更快，而且还内置了对环境变量的支持。要使用 Svelte 和 Vite 创建新项目，请运行以下命令： npm init vite Learn to Code with JavaScript 选择要的框架svelte。如果需要，您可以使用 TypeScript。我将使用常规 JavaScript。 接下来，cd进入项目文件夹，您可以将TailwindCSS添加到您的应用程序并使用以下命令安装所有依赖项： npx svelte-add tailwindcss  Install packages yarn install # or npm install 最后，在您喜欢的代码编辑器中打开项目并运行npm run dev或在上启动应用程序。 追踪器如何工作 我们将使用 GitHub API 获取用户已跟踪的存储库的问题列表和拉取请求您的屏幕现在应该如下所示： 新的跟踪器组件 注意：记得恢复App.svelte到之前的代码！ 第2步：设置云功能 我们需要有一个后端服务器来将推送事件发送到我们的应用程序。