これは、Webプッシュ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の設定

ブラウザで/public/index.htmlを開くだけでは、PWAは機能しません。 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リポジトリにすべてのコードがあります。