完全負け組なモバイルwebが、これから復活する(多分)
TRANSCRIPT
完全負け組なモバイルWebが • • • • •
これから復活する(多分)「The Next Generation Mobile Web(Google I/O 2015)」レポート
第58回HTML5とか勉強会 2015.6.13
Performance on RAIL
Service Workers
Push & Notification
ふろしきモバイルWebばっかりエンジニア ・html5jパフォーマンス部 ・日本Cordovaユーザー会
- 自己紹介 -
モバイルWeb
ダメダメ過ぎて 生きるのが辛い…
Java Swift HTML5
なぜ、ダメダメ？
ダメダメな理由 - その1
ブックマークが役に立たない
デスクトップPC ノートPC
個々のアプリの機能は大きく 一つで多くのユースケースのカバー
アプリ
ユース ケース
ユース ケース
ユース ケース
デスクトップPC ノートPC
ブラウザのブックマーク機能は PC上のアプリの扱われ方と相性が良かった
ブラウザ
Web サイト
Web サイト
Web サイト
モバイル
しかし、モバイルは 一つアプリ≒一つのユースケース
アプリ
アプリ
アプリ
ユース ケース
ユース ケース
ユース ケース
≒
≒
≒
モバイル
ブラウザのブックマーク機能は モバイルのアプリの使われ方と合わない
アプリ
ブラウザ
アプリ
Web サイト
Web サイト
Web サイト
遠い…
遠い…
遠い…
ダメダメな理由 - その2
閉じられたら何もできない
PCは使う時だけ起動されていた ブラウザも同じタイミングで起動された
デスクトップPC ノートPC
作業中 作業無し
アプリ停止アプリ起動
PC停止PC起動
PCとその上のアプリは ライフタイムが殆ど変わらなかった
デスクトップPC ノートPC
作業中 作業無し
ブラウザ閉じるブラウザ開く
PC停止PC起動
モバイルは常に起動されユーザに寄り添い アプリもまた、常時ユーザと寄り添う
モバイル
作業中 作業無し
アプリ起動
モバイル起動
作業復活
通知!
しかし、Webは閉じられたら何もできない モバイルの使われ方とは合わない
作業中 作業無し
ブラウザ開く
モバイル起動
作業復活ならず!!
ブラウザ閉じる
モバイル
ダメダメな理由 - その3
パフォーマンスが悪い
デスクトップPC ノートPC
PCはハードウェアも通信リソースも潤沢 Webのオーバヘッドも吸収できる
モバイル
モバイルは省エネが求められ制限が多い Webのオーバヘッドは時に邪魔になる
Webはモバイルに 向いていないというのか…
けど、けど我々はッ
Webという自由な世界で 人々にサービスを 提供し続けたい!!
Googleはその答えを探っているようです
The Next Generation Mobile Web Google I/O 2015
モバイルに適したWebを作るために 開発者が行うべき3つのこと
Mobile UIモバイルに適したUISTEP.1
Mobile Lifetimeモバイルに適したライフタイム
STEP.2
Mobile Performanceモバイルに適したパフォーマンス
STEP.3
User
Contents
STEP.1
Mobile UIモバイルに適したUIでWebを扱おう!!
ホームスクリーンへ ランチャーアイコンを配置し
Web
Web
アプリ
アプリ
ほげほげ ふがふが ぴよぴよ ふーばー
アイコンをタップ時には モバイル専用のUIで起動させよう!!
ほげほげ ふがふが ぴよぴよ ふーばー
ぴよぴよ
どうやって!?
Web Application Manifest
・WebアプリでモバイルUIを 扱うためのWeb標準。
・Apache Cordovaで慣らされ ManifoldJSでも使われる。
・Chrome M39(2014.10)からは、 ホームスクリーン起動時にも利用可に!!
http://www.w3.org/TR/appmanifest/
Add to Home Screen
manifest.json
ほげほげ ふがふが ぴよぴよ ふーばー
index.html
・タイトル ・リンク先URL ・IconファイルURL ・UI制限
参照
index.html
<!DOCTYPE html> <html lang="ja"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="manifest" href="manifest.json"> <title>ぴよぴよ</title>
・・・
Chrome M39+
manifest.json
Chrome M39+
{ "name": "Manifest Sample", "icons": [ { "src": "launcher-icon-0-75x.png", "sizes": "36x36", "type": "image/png", "density": "0.75" },
], "start_url": "index.html", "display": "standalone", "orientation": "landscape" }
…
← iconファイルURL
← 開始URL← ブラウザUIの有無← 縦/横の制限
index.html
<!DOCTYPE html> <html lang="ja"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="/icon.png"> <title>ぴよぴよ</title>
・・・
Chrome M31～M38 (一昔前のやり方)
https://developer.chrome.com/multidevice/android/installtohomescreen
STEP.2
Mobile LifetimeWebをモバイルに適したライフタイムで動かそう!!
Notification Are The Next Platform. — Anish Acharya, TechCrunch
これからのプラットフォームは 通知機能だ!!
ブラウザが閉じられても バックグラウンドで待機させて
ぴよぴよほげほげ ふがふが ぴよぴよ ふーばー
何か起きた時に ユーザへそれを通知しよう!!
ぴよぴよ 5分前
【悲報】あなたがいつになってもAPI 22を使ってくれないから、ドロイド君がグレてしまったようです。
どうやって!?
Service Workers
Service Workers
バックグラウンドでイベントを受付けて 何かしらの処理を実行できるWeb標準。
http://www.w3.org/TR/service-workers/
Push APIhttp://www.w3.org/TR/push-api/
プッシュサービスからのプッシュイベントを 受付けて、メッセージを読み込めるWeb標準。
Notifications APIhttps://notifications.spec.whatwg.org/
モバイルの通知を実現するLiving Standard。 Permission APIの仕様が固まるとWeb標準になる?
プッシュ サービス
ネットワーク
push events
①
clear push subscription
③
ぴよぴよ 5分前
【悲報】あなたがいつになってもAPI 22を使ってくれないから、ドロイド君がグレてしまったようです。
通知画面
Service Workers
ブラウザが閉じていても 裏で動いている
show notification
②
https://developers.google.com/web/updates/2015/03/push-notificatons-on-the-open-web
https://developers.google.com/web/updates/2015/03/push-notificatons-on-the-open-web
時代はBackground Syncですね ごめんなさい。
STEP.3
Mobile Performanceモバイルに適したパフォーマンスにチューンしよう!!
When is performance ‘good enough’? When the user can’t perceive it. — Don Draper
十分なパフォーマンスとは ユーザがそれを意識しないことである
どうやって!?
ブラウザの中の人は モバイルWebを速くしようと戦っている!!
Oil-pan
Discardable memory
TurboFan
CSS Writer rewrite
Slimming Paint
Intelligent session restore
DOM serialization
Scheduler
SaneScript
SoundScript
Fast line layout
Ganesh
Code caching
Script Streaming
Service Worker
IndexedDB Optimization
image-rendering:pixelated
Media power reduction
Animated GIF optimization
Memory Coordinator
Remove Animated GIF paint storm
Unified BeginFrame Scheduling
Threaded GPU Rasterization
Partial Swap
RAIL
開発者が実践すべきことは Webのパフォーマンスモデル
RAIL
R : Reaction, Response
A : Animation
I : Idle
L : Load
これでユーザは、ストレスフリーになれる!!
R : Reactionは100ms未満で!
A : Animationは16.67ms未満で!
I : Idleは50ms未満で!
L : Loadは1,000ms未満で!
もっと詳しく!?
最後に
モバイルWebの未来はダメダメじゃない 希望を持って生きようじゃないか!!
1. モバイルに適したUIを! Web Application Manifest/Add to Homescreen
2. モバイルに適したライフタイムを!ServiceWorkers/Notification/Push
3. モバイルに適したパフォーマンスを!Performance on RAIL
ほげほげ ふがふが ぴよぴよ ふーばー
入り口は ホームスクリーンから
Service Workers
Web サーバー
Push サービス
アセット (キャッシュ)
①
メッセージ ②③
④
通知
HTMLアプリを 送っておく
Push
パフォーマンスはRAILで!!
モバイルWebの未来はダメダメじゃない 希望を持って生きようじゃないか!!
フラグメントの問題が 解決されたらね…
Googleさん 期待しています!!
Thank You!
ふろしき @_furoshiki