APIとcronスケジュールを活用するプログレッシブWebアプリ(PWA)の作成に関する3部構成のシリーズの最初の部分です。Workerの側面)について説明します。これを実現するために、純粋なJavaScriptのみを使用します。この投稿の最後に、オフラインでアクセスできるようにキャッシュされたPWAが機能するようになります。私たちが構築しているもの私の医者は最近私に1日3錠服用するように言いました。家に帰る途中、「私は開発者です。タスクを自動化します。薬を飲むのに役立つアプリを作成しましょう」と自分に言い聞かせました。シンプルなプログレッシブウェブアプリ(PWA)を作成して、毎日薬を飲むように促します。私たちのアプリには、Express.jsを利用したWebサーバーがあります。Expressは、プッシュ通知をサブスクライブしたクライアントに通知をプッシュします。フロントエンドアプリも提供します。ステップ1:PWA私たちが構築しているアプリは、ブラウザが開かれていないときでもピルを服用するように私たちに思い出させる必要があります。したがって、プログレッシブWebアプリが必要です。マニフェストを準備して準備するPWAを構築する最初のステップは、このジェネレーターを使用してマニフェストを生成することです。アプリに関するすべての基本情報を保持するファイル。ユーザーがアプリをダウンロードしたときにユーザーの電話に表示されるいくつかのアイコンを作成します。プロジェクトのルートにあるフォルダ内のすべてを解凍するだけです。私は自分のアプリをTemporasと呼ぶことにしました。]PWAはServiceWorkersに依存しています。サービスワーカーは、JavaScriptコードの他の部分から独立して登録されるとすぐに実行される小さなプログラムです。サービスワーカーはDOMと直接対話することはできませんが、コードの残りの部分にメッセージを送信することはできます(これについては、このシリーズのパート2で詳しく説明します)。次に、フロントエンドを作成して、サービスワーカーを登録しましょう。</div></body>これで、インストール可能なWebアプリケーションが1ファイル離れたところにあります。サービスワーカーを作成しましょう。Webサーバーからコンテンツを提供する必要があります。コマンドラインで設定しましょう。ルートフォルダで次のコマンドを実行します。app.js"}それでは、アプリにデータを入力しましょう。移動し、サーバーを強制終了します。リロードすると、アプリはまだ機能しているように見えます。ラップトップの電源を切り、そのポートのWebページに戻ることもできます。新しい機能を開発するときは、サービスワーカーのキャッシュメカニズムを無効にすることを強くお勧めします。混乱を招く可能性があります。Expressサーバーのセットアップについて詳しく知りたい場合は、こちらの投稿をご覧ください。Lighthouse拡張機能を使用して、すべてが機能しているかどうかを確認することを強くお勧めします。アプリをWebにデプロイするときは、PWAと見なされ、アプリとしてインストールできるように、HTTPS経由で提供される必要があることも忘れないでください。このGithubリポジトリにすべてのコードがあります。Joseモバイルバージョンに。