Downloaded 89 times
![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の有無
← 縦/横の制限](https://image.slidesharecdn.com/html558-150615090256-lva1-app6892/85/Web-30-320.jpg)
完全負け組なモバイルWebが、これから復活する(多分)
- 1. 完全負け組なモバイルWebが • • •• • これから復活する(多分) 「The Next Generation Mobile Web(Google I/O 2015)」レポート 第58回HTML5とか勉強会 2015.6.13 Performance on RAIL Service Workers Push & Notification
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. Googleはその答えを探っているようです The Next GenerationMobile Web Google I/O 2015
- 22. モバイルに適したWebを作るために 開発者が行うべき3つのこと Mobile UI モバイルに適したUISTEP.1 Mobile Lifetime モバイルに適したライフタイム STEP.2 MobilePerformance モバイルに適したパフォーマンス STEP.3 User Contents
- 23.
- 24.
- 25.
- 26.
- 27. Web Application Manifest ・WebアプリでモバイルUIを 扱うためのWeb標準。 ・ApacheCordovaで慣らされ ManifoldJSでも使われる。 ・Chrome M39(2014.10)からは、 ホームスクリーン起動時にも利用可に!! http://www.w3.org/TR/appmanifest/
- 28. Add to HomeScreen manifest.json ほげほげ ふがふが ぴよぴよ ふーばー index.html ・タイトル ・リンク先URL ・IconファイルURL ・UI制限 参照
- 29. index.html <!DOCTYPE html> <html lang="ja"> <head> <metacharset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="manifest" href="manifest.json"> <title>ぴよぴよ</title> ・・・ Chrome M39+
- 30. manifest.json Chrome M39+ { "name": "ManifestSample", "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の有無 ← 縦/横の制限
- 31. index.html <!DOCTYPE html> <html lang="ja"> <head> <metacharset="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 (一昔前のやり方)
- 32.
- 33.
- 34. Notification Are The NextPlatform. — Anish Acharya, TechCrunch これからのプラットフォームは 通知機能だ!!
- 35.
- 36.
- 37.
- 38.
- 39. Service Workers バックグラウンドでイベントを受付けて 何かしらの処理を実行できるWeb標準。 http://www.w3.org/TR/service-workers/ Push API http://www.w3.org/TR/push-api/ プッシュサービスからのプッシュイベントを 受付けて、メッセージを読み込めるWeb標準。 NotificationsAPI https://notifications.spec.whatwg.org/ モバイルの通知を実現するLiving Standard。 Permission APIの仕様が固まるとWeb標準になる?
- 40. プッシュ サービス ネットワーク push events ① clear push subscription ③ ぴよぴよ 5分前 【悲報】あなたがいつになってもAPI22 を使ってくれないから、ドロイド君が グレてしまったようです。 通知画面 Service Workers ブラウザが閉じていても 裏で動いている show notification ②
- 41.
- 42.
- 43.
- 44. When is performance ‘goodenough’? When the user can’t perceive it. — Don Draper 十分なパフォーマンスとは ユーザがそれを意識しないことである
- 45.
- 46. ブラウザの中の人は モバイルWebを速くしようと戦っている!! Oil-pan Discardable memory TurboFan CSS Writerrewrite 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
- 47.
- 48. RAIL R : Reaction,Response A : Animation I : Idle L : Load これでユーザは、ストレスフリーになれる!!
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56. モバイルWebの未来はダメダメじゃない 希望を持って生きようじゃないか!! 1. モバイルに適したUIを! Web ApplicationManifest/Add to Homescreen 2. モバイルに適したライフタイムを! ServiceWorkers/Notification/Push 3. モバイルに適したパフォーマンスを! Performance on RAIL
- 57. ほげほげ ふがふが ぴよぴよふーばー 入り口は ホームスクリーンから Service Workers Web サーバー Push サービス アセット (キャッシュ) ① メッセージ ②③ ④ 通知 HTMLアプリを 送っておく Push パフォーマンスはRAILで!! モバイルWebの未来はダメダメじゃない 希望を持って生きようじゃないか!!
- 58.
- 59.
- 60.