Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
.gitignore
1.md
1.pdf
2.md
2.pdf
3.md
3.pdf
4.md
4.pdf
5.md
5.pdf
6.md
6.pdf Update doucment Apr 5, 2019
7.md
7.pdf
LICENSE
README.md
README.pdf

README.md

本資料のURL https://github.com/hifivemania/pwa_handson_docs

プロジェクトベースのダウンロード

ハンズオン用のプロジェクトベースは以下のURLでダウンロードできます。ダウンロードしたら解凍してください。

https://github.com/hifivemania/pwa_handson

解凍後、そのフォルダの中に以下のコマンドを実行します。Node.jsを事前にインストールしてください(※バージョンは8以上を使ってください)。

npm i

これで必要なライブラリがインストールされます。

Webサーバを立ち上げる

ライブラリをインストールすると以下のコマンドで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章 アプリの説明は共通です。

第1部 アプリ化を体験する

第2部 Todoアプリのオフライン化

第3部 WebPush通知を体験する

各部は独立していますので、第2部から体験も可能です。では第1章 アプリの説明に進みましょう。

You can’t perform that action at this time.