Downloaded 89 times
![manifest.jsonChrome 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の有無← 縦/横の制限](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtml558-150615090256-lva1-app6892%2f75%2fWeb-30-2048.jpg&f=jpg&w=240)
Recommended
More Related Content
What's hot
完全負け組なモバイルWebが、これから復活する(多分)
- 1.完全負け組なモバイルWebが• • •• •これから復活する(多分)「The Next Generation Mobile Web(Google I/O 2015)」レポート第58回HTML5とか勉強会2015.6.13Performanceon RAILServiceWorkersPush &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 WebGoogle I/O 2015
- 22.モバイルに適したWebを作るために開発者が行うべき3つのことMobile UIモバイルに適したUISTEP.1Mobile Lifetimeモバイルに適したライフタイムSTEP.2MobilePerformanceモバイルに適したパフォーマンスSTEP.3UserContents
- 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 HomeScreenmanifest.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.jsonChrome 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 AreThe NextPlatform.— Anish Acharya, TechCrunchこれからのプラットフォームは通知機能だ!!
- 35.
- 36.
- 37.
- 38.
- 39.Service Workersバックグラウンドでイベントを受付けて何かしらの処理を実行できるWeb標準。http://www.w3.org/TR/service-workers/Push APIhttp://www.w3.org/TR/push-api/プッシュサービスからのプッシュイベントを受付けて、メッセージを読み込めるWeb標準。NotificationsAPIhttps://notifications.spec.whatwg.org/モバイルの通知を実現するLiving Standard。Permission APIの仕様が固まるとWeb標準になる?
- 40.プッシュサービスネットワークpushevents①clear pushsubscription③ぴよぴよ 5分前【悲報】あなたがいつになってもAPI22を使ってくれないから、ドロイド君がグレてしまったようです。通知画面ServiceWorkersブラウザが閉じていても裏で動いているshownotification②
- 41.
- 42.
- 43.
- 44.When is performance‘goodenough’?When the usercan’t perceive it.— Don Draper十分なパフォーマンスとはユーザがそれを意識しないことである
- 45.
- 46.ブラウザの中の人はモバイルWebを速くしようと戦っている!!Oil-panDiscardable memoryTurboFanCSS WriterrewriteSlimming PaintIntelligent session restoreDOM serializationSchedulerSaneScriptSoundScriptFast line layoutGaneshCode cachingScript StreamingService WorkerIndexedDB Optimizationimage-rendering:pixelatedMedia power reductionAnimated GIF optimizationMemory CoordinatorRemove Animated GIF paint stormUnified BeginFrame SchedulingThreaded GPU RasterizationPartial Swap
- 47.
- 48.RAILR : Reaction,ResponseA : AnimationI : IdleL : Loadこれでユーザは、ストレスフリーになれる!!
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.モバイルWebの未来はダメダメじゃない希望を持って生きようじゃないか!!1. モバイルに適したUIを! Web ApplicationManifest/Add to Homescreen2. モバイルに適したライフタイムを! ServiceWorkers/Notification/Push3. モバイルに適したパフォーマンスを! Performance on RAIL
- 57.ほげほげ ふがふが ぴよぴよふーばー入り口はホームスクリーンからServiceWorkersWebサーバーPushサービスアセット(キャッシュ)①メッセージ ②③④通知HTMLアプリを送っておくPushパフォーマンスはRAILで!!モバイルWebの未来はダメダメじゃない希望を持って生きようじゃないか!!
- 58.
- 59.
- 60.