VanillaJavaScriptでPWAを構築する方法

投稿日: 2022-04-20 2022-10-06
タグ: javascript

これは、Web Push APIとcronスケジュールを活用するプログレッシブWebアプリ（PWA）の作成に関する3部構成のシリーズの最初の部分です。この記事では、基本事項（フロントエンド、Webアプリマニフェスト、およびアプリのService Workerの側面）について説明します。これを実現するために、純粋なJavaScriptのみを使用します。この投稿の最後に、オフラインでアクセスできるようにキャッシュされたPWAが機能するようになります。

私たちが構築しているもの

私の医者は最近私に1日3錠服用するように言いました。家に帰る途中、「私は開発者です。タスクを自動化します。薬を飲むのに役立つアプリを作成しましょう」と自分に言い聞かせました。

シンプルなプログレッシブウェブアプリ（PWA）を作成して、毎日薬を飲むように促します。

私たちのアプリには、Express.jsを利用したWebサーバーがあります。 Expressは、プッシュ通知をサブスクライブしたクライアントに通知をプッシュします。フロントエンドアプリも提供します。

ステップ1：PWA

私たちが構築しているアプリは、ブラウザが開かれていないときでもピルを服用するように私たちに思い出させる必要があります。したがって、プログレッシブWebアプリが必要です。

マニフェストを準備して準備する

PWAを構築する最初のステップは、このジェネレーターを使用してマニフェストを生成することです。このツールはあなたを作成します manifest.json アプリに関するすべての基本情報を保持するファイル。また、ユーザーがアプリをダウンロードしたときにユーザーの電話に表示されるいくつかのアイコンを作成します。

プロジェクトのルートにあるフォルダ内のすべてを解凍するだけです。 public. 私は自分のアプリをTemporasと呼ぶことにしました。

モジュール：public / manifest.json

 "name": "Temporas",
  "short_name": "Temporas",
  "theme_color": "#222831",
  "background_color": "#ffad17",
  "display": "standalone",
  "Scope": "",
  "start_url": "/index.html",
  "icons": [
    // A lot of icons
  ]

PWAはServiceWorkersに依存しています。サービスワーカーは、JavaScriptコードの他の部分から独立して登録されるとすぐに実行される小さなプログラムです。サービスワーカーはDOMと直接対話することはできませんが、コードの残りの部分にメッセージを送信することはできます（これについては、このシリーズのパート2で詳しく説明します）。

次に、フロントエンドを作成して、サービスワーカーを登録しましょう。

モジュール：public / index.html

<!DOCTYPE html>
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta name="theme-color" content="#222831">
  <link rel='manifest' href='./manifest.json'>

  <script>
    // Registering our Service worker
    if('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js', { scope: './' })
    }
  </script>
</head>
<body>
  <div class="hero">
    <h1>Temporas</h1>
    <h2>Take your medicine my friend</h2>
    <div id="status"></div>
    <button id="unsubscribe">unsubscribe</button>
  </div>
</body>

これで、インストール可能なWebアプリケーションが1ファイル離れたところにあります。サービスワーカーを作成しましょう。

モジュール：public / sw.js

const cacheName = 'Temporas';

// Cache all the files to make a PWA
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(cacheName).then(cache => {
      // Our application only has two files here index.html and manifest.json
      // but you can add more such as style.css as your app grows
      return cache.addAll([
        './',
        './index.html',
        './manifest.json'
      ]);
    })
  );
});

// Our service worker will intercept all fetch requests
// and check if we have cached the file
// if so it will serve the cached file
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open(cacheName)
      .then(cache => cache.match(event.request, { ignoreSearch: true }))
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

✨✨PWAがあります✨✨

Express.jsの設定

開いただけではPWAは機能しません /public/index.html ブラウザで。 Webサーバーからコンテンツを提供する必要があります。

まず、コマンドラインで設定しましょう。ルートフォルダで次のコマンドを実行します。

$ npm init
$ npm install express body-parser
$ touch app.js

の中に package.json 交換してください scripts フィールド：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node app.js"
}

それでは、アプリにデータを入力しましょう。

モジュール：app.js

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const port = 3000;

// We want to use JSON to send post request to our application
app.use(bodyParser.json());

// We tell express to serve the folder public as static content
app.use(express.static('public'));

app.get('/public');

app.listen(port, () => console.log(`Listening on port ${port}!`));

今、あなたは走ることができます npm run start. http：// localhost：3000 に移動し、サーバーを強制終了します。 http：// localhost：3000 をリロードすると、アプリはまだ機能しているように見えます。ラップトップの電源を切り、そのポートのWebページに戻ることもできます。

新しい機能を開発するときは、サービスワーカーのキャッシュメカニズムを無効にすることを強くお勧めします。混乱を招く可能性があります。

Expressサーバーのセットアップについて詳しく知りたい場合は、こちらの投稿をご覧ください。

PWAを確認する

PWAをテストするには、 Lighthouse拡張機能を使用して、すべてが機能しているかどうかを確認することを強くお勧めします。また、アプリをWebにデプロイするときは、PWAと見なされ、アプリとしてインストールできるように、HTTPS経由で提供される必要があることも忘れないでください。

このGithubリポジトリにすべてのコードがあります。

getdocs

13036