Svelteにプッシュ通知を備えたGitHubトラッカーを作成します

この記事では、プッシュ通知を送信して追跡されたリポジトリに新しい問題/PRがある場合にユーザーに通知するGitHubトラッカーを構築する方法を学びます。

Githubは、選択した場合はすでに電子メールを介して通知を送信していますが、多くの調査では、プッシュ通知が電子メールよりも優れていることが示されています。このチュートリアルに従ってGitHubトラッカーを構築した後、次の方法を学びました。

サービスワーカーを追加し、トラッカーをPWA

に変換します
• プッシュ通知を購読してください
• github api
を使用します
• vercel Cloud関数を介してプッシュイベントを送信します
• easycronを使用して定期的に新しい問題を取得します
• 前提条件

この記事に従う必要があるスキルとサービスがいくつかあります。

node.jsおよびnpmインストール

以前のsvelte知識

• github apiを使用しているため、無料のgithubアカウント
• クラウドでmongodbを使用する無料のmongodb atlasアカウント
• アプリケーションを展開し、クラウド機能のための無料のVercelアカウント
プッシュ通知とは？
これらのいわゆる「プッシュ通知」が何であるかを見てみましょう。

通常の通知に精通している必要があります。これらは、画面に表示されるテキストの小さな泡です。プッシュ通知は類似していますが、それらはオンデマンド

を生成しないが、プッシュイベントを受信すると生成されます

。プッシュ通知が動作

アプリがクローズされている場合

、通常の通知ではアプリを開いてもらう必要があります。 プッシュ通知は、サービスワーカーと呼ばれるものを使用することにより、Chromeのような最新のWebブラウザでサポートされています。サービスワーカーは、ブラウザのメインスレッドとは別に実行されるJavaScriptの小さな断片であり、その結果、アプリがPWA（Progressive Webアプリケーション）としてインストールされている場合、オフラインで実行できます。 プッシュ通知は、チャットアプリケーションで使用されて、ユーザーが未読メッセージ、ゲーム、ゲームイベントのユーザーに通知、ニュースサイト、ユーザーに記事を壊すことを通知し、他の多くの目的のために通知します。 アプリにプッシュ通知を表示する4つのステップがあります： window.notification.RequestPermission（）で許可を要求します アプリをPWAに変換してインストールします

イベントをプッシュするように購読してください

プッシュイベントを受信したら、通知を送信します

ステップ1：トラッカーの作成

この記事では、ロールアップの代わりに、vite.jsでSvelteを使用してみましょう。 Viteは、その名前が示すように、ロールアップよりも速く、環境変数の組み込みサポートも提供します。 SvelteとViteを使用して新しいプロジェクトを作成するには、このコマンドを実行してください。

1. フレームワークを選択します。必要に応じてTypeScriptを使用できます。通常のJavaScriptを使用します

   次に、プロジェクトフォルダーにCDを使用すると、TailWindCSSをアプリケーションに追加して、これらのコマンドを使用してすべての依存関係をインストールできます。

   <span>npm init vite
   </span>

   最後に、お気に入りのコードエディターでプロジェクトを開き、npm run 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>

   コンポーネントをテストするには、

   <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>

   一時的に

   app.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>

   注：app.svelteを以前のコードに復元することを忘れないでください！

   ステップ2：クラウド関数のセットアップ

   アプリケーションにプッシュイベントを送信するには、バックエンドサーバーが必要です。これは、新しい（多分）ExpressJSプロジェクトを作成し、それを個別に展開する必要があることを意味します。これはすべて、プッシュ通知を実験している人にとっては頭痛の種になります。 vercelクラウドは救助に機能します！クラウド関数は、エクスプレスルートのようなものです。 URLを取得すると、コードを実行して応答を提供できます。 Vercelはクラウド機能をサポートしています。 APIフォルダーにファイルを作成するだけです。クライアント側の秘密を公開することは決して良いことではないので、クラウド関数を使用してMongoDBと対話します。

   まず、Mongodb Atlasにクラスターがあることを確認してください。 Mongodbには無料のプラン（

   m0

   ）がありますので、まだ持っていない場合は必ず作成してください。次に、Atlasダッシュボードのサイドバーにあるデータベースアクセスタブに移動します。右側の緑色のボタンをクリックして、新しいデータベースユーザーを追加します。ユーザーの詳細を入力し（パスワードを忘れないでください）、ユーザーを作成します。
   データベースに接続するには、接続文字列が必要です。新しいユーザーとパスワードをどこかに保存し、クラスターの概要にアクセスしてください。右側の接続ボタンをクリックし、[接続方法としてアプリケーションを接続]を選択します。以下の文字列に似た接続文字列が表示されます。

   接続文字列ができたので、データベースに接続できますが、最初に、現在のアプリケーションをVercelに展開する必要があります。これを行う最も簡単な方法は、githubを使用することです

   新しいgithubリポジトリを作成し、コードをプッシュします。次に、vercelダッシュボードに移動し、[新しいプロジェクト]ボタンをクリックします。 githubリポジトリをインポートし、フレームワークがviteであることを確認し、mongodb_urlと呼ばれる環境変数を追加します。 MongoDBデータベースの接続文字列にその値を設定します。

   ウェブサイトが展開されたら、Yarn DevからVercel Devにローカル開発コマンドを変更する必要があります。コマンドを実行すると、既存のプロジェクトにリンクするように求められたら、[はい]をクリックします。

   注：npm i -g vercelでvercelCliをインストールしてください。 私のように、Vercel DevでViteを使用することに問題が発生した場合は、プロジェクトの

   Developmentコマンド

   をViteのViteから$ポートに変更してください。 これにより、正しい環境変数をローカルに使用してクラウド関数を使用できます。

   接続が多すぎずにMongoDBにアクセスできるヘルパーファイルを追加しましょう。ファイルAPI/_Mongo.jsを作成し、次のコードを入れます。 APIディレクトリ内のファイルは、クラウド関数として扱われない_意志

   ではありません。これにより、ヘルパーやその他のロジックを別々のファイルに追加できます。 メインクライアント自体の代わりに接続の約束をエクスポートすることで、サーバーレスプラットフォームで作業しているため、冗長接続が発生しません。 Esmodulesの代わりにcommonjsを使用して

   を使用します

   インポートの代わりにrequireを使用する方法に注意してください。これは、執筆時点で、vercel Cloud関数ここには1つの問題があります。アプリのpackage.jsonが表示されている場合、「タイプ」：「モジュール」という行があることに気付くでしょう。これは、プロジェクト内の各JavaScriptファイルがEsmoduleであることを意味します。これは私たちが望むものではないので、APIディレクトリ内のすべてのファイルをCommonJSファイルとしてマークするため、要求ステートメントを使用して、API/package.jsonを作成して、この行に追加できます。

   これにより、APIディレクトリで必要なステートメントを使用できるようになりました。このコマンドにmongodb接続ドライバーをインストールします：

   ステップ3：機能の追加

   <span>npm init vite
   </span>

   トラッカーは、今のところ実際には機能していないので、それを修正しましょう。

   認証

   認証のために、ユーザーがMongoDBデータベースに入力しているというユーザー名を保存する必要があります。 ファイル /api /storeusername.jsを作成します。これはクラウド機能になり、http：// localhost：3000/api/storeusernameにマッピングされます。以下のコードを入れてください：

   次に、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。またはgithubにプッシュすることにより、アプリケーションをvercelに展開し、サーバーレス機能はライブでなければなりません！このコマンドを使用してCurlを使用してテストできます

   <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>

   残っているのは、フロントエンドにこの関数を取得することだけです。 src/lib/usernameprompt.svelteでは、送信関数で、まずクラウド関数にリクエストを送信し、次にユーザー名をlocalStorageに配置する必要があります。そうすれば、ユーザーが認証されていることがわかります。 Fetch関数を使用してリクエストを送信できます：

   

   ページをリロードしています。App.svelteでは、ページが読み込まれると、LocalStorageにユーザー名があるかどうかを確認する必要があるためです。ある場合は、usernameprompt画面をスキップできます。これを行うには、このコードを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>

   上記のコードでは、ローカルストレージがユーザー名をチェックし、Isloggedinが存在する場合は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>

   追跡と解除リポジトリ
   次に、トラッカーの実際の追跡機能の機能を追加しましょう。 tracker.svelteを開くと、track（）とuntrack（）の2つの関数があることに気付くでしょう。これらの機能は、データベースに追加することにより、それぞれリポジトリを追跡および解除する必要があります。

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

   しかし、その前に、さらにいくつかのクラウド関数を追加する必要があります。リポジトリを追跡し、もう1つはトラックを解除するために、もう1つはユーザーの追跡リポジトリを取得します。

   それらに1つずつ作業しましょう。

   リポジトリの追跡

   ファイルAPI/trackRepo.jsを作成します。これは、 /api /trackRepo：

   にマッピングされます
   ユーザーがリポジトリを追跡したい場合、リポジトリの名前とボディ内のユーザー名でこの関数にPOSTリクエストを送信します。この関数は、ユーザーコレクションのtrackedReposフィールドにリポジトリの名前を追加します。これらのフィールドを体から取得するためのコードを追加してください：

   そして最後に、データベースに追加してリポジトリを追跡するコードを追加します。

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

   そしてこれがAPI/TrackRepo.jsの見た目です：

   <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>

   次に、この関数をトラッカーで使用する時が来ました。 SRC/lib/tracker.svelteを開き、track（）機能を変更します
   さて、入力にリポジトリを入力して[トラック]をクリックすると、データベースに保存されるはずです。

   crackingリポジトリ

   クラウド関数を追加して、リポジトリを追跡してみましょう。ファイルAPI/untrackrepo.jsを作成します。これは、 /api /untrackrepo：

   にマッピングされます

   <span>npm init vite
   </span>

   このクラウド関数のリクエスト本文は、TrackRepo関数のリクエストボディと同じです - ユーザーのユーザー名とリポジトリ：

   npx svelte-add tailwindcss
   
   <span># Install packages
   </span><span>yarn install # or npm install
   </span>

   次に、ユーザーのtrackedReposからリポジトリを削除するコードを次に示します。
   そしてこれがAPI/untrackrepo.jsがどのように見えるかです：

   <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>

   今度は、このクラウド機能をフロントエンドで利用する時が来ました。 src/lib/tracker.svelteのuntrack（）関数で、このコードを追加してください：

   <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>

   文字通り同じであるため、トラック（）関数に非常に似ていることに気付くでしょう。 URLだけが更新されました。追跡されたリポジトリのリストを表示していないため、まだこれをテストすることはできません。 追跡されたリポジトリのリスト

   <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>

   この部分は非常に簡単です。ユーザーの追跡されたリポジトリをデータベースから取得し、フロントエンドに表示するだけです。クラウド関数API/listrepos.jsを作成し、次のコードを追加します。
   クラウド関数はHTTP get requestを使用して呼び出されるため、ボディを入れることはできないため、クエリ文字列を使用してユーザー名を渡します。また、user.trackedReposはnullである可能性があるため、配列を返すようにしています。次に、このクラウド機能をフロントエンドで使用する時が来ました！ src/lib/tracker.svelteファイルにfetchreposと呼ばれる非同期関数を作成します。この関数は、作成したばかりのクラウド関数を使用して、データベースからユーザーの追跡リポジトリを取得する責任があります。
   コンポーネントがマウントされているときにこの関数を取得する必要があります。これは、Svelteのオンマウントフックを使用して実行できます。コンポーネントがマウントされたら、上記の関数の返された値をTrackedReposと呼ばれる変数に設定したいので、DOMで使用できます。

   <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>

   ユーザーの追跡リポジトリにアクセスできるようになったので、追跡されたリポジトリの正確なリストを表示するには、tracker.svelteのHTMLテンプレートを更新しましょう。

   <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>

   変更を確認するには、まだページをリロードする必要があります。トラックまたはUNTRACKボタンがクリックされるたびにDOMを更新して、それを修正しましょう：

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

   そして、Tracker.svelteがどのように見えるかは次のとおりです
   そして、これがアプリがどのように表示されるかのスクリーンショットです。

   <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>

   ステップ4：アプリをインストール可能にする
   プッシュ通知は、

   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>

   インストールされたアプリ

   でのみサポートされています。はい、サポートされているブラウザ

   - つまり、クロムおよびその他のクロムベースのブラウザーを使用して、通常のアプリケーションとしてWebアプリケーションをインストールできます。

   アプリをインストール可能にするには、プログレッシブWebアプリに変換する必要があります。これは3段階のプロセスです：

   1. サービスワーカーを追加
   2. アプリをオフラインで動作させる
   3. manifest.jsonファイルを追加

   3つのステップすべてが完了した場合、アプリケーションにアクセスすると、アドレスバーにインストールボタンが表示されます。

   サービスワーカーの追加
   サービスワーカーは、ブラウザのメインスレッドからバックグラウンドで実行できるJavaScriptファイルです。これにより、オフラインで実行したり、バックグラウンドで実行したり、大きなファイルをダウンロードしたりするなどのことを行うことができます。それらは主にキャッシュリクエストやイベントを聴くために使用されます。

   サービスワーカーを追加するには、CSSファイルと同様に、公開されているJavaScriptファイルを追加する必要があります。名前は実際には重要ではありませんが、通常はservice-worker.jsまたはsw.jsという名前です。このファイルはCSSのように公開される必要があるため、パブリックディレクトリに入れてください。

   サービスワーカーは、イベントを聴くことで働きます。ファイルをキャッシュすると、アプリがオフラインで動作するため、インストールを聴き、アクティブ化し、イベントをフェッチします。サービスワーカーがインストールされると、インストールイベントが呼び出されます。 Activateイベントは、サービスワーカーが実行されているときに呼び出され、ネットワークリクエストが行われるたびにフェッチイベントが呼び出されます。イベントリスナーは、self.addeventlistener（）を使用して追加できます。 public/service-worker.jsファイルを作成して、次のコードを追加しましょう。
   残っているのは、このサービスワーカーを登録することだけです。 app.svelteのマウント関数でそれを行います。オンマウント内のコールバックの最後にこのコードを追加：

   <span>npm init vite
   </span>

   上記のコードは、最初にブラウザでのサービスワーカーサポートをチェックし、次にサービスワーカーを登録します。レジスタ（）関数のパスは、プロジェクトフォルダーにドメイン

   、

   not

   npx svelte-add tailwindcss
   
   <span># Install packages
   </span><span>yarn install # or npm install
   </span>

   に比べてパス

   であることに注意する必要があります。 ：// localhost：3000/service-worker.js、それはパブリックディレクトリにあるためです。 ページをリロードしてコンソールを開くと、上記のメッセージが表示されます。

   アプリをオフラインで動作させる

   アプリをオフラインにするには、サービスワーカーを使用してコンテンツをキャッシュする必要があります。アプリはクラウド機能を要求しているため、ネットワークがない場合は実際にはできません。そのため、アプリのキャッシュされた機能のないバージョンを表示する代わりに、オフラインであることを示すページを表示しましょう。 public/offline.htmlファイルを作成し、次のコードを入れます。

   このページをお気軽にカスタマイズしてください。このページをキャッシュする必要があります。キャッシュは、私たちが聴いた3つの上記のサービスワーカーイベントを使用する3段階のプロセスでもあります。機能の仕組みは次のとおりです

   キャッシュが開かれ、cache.addを使用してキャッシュに目的のルートが追加されます。これは、インストール中に発生します。

2. 古いキャッシュが削除されるため、最新のキャッシュのみがユーザーのコンピューターに保存されます。これは、より少ないストレージを利用します。これは、アクティブ化中に発生します

ネットワークリクエストをインターセプトし、それらのリクエストが
3. ページナビゲーション

   であるかどうかを確認します。つまり、ルートを変更します。リクエストが成功した場合、それはすべてうまくいきますが、リクエストが失敗した場合、ユーザーに表示されるOffline.htmlページを配信します。これは、フェッチ中に発生します 最初のステップを実装しましょう。サービスワーカーファイルを開き、インストールイベントのハンドラーを次のように変更します。

event.waituntil（）は、待機キーワードに似た関数です。 AddEventListenerのコールバックは非同期ではないため、その機能を実装するには、event.waituntil（）を使用して約束を渡して、約束が待ち望まれます。

self.skipwaiting（）は、インストールプロセスが完了していることをブラウザに伝えているため、サービスワーカーをアクティブにします。アクティブ化といえば、コードを追加して古いキャッシュを削除しましょう。

そしてそれに伴い、offline.htmlページをキャッシュする必要があります。ダブルチェックするには、

<span>npm init vite
</span>

f12

を押して開発者ツールを開き、[アプリケーション]タブを選択します。サイドバーには、キャッシュストレージタブが必要です。それをクリックすると、 /offline.html。

に注意する必要があります

npx svelte-add tailwindcss

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

今やるべきことは、ネットワークがないときにこのファイルを提供することだけです：

event.respondwith（）関数は、渡される応答オブジェクトを使用してネットワークフェッチ要求に応答します。この場合、最初にリクエストを取得します。リクエストが失敗した場合、これがインターネットの問題のためである可能性が高い場合、サービスワーカーによってキャッシュされたOffline.htmlページを送信しています。

ページを更新して、Wi-Fiまたはイーサネットをオフにします。更新するときに、デフォルトのChrome「ネットワークなし」ページの代わりに、オフラインページを表示する必要があります。残念ながらこのオフラインページには恐竜のゲームがありませんが、アプリケーションをPWAとしてインストールすることができます。 サービスワーカーがどのように見えるかは次のとおりです

manifest.jsonファイルを追加

<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>

Manifest.json、またはWeb Manifestには、アプリの名前、テーマの色、説明、アイコンなど、アプリケーションに関する有用な情報が含まれています。このファイルは通常、manifest.jsonと呼ばれ、CSSファイルをリンクする方法など、htmlのタグを使用して

をWebサイトにリンクしている必要があります。アプリケーションにマニフェストを追加しましょう。これには発電機をお気軽に使用してください：

アプリケーション用のアイコンの束をダウンロードする必要があります。これらのアイコンは異なるサイズで、異なるオペレーティングシステムで使用されています。ソースコードリポジトリから、またはこのリンクを使用してダウンロードできます。 zipファイルをpublic/iconsに抽出してください。

<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>

次に、manifestとアイコンをindex.htmlファイルに追加する必要があります。次のコードを入れることでそうすることができます：

<span>npm init vite
</span>

f12を押して、灯台に移動して[灯台]タブに移動して新しい監査を作成して、開発者ツールを開きます。これで、PWAセクションで「インストール可能な」スコアを取得する必要があります。これは、WebサイトをWebAppに正常に変換したことを意味し、アドレスバーのボタンをクリックしてインストールできるようになりました。

ステップ5：[通知]をプッシュするための購読

プッシュ通知を送信する前に、ユーザーから許可を得る必要があります。 notification.RequestPermission（）メソッドを使用して使用できます。このメソッドは

非同期であり、デフォルトに等しく、拒否され、付与される文字列を返します。これらは、ユーザーがXを押したり、拒否を押したり、通知プロンプトを押したりすると、それぞれ拒否を押すと返されます。この関数を呼び出すには、app.svelteのオンマウントフックを使用します。

アプリでの通知を許可するように依頼するポップアップを取得する必要があります。通知を送信する許可があるので、サービスワーカーを使用してサブスクライブしてイベントをプッシュしましょう。これは、サービスワーカーのpushmanager.subscribe（）関数を使用して実行できます。これをサービスワーカー自体で行うか、app.svelteにサービスワーカーを登録した後に行うことができます。後者を使用するので、同じことをしたい場合は、navigator.serviceworker.registerの機能を下に置き換えます。

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パッケージを使用して、キーを生成し、プッシュイベントを送信します。それをインストールするには、APIフォルダーにCDを使用して次のことを実行します。

APIフォルダーへのCDを忘れないでください。それ以外の場合は、WebプッシュパッケージがSvelteアプリにインストールされます。

プッシュ通知を送信するには、パブリックおよびプライベートVapidキーペアを生成する必要があります。これを行うには、ノードコマンドを使用してノードREPLを開き、次のコマンドを実行します。

これら2つのキーをコピーして、vercelの環境変数として保存します。 vapid_private_keyやvapid_public_keyのような記憶に残るものを必ず呼んでください。

<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>

ここで、クラウド関数に関する作業を開始できます。ファイルAPI/vapidkeys.jsを作成します。このファイルは、クライアントにpublicvapidキーを送信する責任があります。プライベートVapidキーを共有しないでくださいを初期化する必要があります

<span>npm init vite
</span>

Your_vercel_domainをVercelAppのドメインに置き換えてください。次に、関数をエクスポートして、パブリックVapidキーをリクエスターに返すだけです：

npx svelte-add tailwindcss

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

それを完了すると、app.svelteのonmount関数を更新して最初にクラウド関数をフェッチして公開キーを取得し、サブスクライブ関数で公開キーを使用できます。

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プッシュを使用してこのユーザーに通知できます。クラウド関数を作成して、このエンドポイントをデータベースに保存しましょう。ファイル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>

データベースに追加しましょう：

<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>

がIsloggedin変数を持つたびに、このクラウド関数を呼び出すSvelte Reactiveブロックを使用してみましょう。 app.svelteで<script>タグが終了する直前にこのコードを追加します：<p> <em> ページを更新すると、現在のブラウザのプッシュエンドポイントとキーがサブスクリプションオブジェクトのMongoDBデータベースに保存されていることがわかります。 あなたがしなければならないのは、サービスワーカーのプッシュイベントを処理し、クラウド関数を作成して、新しい問題とPRSをGithubをチェックすることです。 <pre ><span >{ <span >"type": "commonjs" <span >} 最初に後者をしましょう。新しいクラウド関数API/fetchgh.jsを作成します。この関数は、GitHubをチェックしてプッシュ通知を送信する責任があります：<p> <p>データベースからすべてのユーザーを取得しましょう。 <p>次に、2つの変数を作成して、現在取得しているリポジトリを保存し、新しい問題またはPRSを使用してリポジトリを保存します。<pre ><span >npm init vite <p>各ユーザーについて、新しい問題について追跡されたリポジトリを確認しましょう。 1つのリポジトリが一度だけチェックされることを確認するために、既にFetchedReposにリポジトリを追加し、新しい問題を抱えるリポジトリを追加します。そのためには、ユーザー配列内のすべてのユーザーをループし、リポジトリのリストを取得する必要があります。これは、crackedReposを重複させてチェックすることで行われます。それが完了したら、すべてのリポジトリのFetchRepo関数を呼び出します。 fetchrepoはブール値を返します - 新しい問題がある場合はtrue、それ以外の場合： <pre >npx svelte-add tailwindcss <span ># Install packages <span >yarn install # or npm install <p>FetchRepoは非同期であるため、毎回約束を返すためにMAPを使用し、Promise.allを使用してすべてを待っていました。これは、forループが非同期であるために機能します。約束が待っていない場合は、変数を未定義にすることができるので、約束を待ってください！ FetchRepo関数のために<p>今。この関数は、データベースからGitHub APIをチェックした最後の時間を取得します。これは、GitHubから最新の問題のみを取得することです。次に、新しい問題に対してGitHub APIを取得し、ある場合はブール値を返します。 <pre ><span ><span ><span ><script><span > <span ><span > <span >let username = ""; <span ><span > <span >async function submit() { <span ><span > <span >// TODO <span ><span > <span >} <span ><span ><span ><span ></script>

on:submit|preventDefault="{submit}" class="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4" >

="text-center text-3xl m-4">Enter a username

="text-center text-xl m-4">Enter a username to use this tracker

type="text" class="rounded px-4 py-2 border border-gray-300 w-full outline-none" placeholder="Username" aria-label="Username" bind:value="{username}" /> class="mt-4 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full" > Submit それが完了したら、新しい問題があるリポジトリを追跡したユーザーにプッシュ通知を送信する必要があります。これは、Webプッシュを使用して実行できます。これらのコード行をエクスポートした関数の終わりに追加します：

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


最初に、ユーザーの追跡されたリポジトリのいずれかが新しい問題を抱えているかどうかを確認する必要があります。これは、array.someメソッドで実行できます。 array.some（）指定されたコールバック関数が配列の任意の要素に対してtrueを返すかどうかを判断するため、これを簡単に使用して次を確認できます。

そして最後に、通知を送信します：
<script><span >
<span ><span >  <span >let repo = "";
<span ><span >  <span >function track() {
<span ><span >    <span >// TODO
<span ><span >  <span >}
<span ><span >
<span ><span >  <span >function untrack(repo) {
<span ><span >    <span >// TODO
<span ><span >  <span >}
<span ><span ><span ><span ></script>

  on:submit|preventDefault={track}
  class="mx-auto min-w-[350px] max-w-[1100px] w-[50%] border border-gray-500 rounded my-4 px-6 py-4"
>
  
="text-center text-3xl m-4">GitHub tracker

      type="text"
    class="rounded px-4 py-2 border border-gray-300 w-full outline-none"
    placeholder="Enter the repository's URL"
    aria-label="Repository URL"
    bind:value={repo}
  />
      class="mt-2 border border-transparent bg-blue-500 text-white rounded px-4 py-2 w-full"
    >Track repository  >

  
="mt-4 text-2xl">Tracked repositories
  
="m-2 list-decimal">
    
    
="py-1 flex items-center justify-between">
      ="text-gray-500 hover:underline" href="https://github.com/test/test"
        >https://github.com/test/test      >
       untrack("")}
        >Untrack      >
    
  



そして、クラウド関数がどのように見えるかは次のとおりです
<script><span >
<span ><span >  <span >// import UsernamePrompt from "./lib/UsernamePrompt.svelte";
<span ><span >  <span >import <span >Tracker from "./lib/Tracker.svelte";
<span ><span ><span ><span ></script>




プッシュイベントを聴く

const { MongoClient } = require("mongodb");

const mongo = new MongoClient(process.env.MONGODB_URL);

// Export the connection promise
export default mongo.connect();
やるべきことは、サービスワーカーのプッシュイベントを聞くことだけです。サービスワーカーを開き、以下にコードを追加します：


クラウド関数を呼び出すと、おそらくCurlを使用して、ブラウザコンソールに新しい問題が記録されているのが表示されます。それはあまり役に立たないので、通知を送ってみましょう：
{
  "type": "commonjs"
}

MongodbからFetched Collectionを削除し、クラウド関数を再度呼び出します。これで、Webブラウザから通知を受け取る必要があります。
 
# Don't forget to CD!
cd api
npm i mongodb # or use yarn

Vercelを使用してアプリケーションを展開します。または、githubにプッシュして、アプリをPWAとしてインストールし、https：// your_vercel_app/api/fetchghに移動してクラウド関数を実行すると、アプリケーションを開いていなくても通知を受け取る必要があります！
通知を受け取らない場合、またはWebプッシュから410エラーが発生した場合は、尋ねられたら、プロンプトで通知を永久に許可してください。
 
ステップ6：CRONジョブの作成
クラウド関数を手動で呼び出す必要がある場合、トラッカーは実際にはトラッカーではありませんよね？ EasyCronを使用して、クラウド機能を1時間ごとに自動的に呼び出します。
easycronダッシュボードに向かい、新しいCronジョブを作成します。 URLの場合、https：// your_vercel_domain/api/fetchghを入力し、間隔を選択します。私は1時間ごとに行きますが、あなたが好きなようにそれをカスタマイズしてください。

 

結論

そしてそれで、追跡されたリポジトリのいずれかに新しい問題/PRがあるたびに通知を取得する必要があります。どこにでも立ち往生している場合は、ソースコードまたはライブバージョンを自由にチェックしてください。




Svelteのプッシュ通知を備えたGitHubトラッカーの作成に関するよくある質問（FAQ）<



svelteでのエラー処理は、JavaScriptコードのTry/Catchブロックを使用して実行できます。たとえば、GitHub APIからデータを取得しているときにエラーが発生した場合、エラーをキャッチしてユーザーに役立つメッセージを表示できます。 >
はい、Svelteを使用して、プライベートリポジトリ用のGitHubトラッカーを作成できます。 GitHubアカウント設定から生成できる個人的なアクセストークンを使用してGitHub APIで認証する必要があります。 JestやMochaなどのさまざまなJavaScriptテストライブラリを使用して実行できます。これらのライブラリを使用すると、コンポーネントのテストとリアクティブステートメントのテストを作成して、正しく機能していることを確認できます。サーバーへのgithubトラッカー。 Svelteは、任意の静的ファイルサーバーで提供できるPlain JavaScript、CSS、およびHTMLにコードをコンパイルします。 SvelteまたはGithub APIが変更されたら、それに応じてGitHubトラッカーを更新する必要があります。これには、Svelteコードを更新して新しい機能または構文を使用するか、API呼び出しを更新してGitHub APIの変更に合わせます。 GitHubトラッカーが正しく機能し続けることを確認するために、定期的に更新をチェックすることが重要です。
以上がSvelteにプッシュ通知を備えたGitHubトラッカーを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。