Más contenido relacionado
La actualidad más candente (20)
Similar a これからのモバイルWebと最新動向 (20)
これからのモバイルWebと最新動向
- 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
- 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/)
ネイティブアプリは
ゼロサムゲーム
- 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 マニフェスト ファイル
- 30. 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
- 33. Service Workerの3つの機能
Offline
Fetch APIとCache APIを持ち、HTTPリクエストをフッ
クして任意のJavaScriptを実⾏行行できる
Push Notification
Push APIでサーバー側からのPush通信を受けとって通知
することができる
Background Sync
ネットワークに接続した際に動作してデータの同期を⾏行行う
- 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リクエストをフックして、キャッシュにマッチする場合は
キャッシュを返し、そうでない場合は通常通りリクエストする
- 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/