本資料のURL https://github.com/hifivemania/pwa_handson_docs
ハンズオン用のプロジェクトベースは以下のURLでダウンロードできます。ダウンロードしたら解凍してください。
https://github.com/hifivemania/pwa_handson
解凍後、そのフォルダの中に以下のコマンドを実行します。Node.jsを事前にインストールしてください（※バージョンは8以上を使ってください）。
npm i
これで必要なライブラリがインストールされます。
ライブラリをインストールすると以下のコマンドでWebサーバが立ち上がります。
npm run start
Webサーバは http://localhost:3000/ または http://127.0.0.1:3000/ でアクセスできます。
サンプルのプロジェクトは以下のような構成になっています（一部）。Monacaの場合は public を www と読み替えてください。
├── keygen.js（WebPush用のキーファイルを生成します）
├── public （Webブラウザからアクセスするファイルが入っています）
│ ├── icon.png（WebPush用のアイコンファイルです）
│ ├── index.html（TodoアプリのUIです）
│ ├── js（Webブラウザから読み込むJavaScriptファイル群です）
│ │ ├── app.js（Service Workerの処理が記述されています）
│ │ ├── app.push.js（WebPushに関する処理が記述されています）
│ │ └── todo.js（Todoアプリのコードです）
│ ├── manifest.json（アプリ用のマニフェストファイルです）
│ ├── sw.js（Service Workerです）
│ └── vendors（依存ライブラリです）
│ ├── bootstrap（UIフレームワークのBootstrapです）
│ │ ├── css
│ │ │ └── bootstrap.min.css
│ │ └── js
│ │ └── bootstrap.bundle.min.js
│ ├── hifive
│ │ ├── ejs-h5mod.js（テンプレートエンジンejsのファイルです）
│ │ ├── h5.css（hifive用のCSSです）
│ │ ├── h5.dev.js（HTML5用のMVCフレームワークです。こちらは開発用です）
│ │ ├── h5.js（HTML5用のMVCフレームワークです）
│ │ └── h5.js.map
│ └── jquery（jQueryです）
│ └── jquery.min.js
├── push.js（WebPushを配信します）
└── server.js （Webサーバを立てます）
資料は大きく分けて3部構成になります。第1章 アプリの説明は共通です。
各部は独立していますので、第2部から体験も可能です。では第1章 アプリの説明に進みましょう。