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一問一答

PWASPA何が違う?

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)

DB

サーバー

ネットワーク

初回

2回目以降

https://ohoshi.com/

ブラウザ

サーバーサイド

記事リスト
データ

記事リスト
ちょうだい

 JavaScriptでHTMLを組み立てて
表示

SPA (Single Page App)

DB

サーバー

ネットワーク

初回

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アプリのよいとこどり

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

以上です🤗

参考リンク

PWA基本のき

By ohoshi

PWA基本のき

PWAを知る

  • 13
Loading comments...

More from ohoshi