Downloaded 28 times
![WebApp Manifest
{
"name": "Kinlan's Amazing Application ++",
"short_name": "Kinlan's Amaze App",
"icons": [
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "standalone"
}
<link rel="manifest" href="/manifest.json">
index.html
manifest.json](https://image.slidesharecdn.com/web-151009015636-lva1-app6892/75/Web-30-2048.jpg)
![Service Worker
if (navigator.serviceWorker) {
navigator.serviceWorker.register(
'./sw.js',
{scope: '.'}
).then(function() {
return cache.addAll(['index.html', ...]);
}, ...
}
・サイトのJavaScript
Service Workerとしてsw.jsを登録し、cache.addAllで最初の
キャッシュを保存する](https://image.slidesharecdn.com/web-151009015636-lva1-app6892/75/Web-37-2048.jpg)
More Related Content
これからのモバイルWebと最新動向
- 1. これからのモバイルWebと最新動向 2015/10/9 CEATEC Toru Yoshikawa (@yoshikawa_̲t)
- 2. Who? html5j 代表 Google Developer Experts (Chrome) HTML5 Experts.jp 副編集⻑⾧長兼エキスパー ト html5j ビギナー部（副部⻑⾧長）／Web先端 技術味⾒見見部 (顧問)／⽇日本jQuery Mobile ユーザー会 (管理理⼈人)／Sublime Text 2 Japan Users Group (管理理⼈人)などなど Blog: http://d.hatena.ne.jp/pikotea/ 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. もっとも有名なニュース Facebook「HTML5に賭けたのは失敗」 TechCrunch Disrupt 2012, SF マーク・ザッカーバーグ⽒氏が「HTML5に賭けたのは失敗」と発⾔言し、同社 のアプリをネイティブに書き直した
- 10.
- 11. ランキング上位に⼊入らなければ儲からない インストールしているアプリの平均 36 過去30⽇日に使⽤用したアプリの数 8 80% のアプリが3⽇日で使われなくなる @andrewchen (http://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is- normal-and-that-the-best-apps-do-much-better/) Our Mobile Planet (https://think.withgoogle.com/mobileplanet/) ネイティブアプリは ゼロサムゲーム
- 12. ネイティブアプリの問題 ランキング外ではそもそも⽬目に触れる機会がない 宣伝・広告費の増⼤大 ブースト広告などに挙げられるランキング操作など プラットフォームに依存するリスク 審査などによるリジェクト リリースに時間が掛かる ⼿手数料料 利利⽤用率率率、離離脱率率率の問題
- 13.
- 14. 3つの⼿手法 Deeplink/Universal Links App Indexing App Links
- 15. Deeplink/Universal Links 本来は、Webページのトップではなく、下層の他のページへのリンクのことを指す⾔言葉葉 アプリの⽂文脈では、アプリの中の個別のページへ直接遷移することを指す 例例えば、商品の広告があり、リンクをクリックするとアプリのトップではなく、直接ア プリの中の商品ページへ遷移するような動き アプリ TOP アプリ 商品検索索 アプリ 商品詳細・ 購⼊入
- 16. Deeplink/Universal Links <activity android:name="com.example.android.GizmosActivity" android:label="@string/title_gizmos"> <intent-filter android:label="@string/filter_title_viewgizmos"> <action android:name="android.intent.action.VIEW" /> <!-- Accepts URIs that begin with "http://example.com/gizmos” --> <data android:scheme="http" android:host="example.com" android:pathPrefix="/gizmos" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> </intent-filter> </activity> https://developers.google.com/app-‐‑‒indexing/webmasters/app?hl=ja Android マニフェスト ファイル
- 17. App Indexing アプリのコンテンツを検索索結果に表⽰示できる 検索索結果から直接アプリを起動できる 現在は同コンテンツのウェブサイトが必要
- 18.
- 19. Webの良良い点を 取り込もうとする流流れ Webは、URIによってすべてのWebページが⼀一意 のアドレスを持ち、⾃自由に移動できる 同じように、アプリでもこれまでの閉じた箱庭の 中だけではなく、⾃自由に往来し連携できる世界に （In-‐‑‒App Browserのように逆に囲い込もうとす る流流れもあります）
- 20.
- 21. Web VS ネイティブ 従来からWebが劣劣っていると⾔言われてい た3つのポイント UX（主にスピード／パフォーマンス） オフライン リエンゲージメント
- 22.
- 23. Web VS ネイティブ 実際に⽐比べてみてください ネイティブ（左）、Web（右） ※いずれもホーム画⾯面にアイコンを追加
- 24. Webとネイティブの差は かなり縮まっている OS／ブラウザの最適化やハードウェアの進化に よって最新のデバイスであれば、既にネイティブ と⽐比べても遜⾊色がない 単純な表⽰示やスクロールなどはかなりスムーズ （細かいアクションや多くのアニメーションなど はもちろんネイティブ有利利）
- 25. ネイティブの良良い点を 取り込もうとする流流れ UX オフライン リエンゲージメント
- 26. UX ホーム画⾯面への追加 インストールバナーの表⽰示 フルスクリーン表⽰示（URLバーの⾮非表⽰示） その他テーマの適⽤用 http://googledevjp.blogspot.jp/2015/04/service-‐‑‒worker-‐‑‒google-‐‑‒developers-‐‑‒ summit.html http://www.w3.org/TR/appmanifest/ WebApp Manifest
- 27.
- 28.
- 29.
- 30. WebApp Manifest { "name": "Kinlan'sAmazing Application ++", "short_name": "Kinlan's Amaze App", "icons": [ { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "index.html", "display": "standalone" } <link rel="manifest" href="/manifest.json"> index.html manifest.json
- 31.
- 32. Service Worker オフラインWebアプリケーションのためのAppCache に代わる仕様 Webアプリのローカルプロキシとして、バックグラウ ンドプロセスで動作する 個別ファイルごとにキャッシュするかどうかを JavaScriptから制御できる パワフルなAPIであるため、今のところhttps上でのみ 動作する
- 33. Service Workerの3つの機能 Offline Fetch APIとCache APIを持ち、HTTPリクエストをフッ クして任意のJavaScriptを実⾏行行できる Push Notification Push APIでサーバー側からのPush通信を受けとって通知 することができる Background Sync ネットワークに接続した際に動作してデータの同期を⾏行行う
- 34.
- 35.
- 36.
- 37. Service Worker if (navigator.serviceWorker){ navigator.serviceWorker.register( './sw.js', {scope: '.'} ).then(function() { return cache.addAll(['index.html', ...]); }, ... } ・サイトのJavaScript Service Workerとしてsw.jsを登録し、cache.addAllで最初の キャッシュを保存する
- 38. Service Worker self.onfetch =function(e) { e.respondWidth( caches.match(e.request).then( function(response){ return response || fetch(e.request); })); }; ・sw.js HTTPリクエストをフックして、キャッシュにマッチする場合は キャッシュを返し、そうでない場合は通常通りリクエストする
- 39. Demo Google I/O 2015 https://events.google.com/io2015/ Push Demo https://simple-‐‑‒push-‐‑‒demo.appspot.com/
- 40. Service Workerの事例例 Google I/O 2015 Facebook Pinterest Medium
- 41. Service Workerの今後 Stream APIの追加 Service Workerの相互連携などについて議論論 etc…
- 42. Show more… 「Service Worker で作る 最新モバイル ウェブ エクスペリエ ンス -‐‑‒ Google Developers Summit まとめ」 http://googledevjp.blogspot.jp/2015/04/service-‐‑‒worker-‐‑‒ google-‐‑‒developers-‐‑‒summit.html 「Service Workerとその周辺API 駆け⾜足紹介」 http://www.slideshare.net/kinukox/service-‐‑‒workerapi 「【Service Worker最前線】仕様策定の現場で何が議論論されて いるのか？」 https://html5experts.jp/kinuko/16537/
- 43.
- 44. ハイブリッドアプリ AndroidのWebViewのレンダリングエンジンがChromium(Blink)化されて OS⾮非依存に Crosswalk CordovaにChromium(Blink/V8）を内蔵して、古いOSでも同じ挙動、最新 の機能を利利⽤用できるようになる React Native React.jsの⽂文法・構⽂文でネイティブアプリを作成できる Electron HTML/CSS/JavaScriptでデスクトップアプリが書ける
- 45. JavaScriptを⾼高速に動作さ せるための取り組み WebAssembly / asm.js どのWebブラウザでも実⾏行行可能なバイナリフォーマッ ト（他⾔言語をコンパイルして実⾏行行できるようにする） SIMD.js JS上でベクトル演算を⾏行行うための仕様 http://inside.pixiv.net/entry/2015/07/28/230317 http://www.publickey1.jp/blog/15/webassembly.html
- 46.
- 47.
- 48.
- 49.
- 50.