PWA きほんの"き"
Thu. June 6 2019

触って理解するPWA
体系的に学ぶPWA
比較で学ぶPWA
PWAがもたらす価値

勉強会のゴール

→「PWAっすね〜＾＾」と得意げになれる

PWAを感じる

とにもかくにも

Let's Install !

日経新聞のPWAを

インストールしよう！

https://r.nikkei.com

Chrome

Safari

「ホーム画面に追加」

Installの3ステップ(iOS)

ホーム画面に追加

⬆︎ボタン

追加

Done !

普通のWebアプリ

と何が違うだろう？

1. Installable

ホーム画面に追加できる
(インストールできる)

Webブラウザを使用せず

ホーム画面から直接起動できる

2. OffLine Mode

コンテンツに

　- たどりつける

　- 閲覧できる

PWA

Web

※日経電子版は

オフライン閲覧を一時的に停止している模様

3. モバイルアプリ同様のUI

検索バーが存在しない

スワイプバック

滑らかな操作感

PWA = Webアプリの新しい姿

○Installable

　ホーム画面に追加

　ホーム画面から直接起動

○Offline Mode

　オフラインでも閲覧

○Like App UI

　モバイルアプリのような操作感

PWAって一言で？と聞かれたら

インストールできる

Webアプリ

ここにもPWA !

　- Twitter
　- Instagram
　- Piterest
　- ほしえん

自己紹介

アジェンダ

PWAとは
PWAはじめの一歩
比較でわかるPWAのよさ
世界のPWA成功事例
PWA一問一答

基礎用語

○キャッシュ

　- 一時的にデータを保存し、それ以降に
　使用するときすぐに取り出せるようにする領域

　→2回目以降の訪問は確実に早くなる

○UX (User eXperience)

　- ユーザーが製品やサービスを通じて得る体験

　　優れたUX: 「使ってよかったな」「これからも使いたいな」

　　　　　　　と思ってもらえる設計であること

○モバイルアプリ

　- ストアからインストールして使うアプリ

　　(ネイティブ,ハイブリッドは問わない)

アジェンダ

PWAとは
PWAはじめの一歩
比較でわかるPWAのよさ
世界のPWA成功事例
PWA一問一答

PWAとは

Progressive Web App

直訳「前進するWebアプリ」

Googleが推進する、

先進的なモバイルウェブの
UXの指針

私はPWAをこう解釈する

モバイルユーザーの
Webにおける"優れたUX"

を実現する
ベストプラクティス

優れたUX

Progressive　全ユーザーが利用可能

Responsive　各Platform・Deviceに最適化

App like　　アプリのように操作できる

Fresh　　　常に最新バージョン

Installable　ホーム画面に追加できる

re-Engageable　再訪問を促す

これらを満たせばパーフェクトなPWAアプリ！！

アジェンダ

PWAとは
PWAはじめの一歩
比較でわかるPWAのよさ
世界のPWA成功事例
PWA一問一答

PWAはじめの一歩

PWAアプリにするために

　「これだけはやらないといけない」

　「これさえできれば70%は満たせる」

その3ステップをご紹介します

※これらは全てエンジニアサイドで完結できます！

Googleが、PWAの到達度を測るチェックリストを用意しています。その数30項目。

PWAはじめの一歩

1. 常時SSL化対応

2. manifest.jsonの配置

3. Service Workerの記述

1. 常時SSL化対応

やってください＾＾

2. manifest.jsonの配置

- アイコン・名前

- 起動時のURL

　を定義するファイル

　
　ほぼコピペでOK！

{
  "name": "notate",
  "short_name": "N",
  "theme_color": "rgb(34,153,221)",
  "background_color": "rgb(34,153,221)",
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "scope": "/",
  "icons": [
    {
      "src": "/public/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/public/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/public/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/public/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/public/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/public/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/public/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/public/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

3. Service Workerの記述

まずは、

JavaScript, CSSなどの静的ファイルを
キャッシュすることからスタートでOK！

- コンテンツのキャッシュ

- Push通知

- オフライン時の挙動制御

　などをコントロールするJavaScript

これさえやれば立派なPWA !

1. 常時SSL化対応

2. manifest.jsonの配置

3. Service Workerの記述

2,3は1日かからず実装可能です。

これらを施したものが
Page Speed勉強会で有名なroさんのNotate.sh

Word Pressなら一発でPWA！

○PWA for Wordpressプラグイン

　manifest.json,

　Service Worker　を自動で生成

アイコンを準備するだけで、
オフライン操作が可能なPWAアプリになります！

(しかもキャッシュによってスピードも上がります)

アジェンダ

PWAとは
PWAはじめの一歩
比較でわかるPWAのよさ
世界のPWA成功事例
PWA一問一答

比較でわかるPWAのよさ

"モバイルアプリっぽいWebアプリ作んね？"

by Googleのエンジニア

が出発点のPWA。

モバイルアプリ, 従来のWebアプリと

どう差別化されているのか

という観点でいくつか取り上げます

モバイルアプリ vs PWA

ー	モバイルアプリ	PWA
開発工数	✖︎ 1アプリに2ソース	◎
リリースハードル	高ストア審査レビューの影響大ユーザー側で要UPD	低審査なし起動でAuto最新化
機能	◎	ブラウザに依存
速度	◎	ブラウザに依存
リーチ力	✖︎ インストールという壁	◎ 検索流入👍 体験してからインストール可能

モバイルアプリ vs PWA

○新規サービス立ち上げの容易さ

　- 少ない開発工数

　- Webのリーチ力を生かしたユーザー獲得

○ストアに依存しないリリース

　- 辛いストア審査がない

　- Apple税 Google税がない

○パフォーマンスはモバイルアプリが勝る

　モバイルアプリとPWAは競合ではなく共存

従来型Webアプリ vs PWA

ー	従来	PWA
ネットワーク	必須	必須でない低速環境でも使用可能
コンテンツまでの距離	遠ブラウザ→検索 →コンテンツ	近ホーム→コンテンツ
ロイヤリティ	低	高め

従来型Webアプリ vs PWA

○まずはPWAやってみない？

　やって悪いことはない！

　動き出せば、スピード改善やPush通知など

　次へ繋がる戦略に進みやすくなる

アジェンダ

PWAとは
PWAはじめの一歩
比較でわかるPWAのよさ
世界のPWA成功事例
PWA一問一答

世界のPWA成功事例

GoogleのPWA特集に事例がまとめられています

日経新聞もTOPにデカデカと載っています

いくつかの事例を抜粋し、

PWAにどんな効果があるのかをみてみましょう！

日経新聞

○主な施策

　- オフライン対応
　　TOP記事&閲覧した記事のキャッシュ

　- Push通知

　- サイト高速化

14s 改善
1.75 倍
2.3 倍
1.5 倍
1.4 倍
2倍

操作可能になるまでの時間
読み込み速度
オーガニック流入
コンバージョン増(会員登録)
日当りアクティブユーザー
セッション数

○結果

Twitter

○主な施策

　- Push通知

　- 通信量の改善

　- 静的ファイルキャッシュによる高速化

65% ↗︎
75% ↗︎
20% ↘︎
600KB

ページあたりのセッション数
ツイート数
直帰率
PWAアプリの容量
(Androidは23.5MB)

○結果

George

○主な施策

　- 静的ファイルキャッシュ

　- モバイルUXの改善

　- サイトスピード改善

3.8倍 ↗︎
1/2
31%↗︎
20%↗︎

28%↗︎

ローディングスピード
直帰率
コンバージョン率
1人あたりの閲覧ページ数

ホーム画面からの訪問者の滞在時間

○結果

事例から見えること

○「ホーム画面に追加できる」ことのメリット

　純粋にコンテンツとの距離が近くなる

　→訪問数が増える

　→コンバージョンが増える

○スピード改善もPWAに必須な要素

　ホーム画面から起動できても、遅いと離脱の原因

　静的ファイルキャッシュもスピード改善に大きく貢献

○インストールの壁が低い

　モバイルアプリに比べて容量が抜群に小さい

　Web訪問だけでインストールが可能

PWA一問一答

PWAとSPA何が違う？

PWA：モバイルウェブのユーザー体験の指針

　　　インストールできるWebアプリ

SPA：Webアプリ開発手法の1つ

SPA：Single Page Application

　　単一ページで動作するアプリケーション
　　ページ遷移・表示切替をJavaScriptで表現

　　　　ex) Twitter, Google Analytics

⇄MPA(Multi Page Application)

ez) 日経ビジネス, WordPress系ほとんど

https://ohoshi.com

ブラウザ

サーバーサイド

記事2
データ

記事2
ちょうだい

記事2
データ

テンプ
レート

記事

テンプ
レート

記事

↓生成

表示

MPA (Multi Page App)

サーバー

ネットワーク

初回

2回目以降

https://ohoshi.com/

ブラウザ

サーバーサイド

記事リスト
データ

記事リスト
ちょうだい

JavaScriptでHTMLを組み立てて
表示

SPA (Single Page App)

サーバー

ネットワーク

初回

2回目以降

記事リスト
データ

記事2
データ

記事2が見たいな

差分のみ更新

MPAとSPAなにが違う？

★サーバーサイドから返ってくるデータが違う

SPA

MPA

○初回のみ

　静的ファイル全て

○2回目以降

　必要なデータのみ

○常に

　静的ファイル

　遷移先のHTML

- 滑らかなUIを実現できる

- 必要なファイルは
　全てブラウザで持てる

- JavaScriptをフル活用

- 常に全力

- 遅くなりがち

開発難易度は

　SPA > MPA

MPAとSPAなにが違う？

★ページ遷移時にくるくる回るか

SPA

MPA

これからPWAをはじめる場合

★「SPAにするかどうかは重要な議論」

- SPAは、モバイルアプリのような操作感

を目的に誕生した

- キャッシュすべき静的ファイルを特定しやすい

　→高速化が容易

- PWAの成功事例の多くがSPA

PWAがどの立ち位置を担うのか

　- Web -> モバイルアプリへの橋渡し
　- Webアプリをユーザーに近づける

PWAはSEOの対策になる？

「PWA導入 = SEO改善」はNG

PWA導入の過程でUXを改善させることが

間接的にSEOに良い影響を与えると考えよう！

今後優遇される可能性も考えられる

これからのPWAは？

Chrome Platform Status

ブラウザのロードマップをチェック！

<ここ二ヶ月で実装される機能>
○ HTMLVideoElement.playsInline

　→Video再生時自動Full Screenに

○ PaymentRequest.onshippingaddresschange event

　→Web決済API利用時の配送先住所変更Option

○ Web Share API Lebel 2

　→ネイティブアプリと同様のShare UI

媒体社にPWAの話しされたら？

まずは”はじめの一歩”だけでも勧めましょう！

メディア・コンテンツ自体の価値が高まる可能性が高いので
収益向上は明るいです

(自分のブログをPWA化してTagservices経由で広告配信してます)

(いまはPage Speedのために中止してます)

※ただし、SPAになるかどうかはきちんと聞く必要あり

PWAとAMPはどう関わる？

AMP (Accelerated Mobile Pages)
　- とにかく早い
　- Googleのキャッシュサーバーから
　コンテンツを配信→ 表現・機能に制約あり

PWA
　- Webの機能を最大限に活かしたリッチな機能
　- 早くなるのは2回目の訪問以降
　 →1回めが遅いのがネック

◎初回ローディングをAMPで高速化

　　が一番スタートしやすく分かりやすい

PWAとAMPはどう関わる？

= AMP to PWA

○AMP as PWA

　AMPの仕様・制約のもとで全てのページを作る

○AMP in PWA

　AMPページは一つの部品として利用できる
　→PWAアプリにAMPページをコンテンツとして

　　埋め込める

まとめ

○PWA：モバイル向けWebアプリUXの
　　　　　ベストプラクティス

　　　　「インストールできるWebアプリ」

○これだけやれば "70%PWAは完成"

　　1. 常時SSL通信

　　2. manifest.json準備

　　3. Service Worker記述

　　(残り30%はキャッシュ・ビジネス)

○PWAはモバイル・Webアプリのよいとこどり

　かつ、互いを補完し合う存在

以上です🤗

参考リンク

○はじめてのプログレッシブウェブアプリ

　https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja

○PWAチェックリスト

　https://developers.google.com/web/progressive-web-apps/checklist

○Service Workerでキャッシュハンドリング(基礎編)

　https://www.ohoshi-tech.io/2019/05/03/service-worker-1/

○PWAの第一歩 manifest.json

　https://notate.sh/post/qzkEkPpzwKjEtLJYlD1i

○動画たち

　https://www.youtube.com/watch?v=z2JgN6Ae-Bo&list=LL5oiSdyCO_DIhWEcBsBbHJQ&index=15&t=0s

　https://www.youtube.com/watch?v=Da0EjdG5DlE&list=LL5oiSdyCO_DIhWEcBsBbHJQ&index=14&t=0s

https://www.youtube.com/watch?v=we3lLo-UFtk&list=LL5oiSdyCO_DIhWEcBsBbHJQ&index=13&t=1715s

PWA基本のき

By ohoshi

PWA基本のき

PWAを知る

ohoshi

ohoshi-tech.io

PWA きほんの"き" Thu. June 6 2019

触って理解するPWA

体系的に学ぶPWA

比較で学ぶPWA

PWAがもたらす価値

勉強会のゴール

→「PWAっすね〜＾＾」と得意げになれる

PWAを感じる

とにもかくにも

Let's Install !

Installの3ステップ(iOS)

Done !

普通のWebアプリ

と何が違うだろう？

1. Installable

ホーム画面に追加できる (インストールできる)

Webブラウザを使用せず

ホーム画面から直接起動できる

2. OffLine Mode

コンテンツに

- たどりつける

- 閲覧できる

3. モバイルアプリ同様のUI

検索バーが存在しない

スワイプバック

滑らかな操作感

PWA = Webアプリの新しい姿

○Installable

ホーム画面に追加

ホーム画面から直接起動

○Offline Mode

オフラインでも閲覧

○Like App UI

モバイルアプリのような操作感

PWAって一言で？と聞かれたら

インストールできる

Webアプリ

ここにもPWA !

- Twitter - Instagram - Piterest - ほしえん

自己紹介

アジェンダ

PWAとは

PWAはじめの一歩

比較でわかるPWAのよさ

世界のPWA成功事例

PWA一問一答

基礎用語

○キャッシュ

- 一時的にデータを保存し、それ以降に 使用するときすぐに取り出せるようにする領域

→2回目以降の訪問は確実に早くなる

○UX (User eXperience)

- ユーザーが製品やサービスを通じて得る体験

○モバイルアプリ

- ストアからインストールして使うアプリ

アジェンダ

PWAとは

PWAはじめの一歩

比較でわかるPWAのよさ

世界のPWA成功事例

PWA一問一答

PWAとは

Progressive Web App

直訳「前進するWebアプリ」

Googleが推進する、

先進的なモバイルウェブの UXの指針

私はPWAをこう解釈する

モバイルユーザーの Webにおける"優れたUX"

を実現する ベストプラクティス

優れたUX

Progressive 全ユーザーが利用可能

Responsive 各Platform・Deviceに最適化

App like アプリのように操作できる

Fresh 常に最新バージョン

Installable ホーム画面に追加できる

re-Engageable 再訪問を促す

アジェンダ

PWAとは

PWAはじめの一歩

比較でわかるPWAのよさ

世界のPWA成功事例

PWA きほんの"き"
Thu. June 6 2019

ホーム画面に追加できる
(インストールできる)

　- たどりつける

　- 閲覧できる

　ホーム画面に追加

　ホーム画面から直接起動

　オフラインでも閲覧

　モバイルアプリのような操作感

　- Twitter
　- Instagram
　- Piterest
　- ほしえん

　- 一時的にデータを保存し、それ以降に
　使用するときすぐに取り出せるようにする領域

　→2回目以降の訪問は確実に早くなる

　- ユーザーが製品やサービスを通じて得る体験

　- ストアからインストールして使うアプリ

先進的なモバイルウェブの
UXの指針

モバイルユーザーの
Webにおける"優れたUX"

を実現する
ベストプラクティス

Progressive　全ユーザーが利用可能

Responsive　各Platform・Deviceに最適化

App like　　アプリのように操作できる

Fresh　　　常に最新バージョン

Installable　ホーム画面に追加できる

re-Engageable　再訪問を促す

　「これだけはやらないといけない」

　「これさえできれば70%は満たせる」

　を定義するファイル

　
　ほぼコピペでOK！

JavaScript, CSSなどの静的ファイルを
キャッシュすることからスタートでOK！

　などをコントロールするJavaScript

これらを施したものが
Page Speed勉強会で有名なroさんのNotate.sh

　manifest.json,

　Service Worker　を自動で生成

アイコンを準備するだけで、
オフライン操作が可能なPWAアプリになります！

　- 少ない開発工数

　- Webのリーチ力を生かしたユーザー獲得

　- 辛いストア審査がない

　- Apple税 Google税がない

　モバイルアプリとPWAは競合ではなく共存

　やって悪いことはない！

　動き出せば、スピード改善やPush通知など

　次へ繋がる戦略に進みやすくなる