Progressive Web Apps を体験しよう

自己紹介

なまえ	政倉智 (まさくらとも)
所属	html5j 鹿児島 / codeArts 株式会社
趣味	バイク / プログラム / 他

アジェンダ

PWA の技術を紹介
PWA オンラインショップアプリデモ

PWA を構成する技術

Web App Manifest
Notification API
Service Worker
Push API

Web App Manifest

の前に、ホーム画面に追加

ホーム画面に追加

今見ているサイトをホーム画面に追加できる
PWA とは関係なくできる

試す

Web App Manifest


// manifest.webapp
{
  "name": "アプリの名前",
  "short_name": "ホーム画面などで使われる名前",
  "description": "アプリの説明",
  "icons": [
    {"src": "logo-72.png", "sizes": "72x72", "type": "image/png"}.
    {"src": "logo-144.png", "sizes": "144x144", "type": "image/png"}
  ]
}


<!-- index.html -->
<link rel="manifest" href="manifest.webmanifest">

試す

Web App Manifest


// manifest.webapp
{
  "name": "アプリの名前",
  "short_name": "ホーム画面などで使われる名前",
  "start_url": "index.html",
  "background_color": "grey",
  "theme_color": "aliceblue",
  "display": "standalone"
}

開始ページ
背景色とかテーマカラー
ブラウザーと分離する

試す

ある程度はマニフェストなしでも...

この辺りは、マニフェストなしでもいけるとかいけないとか。

アプリの名前
アプリの説明
アイコン

Web App Manifest まとめ

アプリとしての情報をまとめておくファイル
<link rel="manifest" href="manifest.webmanifest">
スプラッシュスクリーン
テーマカラー・背景色
ブラウザーと分離することもできる

こんな機能も

ホーム画面へ追加を促す
あとでやります!

Notification API

最近こ通知の許可が増えましたよねぇ

Service Worker (後述) や許可が必要
iOS は非対応

// Service Worker を登録
navigator.serviceWorker.register('sw.js');

// 通知の許可をもらう
Notification.requestPermission(permission => {
  if (permission !== 'granted') return;

  // Service Worker 経由で通知を表示
  navigator.serviceWorker.ready
    .then(registration => registration.showNotification('たいとる', {
      body: 'ほんぶん',
      icon: 'icon.png',
  }));
});

試す

Notification API まとめ

アプリみたいに通知ができる
iOS では使えない...

こんな機能も

Push API と組み合わせて、サーバーから通知を出す
後でやります!

Service Worker

Web Worker の一種
タブを閉じてもバックグラウンドで動作
オフラインや通知で重要な役割
役割が多いので一つ一つ

Web Worker の一種

ブラウザーの UI とは別スレッドで動く
(ブラウザーが固まらない)
DOM にアクセスできない

試す

バックグラウンド動作

タブを閉じても動作し続ける
通知にもってこい

試す

HTTP のフック

Service Worker は HTTP をフックします
好きなレスポンスを返すことができる
スマフォとパソコンで違うサイズのアイコンを返すとかもできる

試す

Cache API

アプリケーションキャッシュは使いにくい
より柔軟性の高いキャッシュが求められた
SW + Cache API はこれを実現

試す

アプリのインストール

さっきの方法はちょっと問題が...

初回アクセスではキャッシュされない
Service Worker がまだ起動していないため?

最初のアクセスで、必要なファイルをキャッシュする

試す

ホーム画面に追加を促す

ホーム画面に追加なんて誰もやりませんよね?
条件を満たせば追加を促してくれます

試す

Service Worker まとめ

タブを閉じてもバックグラウンドで動く Web Worker の一種
Notification API と組み合わせて通知
Cache API と組み合わせてオフライン対応
ホーム画面に追加を促す機能の条件の一つ

ほかにもこんなことが

通信条件が悪い時のパフォーマンスの改善
Node.js Express を動かした猛者もいるよ...

Push API

スマフォでおなじみの Push をウェブでも!
iOS は非対応
デモは Chrome 専用です

試す

まとめ

PWA 化すると...

アプリっぽい挙動にできる
オフラインでも動作
パフォーマンスの向上
アプリのような通知
バックグラウンドでも動き続ける

デモ

オンラインショップアプリを作ってみた

試す

疑問? PWA って使える?

今のウェブサイトをより使いやすく (非 PWA)
今のウェブサイトを PWA 化
ネイティブアプリの代わりとしての PWA

これが正解ってのはないと思う

ウェブサイトやウェブアプリをより良くする方法の一つ

ストアを通さないのはメリットでもありデメリットでもある

効果がありそうな技術を一つ一つ導入するのがいいんじゃないかなと

Progressive Web Apps を体験しよう

自己紹介

アジェンダ

PWA を構成する技術

Web App Manifest

の前に、ホーム画面に追加

ホーム画面に追加

Web App Manifest

Web App Manifest

ある程度はマニフェストなしでも...

Web App Manifest まとめ

こんな機能も

Notification API

Notification API まとめ

こんな機能も

Service Worker

Web Worker の一種

バックグラウンド動作

HTTP のフック

Cache API

アプリのインストール

ホーム画面に追加を促す

Service Worker まとめ

ほかにもこんなことが

Push API

まとめ

PWA 化すると...

デモ

疑問? PWA って使える?

最後に

このスライドも PWA です!

ご清聴ありがとうございました!