コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
通常の通知に精通している必要があります。これらは、画面に表示されるテキストの小さな泡です。プッシュ通知は類似していますが、それらはオンデマンド
m0
認証
それらに1つずつ作業しましょう。
crackingリポジトリ
ホームページ ウェブフロントエンド jsチュートリアル Svelteにプッシュ通知を備えたGitHubトラッカーを作成します

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

Christopher Nolan
Christopher Nolan
Feb 09, 2025 am 10:11 AM

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>
    ログイン後にコピー
    ログイン後にコピー
    ログイン後にコピー
    ログイン後にコピー

    Svelteにプッシュ通知を備えたGitHubトラッカーを作成します注：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関数を使用してリクエストを送信できます：

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

    ページをリロードしています。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段階のプロセスです：Svelteにプッシュ通知を備えたGitHubトラッカーを作成します

    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. ネットワークリクエストをインターセプトし、それらのリクエストが
  3. ページナビゲーション

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

    4. 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としてインストールすることができます。 Svelteにプッシュ通知を備えたGitHubトラッカーを作成しますサービスワーカーがどのように見えるかは次のとおりです

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に正常に変換したことを意味し、アドレスバーのボタンをクリックしてインストールできるようになりました。

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

ステップ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>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

プッシュ通知をサブスクライブしていない場合。コンソールを開くと、コンソールに記録されたサブスクリプションが表示されます。

Svelteにプッシュ通知を備えたGitHubトラッカーを作成します提供されるエンドポイントは、私たちにとって非常に重要です。このエンドポイントを使用すると、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}" /> それが完了したら、新しい問題があるリポジトリを追跡したユーザーにプッシュ通知を送信する必要があります。これは、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}
  />
    >

  
="mt-4 text-2xl">Tracked repositories

  




そして、クラウド関数がどのように見えるかは次のとおりです

<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エラーが発生した場合は、尋ねられたら、プロンプトで通知を永久に許可してください。
Svelteにプッシュ通知を備えたGitHubトラッカーを作成します 
ステップ6：CRONジョブの作成

クラウド関数を手動で呼び出す必要がある場合、トラッカーは実際にはトラッカーではありませんよね？ EasyCronを使用して、クラウド機能を1時間ごとに自動的に呼び出します。
easycronダッシュボードに向かい、新しいCronジョブを作成します。 URLの場合、https：// your_vercel_domain/api/fetchghを入力し、間隔を選択します。私は1時間ごとに行きますが、あなたが好きなようにそれをカスタマイズしてください。

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

そしてそれで、追跡されたリポジトリのいずれかに新しい問題/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 サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

Windows11 KB5054979の新しいものと更新の問題を修正する方法
3週間前 By DDD
KB5055523を修正する方法Windows 11にインストールできませんか？
2週間前 By DDD
Inzoi：学校と大学への応募方法
4週間前 By DDD
KB5055518を修正する方法Windows 10にインストールできませんか？
2週間前 By DDD
Atomfallのサイトオフィスキーを見つける場所
4週間前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7864
15
Java チュートリアル
1649
14
CakePHP チュートリアル
1404
52
Laravel チュートリアル
1300
25
PHP チュートリアル
1242
29
もっと見る
Related knowledge
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解：それが何をするのか、なぜそれが重要なのか javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ 誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptは学ぶのが難しいですか？ JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？ または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？ または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

JavaScriptの進化：現在の傾向と将来の見通し JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？ Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？ Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

See all articles