在Svelte中創建帶有推送通知的GitHub跟踪器

>在本文中，您將學習如何構建一個GitHub跟踪器，該跟踪器通過發送推送通知在跟踪存儲庫上有新的問題/PR時通知用戶。

如果您選擇使用，：

添加服務工作者並將跟踪器轉換為PWA

>
• 訂閱推送通知
• 使用github api
• >通過Vercel Cloud功能發送推送事件
• 使用EasyCron
定期提取新問題
>先決條件

您需要遵循本文的一些技能和服務：>

> node.js和npm已安裝

先前的Svelte知識
一個免費的github帳戶，因為我們正在使用github api
>免費的mongodb atlas帳戶在雲中使用mongodb
• >一個免費的vercel帳戶，用於部署應用程序和雲功能
>
推動通知是什麼？
• >
>讓我們看看這些所謂的“推送通知”是什麼。

>

>您必須熟悉常規通知。這些是屏幕上出現在

上的文字的小氣泡。推送通知是相似的，除了它們不是按點播

生成的，但是在接收推動事件

>時會生成它們。當應用程序關閉

時，推送通知工作，而常規通知要求您打開應用程序。 > 通過使用所謂的服務工人，在現代網絡瀏覽器（例如Chrome）中支持推送通知。服務工作人員是與瀏覽器主線程分開運行的JavaScript的小部分，因此，如果將您的應用程序安裝為PWA（Progressive Web應用程序）。 >推送通知在聊天應用程序中使用以通知用戶在遊戲中未讀消息時通知他們，以通知用戶，在新聞網站中通知用戶，以通知用戶，以通知用戶，並出於許多其他目的。 有四個步驟可以在您的應用中顯示推送通知： > window.notification.requestpermission（）>請求許可

>將您的應用程序轉換為PWA並安裝

訂閱推送事件

>

收到推送事件後，發送通知

>步驟1：創建跟踪器
1. 在本文中，讓我們將Svelte與Vite.js一起使用，而不是滾動。顧名思義，Vite IS比匯總更快，並且還為環境變量提供內置支持。要使用Svelte和Vite創建一個新項目，請運行以下命令：
2. 選擇要苗條的框架。如果需要，可以使用打字稿。我將使用常規的JavaScript。

接下來，CD到項目文件夾中，您可以在應用程序中添加parwindcss，並使用這些命令安裝所有依賴項：

<span>npm init vite
</span>

最後，在您喜歡的代碼編輯器中打開項目，然後運行NPM運行DEV或YARN DEV，以在http：// localhost：3000。

跟踪器將如何工作
>我們將使用GitHub API獲取問題列表，並提取用戶跟踪的存儲庫的請求。用戶的跟踪存儲庫及其用戶名將存儲在MongoDB數據庫中。
>第一步是提示用戶獲取用戶名。創建src/lib/usernameprompt.svelte，這將是這樣做的組件。這是我的UI，但您可以根據需要進行設計：
>在app.svelte中添加此組件。

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

接下來，讓我們添加主跟踪器UI。創建文件src/lib/tracker.svelte並在其中添加以下代碼：>
測試您的組件，

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

暫時
將用戶名組件換成app.svelte中的新跟踪器組件：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

您的屏幕現在應該看起來像這樣：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

>

注意：請記住將App.svelte還原到其先前的代碼！

步驟2：設置雲功能

>我們需要有一個後端服務器將推動事件發送到我們的應用程序。這意味著您需要創建一個新的（也許）ExpressJS項目，然後單獨部署。對於僅嘗試使用推送通知的人來說，這都是頭痛。

> Vercel Cloud功能可以進行救援！雲功能就像快速路由。他們可以運行代碼並在獲取其URL時給您響應。 Vercel支持雲功能；您只需要在API文件夾中創建文件即可。您將使用雲功能與MongoDB進行交互，因為公開秘密客戶端絕不是一件好事。 > 首先，請確保您在MongoDB地圖集中有一個集群。 MongoDB有一個免費的計劃（

M0

），因此，如果您還沒有，請務必創建一個。現在，轉到Atlas儀表板側邊欄中的“數據庫訪問”選項卡。通過單擊右側的綠色按鈕來添加新的數據庫用戶。輸入用戶的詳細信息（不要忘記密碼），然後創建用戶。

>
要連接到數據庫，您需要連接字符串。將新用戶和密碼保存在某個地方，然後轉到群集的概述。單擊右側的連接按鈕，然後選擇“連接應用程序”作為連接方法。您應該看到一個類似於下面的連接字符串。

>

>現在您擁有連接字符串，可以連接到數據庫，但是首先，您需要將當前應用程序部署到Vercel。最簡單的方法是使用github。

>創建一個新的github存儲庫，然後將代碼推向它。接下來，前往您的Vercel儀表板，然後單擊“新項目”按鈕。導入您的github存儲庫，確保框架是vite的，並添加一個稱為mongodb_url的環境變量。將其值設置為MongoDB數據庫的連接字符串。

>部署了網站後，您需要將本地開發命令從Yarn Dev更改為Vercel Dev。運行命令後，如果您要求您鏈接到現有項目，請單擊“是”。

>

注意：如果還沒有，請確保使用NPM I -G Vercel安裝Vercel CLI。 像我一樣，如果您遇到了與Vercel Dev一起使用Vite的問題，請確保將項目的開發命令更改為Vite -Port $ port從Vercel dashboard中的Vite中。

這將使我們能夠在本地使用正確的環境變量使用雲功能。 > >讓我們添加一個助手文件，該文件將使我們能夠訪問MongoDB而不會打開太多連接。創建文件api/_mongo.js，然後將以下代碼放入其中。 API目錄中的一個文件，該文件以_ will 為前綴的文件被視為雲功能。這使我們能夠在單獨的文件中添加助手和其他邏輯：

>導出連接承諾而不是主要客戶端本身將阻止我們在無服務器平台上工作。

使用commonjs代替eSmodules 請注意我如何使用需要而不是導入？這是因為，從撰寫本文開始，Vercel Cloud Functions

不支持JavaScript文件中的Esmodule導入語句。相反，您需要使用commonjs需要語句。

<span>npm init vite
</span>

>這裡有一個問題。如果您看到了我們應用程序的包裝。這意味著項目中的每個JavaScript文件都是Esmodule。這不是我們想要的，因此要將API目錄中的所有文件標記為commonjs文件，因此我們可以使用require語句，創建api/package.json。

>現在，這將允許我們在API目錄中使用“需要語句”。使用此命令安裝MongoDB連接驅動程序：

步驟3：添加功能 到目前為止，跟踪器

並沒有真正起作用，所以讓我們解決這個問題。 >

身份驗證

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

>用於身份驗證，我們需要存儲用戶在MongoDB數據庫中輸入的用戶名。

>創建一個file /api /storeusername.js。這將是一個雲功能，並將映射到http：// localhost：3000/api/storeusername。將以下代碼放在其中：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

接下來，讓MongoDB客戶端這樣：

<span>npm init vite
</span>

從請求的正文中提取用戶名：

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

接下來，您需要將此用戶名存儲在數據庫中：>

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

>最後，這就是API/storeusername.js文件應看起來：>
>將您的應用程序通過Vercel。將您的應用程序部署到Vercel。或推送到GitHub，您的無服務器功能應該是實時的！您可以使用此命令使用捲曲來對其進行測試：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

這應該在用戶集合中創建一個新文檔，其中_id字段是我們剛剛給出的用戶名。

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

>現在剩下的就是在前端獲取此功能。在src/lib/usernameprompt.svelte中，在提交功能中，首先需要將請求發送到雲功能，然後將用戶名放入LocalStorage，因此我們知道用戶已認證。您可以使用fetch函數發送請求：

>我們正在重新加載頁面，因為在app.svelte中，加載頁面後，我們需要檢查localStorage中是否有用戶名。如果有的話，我們可以跳過USERNAME PROMPT屏幕。為此，請在app.svelte的腳本標籤中添加此代碼：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

>上面的代碼將檢查一個用戶名的localStorage，並將其設置為true（如果存在）。接下來，我們要做的就是更新DOM。就在app.svelte的腳本標籤下，添加以下內容：

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

跟踪和取消跟踪存儲庫

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

>現在，讓我們為跟踪器的實際跟踪功能添加功能。如果您打開Tracker.Svelte，您會注意到有兩個功能 - track（）和untrack（）。這些函數應分別通過將其添加到數據庫中來跟踪和解開存儲庫。

。

>，但在此之前，您需要添加更多雲功能。一個可以跟踪存儲庫，另一個用於取消軌道，另一個用於獲取用戶的跟踪存儲庫。

>

讓我們一個一個一個。

>跟踪存儲庫
創建文件API/TRACKREPO.JS。這將映射到 /api /trackRepo：

用戶想要跟踪存儲庫時，他們將以存儲庫的名稱及其在身體中的用戶名來向此功能發送郵政請求。該功能將在用戶集合的TrackEdRepos字段中添加存儲庫的名稱。添加一些代碼以從身體中獲取這些字段：

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

>最後，添加代碼通過將其添加到數據庫中來跟踪存儲庫：>

<span>const mongoPromise = require("../src/lib/mongo");
</span><span>// All cloud functions must export a function that takes a req and res object.
</span><span>// These objects are similar to their express counterparts.
</span>module<span>.exports = async (req<span>, res</span>) => {
</span>  <span>// TODO
</span><span>};
</span>

這就是API/TRACKREPO.JS應該看起來的方式：

>

module<span>.exports = async (req<span>, res</span>) =>
</span>  <span>// Wait for the client to connect
</span>  <span>const mongo = await mongoPromise;
</span><span>}
</span>

現在是時候在跟踪器中使用此功能了。打開src/lib/tracker.svelte，然後更改track（）函數：

>

<span>// ...
</span><span>const { username } = req.body;
</span>
<span>// Check if the username is valid
</span><span>if (typeof username !== "string" || !username.trim()) {
</span>  res<span>.status(400).json({ message: "Please send the username" });
</span>  <span>return;
</span><span>}
</span>

>現在，當您在輸入中輸入存儲庫並單擊軌道時，它應該保存在數據庫中。

未跟踪存儲庫

>讓我們添加一個雲功能以解開存儲庫。創建文件API/UNTRACKREPO.JS。這將映射到 /api /untrackrepo：

<span>npm init vite
</span>

此云功能的請求主體將與TrackRepo函數的請求主體相同 - 用戶的用戶名和repo：

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

接下來，來自用戶的TrackEdRepos刪除存儲庫的代碼來了：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

這就是API/UNTRACKREPO.JS應該看起來的方式：

>

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

現在是時候在前端使用此云功能了。在src/lib/tracker.svelte的untrack（）函數中，添加此代碼：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

>您會注意到它與Track（）函數非常相似，因為它實際上是相同的；只是URL已更新。您還不能真正對此進行測試，因為我們沒有顯示跟踪存儲庫的列表，所以讓我們解決這個問題。

>

>列表跟踪的存儲庫

這部分非常簡單。您只需要從數據庫中獲取用戶的跟踪存儲庫，然後在前端顯示它。創建一個雲函數API/listrepos.js，然後向其添加以下代碼：>

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

>由於將使用HTTP獲取請求來調用雲功能，因此您無法將其放置在其中，因此我們使用查詢字符串來傳遞用戶名；而且由於user.trackedrepos可能為null，因此我們確保返回數組。接下來，是時候在前端使用此云功能了！在src/lib/tracker.svelte文件中創建一個稱為fetchrepos的異步函數。此功能將負責使用我們剛剛創建的雲功能從數據庫中獲取用戶的跟踪存儲庫：>
>安裝組件時我們需要獲取此功能。這可以使用Svelte中的OnMount鉤子完成。安裝組件時，我想將上述函數的返回值設置為一個稱為TrackEdrepos的變量，因此我們可以在DOM中使用它：

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

>現在我們可以訪問用戶的跟踪存儲庫，讓我們在Tracker.Svelte中更新HTML模板以顯示跟踪存儲庫的準確列表：

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

>
>我們仍然必須重新加載頁面才能查看任何更改。讓我們每次單擊軌道或UNTRACK按鈕時都更新DOM來解決該問題：>

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

>這是Tracker.Svelte應該看起來的樣子：

<span>const mongoPromise = require("../src/lib/mongo");
</span><span>// All cloud functions must export a function that takes a req and res object.
</span><span>// These objects are similar to their express counterparts.
</span>module<span>.exports = async (req<span>, res</span>) => {
</span>  <span>// TODO
</span><span>};
</span>

>這是該應用現在應該如何顯示的屏幕截圖。

module<span>.exports = async (req<span>, res</span>) =>
</span>  <span>// Wait for the client to connect
</span>  <span>const mongo = await mongoPromise;
</span><span>}
</span>

>步驟4：使應用程序可安裝

>推送通知僅在

>安裝的應用程序

上支持。是的，您可以使用支持的瀏覽器

來安裝Web應用程序作為常規應用程序 - 即，Chrome和其他基於鉻的瀏覽器。

為了使應用程序可安裝，您需要將其轉換為漸進的Web應用程序。這是一個三步的過程：

1. 添加服務工作者
2. 使您的應用程序脫機
3. 添加清單。
如果完成了所有三個步驟，則訪問應用程序時的地址欄上會出現一個安裝按鈕。
添加服務工作者
服務工作者是可以在瀏覽器主線程中運行的JavaScript文件。這使他們可以執行諸如脫機運行，在後台運行和下載大文件之類的事情。它們主要用於緩存請求和聆聽活動，我們將要做的這兩個事件。 >

>要添加服務工作者，您需要添加一個公開可用的JavaScript文件，例如任何CSS文件。這個名稱並不重要，但通常被稱為service-worker.js或sw.js。該文件應像您的CSS一樣公開提供，因此將其放入公共目錄中。

服務工作者通過聽事件來工作。對於緩存文件，因此您的應用程序脫機工作，您將收聽安裝，激活和獲取事件。安裝服務工作者安裝時，安裝事件被調用。服務工作者運行時，請調用激活事件，並且每當提出網絡請求時，就會調用Fetch事件。可以使用self.addeventlistener（）添加活動聽眾。讓我們創建一個public/service-worker.js文件，然後添加以下代碼：>
>剩下的就是註冊此服務工作者。我們將在app.svelte的Onmount函數中執行此操作。在回調的末尾添加此代碼：

<span>npm init vite
</span>

上面的代碼首先檢查瀏覽器中的服務工作者支持，然後註冊我們的服務工作者。必須指出的是，寄存器（）函數中的路徑是相對於您的域

>，

>而不是

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

的路徑，這意味著應該在http上訪問服務工作者： // localhost：3000/service-worker.js，因為它在公共目錄中

現在，如果您>重新加載頁面並打開控制台，則應查看上述消息。 > 使我們的應用程序脫機

要使應用程序脫機工作，您需要使用服務工作者來緩存其內容。由於我們的應用程序提出了雲功能的要求，因此當沒有網絡時，它實際上無法做太多。因此，我們沒有顯示該應用程序的緩存，無功能的版本，而是顯示一個表明我們離線的頁面。創建一個public/offline.html文件，並將以下代碼放入其中：> >隨時可以根據需要自定義此頁面。您現在需要緩存此頁面。緩存也是一個三步過程，它使用了我們聽過的三個服務工作者事件。以下是它的工作方式：

>

使用CACHE.ADD打開緩存，並將所需的路由添加到緩存中。這發生在安裝期間。

3. 刪除了較舊的高速緩存，因此只有最新的保存在用戶的計算機中。這利用了較少的存儲空間。這發生在激活過程中。
4. 我們攔截了任何網絡請求，並檢查這些請求是否為

   頁面navigations - 也就是說，更改路由。如果請求成功，一切都很好，但是如果請求失敗，我們將向用戶提供脫機.html頁面。這發生在獲取期間。

   >讓我們實現第一步。打開服務工作者文件，然後更改安裝事件的處理程序：
>

event.waituntil（）是一個類似於等待關鍵字的函數。 AddEventListener的回調不能異步，因此要實現該功能，我們應該使用event.waituntil（）並通過它來承諾，以便期待諾言。

> self.skipwaiting（）告訴瀏覽器我們完成了安裝過程，因此請激活服務工作者。說到激活，現在添加代碼以刪除任何舊的緩存：>

<span>npm init vite
</span>

>，應該將offline.html頁面緩存。要仔細檢查，請按

f12

打開開發人員工具，然後選擇“應用程序”選項卡。在側邊欄上，應該有一個緩存存儲選項卡。單擊它，您應該注意到 /offline.html。

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

現在，當沒有網絡時，剩下要做的就是服務此文件：>

event.respondwith（）函數將使用傳遞給它的任何響應對象響應網絡獲取請求。在這種情況下，我們首先提取請求，如果請求失敗，這很可能是由於Internet問題，我們將發送earlline.html頁面，該頁面由服務工作者緩存。 現在刷新頁面並關閉您的Wi-Fi或以太網。現在，當您刷新時，您應該看到我們的離線頁面，而不是默認的Chrome“無網絡”頁面。不幸的是，此脫機頁面沒有恐龍遊戲，但確實使我們可以將應用程序安裝為PWA。

這是服務工作者應該看起來的樣子：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

添加清單。 標籤

鏈接到您的網站，就像您鏈接CSS文件一樣。讓我們為我們的應用程序添加清單。隨意使用發電機：

>

您需要為應用程序下載一堆圖標。這些圖標的大小不同，並且由不同的操作系統使用。您可以從源代碼存儲庫或使用此鏈接下載它們。確保將zip文件提取到公共/圖標。

>接下來，您需要將清單和圖標添加到index.html文件中。您可以通過將以下代碼放入其中：：

>通過按下

<span>npm init vite
</span>

f12

的打開Chrome’d開發人員工具，然後轉到燈塔選項卡並創建一個新的審核。現在，您應該在PWA部分獲得“可安裝”分數。這意味著您已成功將網站轉換為WebApp，現在可以通過單擊地址欄上的按鈕來安裝它。

步驟5：訂閱以推送通知

>在我們發送推送通知之前，我們需要獲得用戶的許可。您可以使用notification.requestpermission（）方法進行此操作。此方法是

>異步

，並且返回可以等於默認值（拒絕和授予）的A字符串。當用戶按下X，按下拒絕或按NOTIFIFICAN提示符允許時，將返回這些。我們將使用app.svelte中的onmount鉤子調用此功能：> >您現在應該彈出一個彈出窗口，要求您在應用中允許通知。現在，我們已經有權發送通知，讓我們使用服務工作者訂閱推動事件。這可以使用服務工作者的PusphManager.subscribe（）函數來完成。您可以在服務工作者本身或在app.svelte註冊服務工作者之後執行此操作。我會選擇後者，因此，如果您想執行相同的操作，只需替換Navigator.ServiceWorker.Register在OnMount中使用以下代碼：>

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

如果打開控制台，您會注意到一個錯誤，說applicationserverkey缺少。推送通知需要服務器來發送推送消息，並且這些服務器使用VAPID鍵進行身份驗證。這些鍵標識服務器，並讓瀏覽器知道推送消息有效。我們將使用Vercel Cloud函數發送推送消息，因此我們需要進行設置。 >

創建推動消息服務器

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

>我們將使用Web-Push NPM軟件包來幫助我們生成密鑰並發送推送事件。要安裝它，請將其CD到API文件夾並運行以下內容：

>

請記住將CD到API文件夾，否則Web-Push軟件包將安裝在Svelte App中。

要發送推送通知，您需要生成一個公共和私有VAPID密鑰對。為此，請使用節點命令打開節點reve Repled並運行以下命令：>

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

>複製這兩個鍵，並將它們作為環境變量存儲在Vercel上。確保稱他們為令人難忘的東西，例如vapid_private_key和vapid_public_key。

現在，我們可以開始在雲功能上進行工作。創建文件api/vapidkeys.js。該文件將負責將publicvapid鍵發送給客戶端。您應該永遠不要共享私有VAPID密鑰。在API/vapidkeys.js中，首先我們需要初始化web-push： >確保用vercel應用程序的域替換your_vercel_domain。接下來，讓我們導出一個函數以將公共VAPID密鑰返回請求者：>

<span>npm init vite
</span>

>完成此操作，您現在可以更新app.svelte中的onmount函數以首先獲取雲功能以獲取公共密鑰，然後在訂閱函數中使用公共密鑰：>

請注意，如果

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

>我們尚未訂閱推送通知，我們只能獲取Vapid鍵

。如果打開控制台，則應查看已記錄到控制台的訂閱。 >

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

提供的終點對我們非常重要。此終點將使我們能夠使用Web-Push通知此用戶。讓我們創建一個雲功能以將此端點存儲在數據庫中。創建文件API/StoreEndpoint.js：

>讓我們從身體中獲取訂閱和用戶名：>

>讓我們將其添加到數據庫中：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

>這是最終雲功能的外觀：

每次我們訂閱推送通知時，都應調用此功能。讓我們使用一個Svelte的反應塊來調用此云功能，每當子變量具有值

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

>和

的iSloggedIn變量時。在app.svelte中的<script>標籤結束之前，添加此代碼 </script>

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

>刷新頁面，您應該看到當前瀏覽器的按下端點和鍵存儲在訂閱對像中的mongoDB數據庫中。 >您要做的就是處理服務工作者中的推送事件，並創建一個雲功能以檢查GitHub是否有新問題和PRS。

>讓我們先做後者。創建一個新的雲功能API/fetchgh.js。此功能將負責檢查github並發送推送通知：

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

>

>讓我們從數據庫中獲取所有用戶，因此我們知道要獲取什麼回購：>

接下來，創建兩個變量來存儲當前獲取的存儲庫，以及具有任何新問題或PRS的存儲庫：>

<span>npm init vite
</span>

對於每個用戶，讓我們查看其跟踪的存儲庫中的任何新問題。為了確保僅檢查一個存儲庫一次，我們將將存儲庫添加到已經取方的雷神中，並將添加所有具有新問題的存儲庫中的存儲庫。為此，我們需要循環瀏覽用戶數組中的每個用戶，並獲取以獲取的存儲庫列表。這將通過檢查其TrackedRepos中的任何重複項來完成。完成此操作後，我們將為每個存儲庫調用FetchRepo功能。 fetchrepo將返回布爾值 - 如果有新問題，則為false，否則：

>

npx svelte-add tailwindcss

<span># Install packages
</span><span>yarn install # or npm install
</span>

>由於fetchrepo會異步，所以我使用地圖每次都返回承諾，並使用Promise.All等待所有諾言。這是因為for循環是異步的。如果不期待承諾，變量可能是不確定的，請務必等待承諾！

> 現在，用於fetchrepo函數。此功能將獲得我們最後一次從數據庫中檢查GitHub API的時間。這只能從Github獲取最新問題。然後，它以獲取任何新問題的GitHub API，如果有的話，將返回一個布爾值：

>

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let username = "";
</span></span></span><span><span>  <span>async function submit() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>="{submit}"</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>Enter a username<span><span></h1</span>></span>
</span>  <span><span><span><p</span> class<span>="text-center text-xl m-4"</span>></span>Enter a username to use this tracker<span><span></p</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Username"</span>
</span></span><span>    <span>aria-label<span>="Username"</span>
</span></span><span>    <span><span>bind:value</span><span>="{username}"</span>
</span></span><span>  <span>/></span>
</span>
  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>  <span>></span>
</span>    Submit
  <span><span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span>

>完成此操作後，我們需要向跟踪具有任何新問題的存儲庫的任何用戶發送推送通知。這可以使用Web-Push完成。將這些代碼行添加到導出函數的末尾：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>import <span>UsernamePrompt</span> from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><UsernamePrompt</span> /></span>
</span>

首先，我們需要檢查任何用戶的跟踪存儲庫是否有新問題。這可以使用陣列。一種方法。 array.some（）確定指定的回調函數是否返回數組的任何元素，因此我們可以輕鬆地使用它來檢查：

>

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>let repo = "";
</span></span></span><span><span>  <span>function track() {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span>
</span></span><span><span>  <span>function untrack(repo) {
</span></span></span><span><span>    <span>// TODO
</span></span></span><span><span>  <span>}
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><form</span>
</span></span><span>  <span><span>on:submit|preventDefault</span><span>={track}</span>
</span></span><span>  <span>class<span>="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"</span>
</span></span><span><span>></span>
</span>  <span><span><span><h1</span> class<span>="text-center text-3xl m-4"</span>></span>GitHub tracker<span><span></h1</span>></span>
</span>
  <span><span><span><input</span>
</span></span><span>    <span>type<span>="text"</span>
</span></span><span>    <span>class<span>="rounded px-4 py-2 border border-gray-300 w-full outline-none"</span>
</span></span><span>    <span>placeholder<span>="Enter the repository's URL"</span>
</span></span><span>    <span>aria-label<span>="Repository URL"</span>
</span></span><span>    <span><span>bind:value</span><span>={repo}</span>
</span></span><span>  <span>/></span>
</span>  <span><span><span><button</span>
</span></span><span>    <span>class<span>="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"</span>
</span></span><span>    <span>></span>Track repository<span><span></button</span>
</span></span><span>  <span>></span>
</span>
  <span><span><span><h2</span> class<span>="mt-4 text-2xl"</span>></span>Tracked repositories<span><span></h2</span>></span>
</span>  <span><span><span><ul</span> class<span>="m-2 list-decimal"</span>></span>
</span>    <span><!-- We'll use a loop to automatically add repositories here later on. -->
</span>    <span><span><span><li</span> class<span>="py-1 flex items-center justify-between"</span>></span>
</span>      <span><span><span><a</span> class<span>="text-gray-500 hover:underline"</span> href<span>="https://github.com/test/test"</span>
</span></span><span>        <span>></span>https://github.com/test/test<span><span></a</span>
</span></span><span>      <span>></span>
</span>      <button  on:click={() => untrack("")}
        >Untrack<span><span><span></button</span>
</span></span><span>      <span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></form</span>></span>
</span>

>最後，我們發送通知：

<span><span><span><script</span>></span><span>
</span></span><span><span>  <span>// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
</span></span></span><span><span>  <span>import <span>Tracker</span> from "./lib/Tracker.svelte";
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- <UsernamePrompt /> -->
</span><span><span><span><Tracker</span> /></span>
</span>

這是雲功能應該看起來的方式：

<span>const { MongoClient } = require("mongodb");
</span>
<span>const mongo = new MongoClient(process.env.MONGODB_URL);
</span>
<span>// Export the connection promise
</span><span>export default mongo.connect();
</span>

聆聽推動事件

>剩下要做的就是聆聽服務工作者中的推動事件。打開服務工作者並添加下面的代碼：

<span>{
</span>  <span>"type": "commonjs"
</span><span>}
</span>

>調用雲功能時，也許使用捲髮時，您應該在瀏覽器控制台中查看新問題。這真的不是很有幫助，所以讓它發出通知：

>

<span># Don't forget to CD!
</span><span>cd api
</span><span>npm i mongodb # or use yarn
</span>

>從mongodb刪除收集的收集，然後再次調用雲功能。現在，您應該從Web瀏覽器中收到通知。

使用Vercel部署應用程序。或通過推動GitHub，將應用程序作為PWA安裝，然後通過訪問https：// your_vercel_app/api/fetchgh來運行雲功能，即使您尚未打開應用程序！

，也應該收到通知。

如果您沒有收到通知，或者從Web推動中獲得410錯誤，請確保在詢問時允許在提示符中永遠允許通知。

>

步驟6：創建一個cron作業

如果我們必須手動調用雲功能，對跟踪器並不是真正的跟踪器，對嗎？讓我們使用EasyCron每小時自動調用雲功能。

>

>前往您的EasyCron儀表板，創建一個新的Cron作業。對於URL，請輸入https：// your_vercel_domain/api/fetchgh，然後選擇一個間隔。我每小時都會去，但請隨時自定義。

>

結論

>這樣，您每次在任何跟踪的存儲庫中都有新問題/PR時，您應該收到通知。如果您在任何地方都卡住了，請隨時查看源代碼或實時版本。

>經常詢問的問題（常見問題解答）關於在Svelte

中創建帶有推送通知的GitHub跟踪器

什麼是svelte，為什麼我應該使用它來創建github跟踪器？

svelte是現代的javaScript編譯器，它允許您編寫易於理解的JavaScript代碼，然後將其編譯為高效的代碼直接在瀏覽器中運行。它提供了比其他JavaScript框架（如React或Vue）更簡單，更直觀的編程模型，並導致加載時間更快，性能更好。創建GitHub跟踪器時，使用Svelte可以使您的代碼清潔，更易於維護和更有效。內置反應性系統。該系統允許您定義反應性語句，這些語句每當應用程序的狀態更改時會自動更新。當發生更改時，例如將新提交推向GitHub存儲庫時，反應性語句可以觸發推送通知以告知用戶更改。

我可以使用Svelte跟踪多個GitHub存儲庫嗎？ >

>我如何自定義Sevelte通知的外觀？可以使用CSS自定義Svelte中的通知。 Svelte允許您編寫僅適用於定義的組件的範圍CSS。這意味著您可以在不影響其餘應用程序的情況下為您的推送通知創建獨特的樣式。

>

>我可以與其他JavaScript框架或庫一起使用Svelte？ JavaScript框架或庫。但是，Svelte的主要優點之一是它的簡單性和效率，因此將其與其他框架或圖書館一起使用可能會否定其中一些好處。如果可能的話，最好自行使用Svelte。

>在Svelte中創建GITHUB跟踪器時，如何處理錯誤？

>使用JavaScript代碼中的try/catch塊可以在Svelte中進行錯誤處理。例如，如果從GitHub API獲取數據時發生錯誤，則可以捕獲錯誤並向用戶顯示有用的消息。

>

我可以使用SVELTE創建私人存儲庫的GitHub Tracker嗎？ >

是的，您可以使用Svelte為私人存儲庫創建GitHub跟踪器。您需要使用個人訪問令牌與GitHub API進行身份驗證，該令牌可以從您的github帳戶設置中生成。

如何在Svelte中測試我的GitHub Tracker？可以使用各種JavaScript測試庫，例如開玩笑或摩卡咖啡來完成。這些庫允許您為組件和反應性語句編寫測試，以確保它們正常工作。

我可以將我的Svelte Github跟踪器部署到服務器上嗎？

是的，您可以部署Svelte GitHub跟踪器到服務器。 Svelte將您的代碼編譯到普通的JavaScript，CSS和HTML，可以由任何靜態文件服務器提供。

>

如何在Svelte或GitHub API更改時如何更新我的GitHub Tracker？當Svelte或GitHub API更改時，您需要相應地更新GitHub跟踪器。這可能涉及更新您的Svelte代碼以使用新功能或語法，或更新API調用以匹配GitHub API中的更改。重要的是要定期檢查更新，以確保您的github跟踪器繼續正常工作。

>

以上是在Svelte中創建帶有推送通知的GitHub跟踪器的詳細內容。更多資訊請關注PHP中文網其他相關文章！