11. Google Confidential and Proprietary
Questions ?
Ok, now go build something awesome!
https://plus.google.com/u/0/+AkihitoFujii/posts/Lyu5wRYHd9d?pid=6029333485917463794&oid=104976800917577721821
16. Google Confidential and Proprietary
Chrome/HTML5関連の話
● Perf Culture
● Polymer and the Web Components revolution
● Polymer and Web Components change everything you know about
Web development
● Bridging the gap between the web and apps
● How we built Chrome Dev Editor with the Chrome platform
● Making the mobile web fast, feature-rich, and beautiful
● Mobile Web performance auditing
● Making music mobile with the Web
● Developing across Devices - Chrome DevTools in 2014
17. Google Confidential and Proprietary
Chrome/HTML5関連の話
● Perf Culture
● Polymer and the Web Components revolution
● Polymer and Web Components change everything you know about
Web development
● Bridging the gap between the web and apps
● How we built Chrome Dev Editor with the Chrome platform
● Making the mobile web fast, feature-rich, and beautiful
● Mobile Web performance auditing
● Making music mobile with the Web
● Developing across Devices - Chrome DevTools in 2014
次の2つのセッションをお聴き
ください。
Polymer
Web Components
18. Google Confidential and Proprietary
Chrome/HTML5関連の話
● Perf Culture
● Polymer and the Web Components revolution
● Polymer and Web Components change everything you know about
Web development
● Bridging the gap between the web and apps
● How we built Chrome Dev Editor with the Chrome platform
● Making the mobile web fast, feature-rich, and beautiful
● Mobile Web performance auditing
● Making music mobile with the Web
● Developing across Devices - Chrome DevTools in 2014
ServiceWorker
19. Google Confidential and Proprietary
Chrome/HTML5関連の話
● Perf Culture
● Polymer and the Web Components revolution
● Polymer and Web Components change everything you know about
Web development
● Bridging the gap between the web and apps
● How we built Chrome Dev Editor with the Chrome platform
● Making the mobile web fast, feature-rich, and beautiful
● Mobile Web performance auditing
● Making music mobile with the Web
● Developing across Devices - Chrome DevTools in 2014
Chrome Dev Editor
20. Google Confidential and Proprietary
Chrome/HTML5関連の話
● Perf Culture
● Polymer and the Web Components revolution
● Polymer and Web Components change everything you know about
Web development
● Bridging the gap between the web and apps
● How we built Chrome Dev Editor with the Chrome platform
● Making the mobile web fast, feature-rich, and beautiful
● Mobile Web performance auditing
● Making music mobile with the Web
● Developing across Devices - Chrome DevTools in 2014
DevTools
21. Bridging the gap between
the web and apps
オフラインファースト ServiceWorker
39. Google Confidential and Proprietary
ServiceWorker
● 高度なオフライン機能
● WebサイトからインストールされたJavaScriptが独立したWorkerスレッ
ドとして動作し、Webサイトからのイベントハンドリングを実現
○ Webページを閉じてもバックグラウンドで動作
○ ただし、HTTPSが必須
● 頭の良い(+JSから制御可能な)“In-browser HTTP proxy”
40. Google Confidential and Proprietary
ServiceWorker
Browser
ServiceWorker Caches
Page PagePage
Internet
41. Google Confidential and Proprietary
インストール(アプリ側 / app.js)
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(
‘/trained-to-thrill/static/js/sw.js’,
{scope: ‘/trained-to-thrill/*’}
).then(success, failure);
}
42. Google Confidential and Proprietary
sw.jsの役割
Browser
ServiceWorker Caches
Page PagePage
Internet
● 別スレッドで動作
● DOMアクセスは無し
● ページとは独立した処理を
行う
● ローディングの制御
● 1つのServiceWorkderで複
数のページの制御が可能
● キャッシュの制御
頭の良い(+JSから制御可能な)“In-browser HTTP proxy”
43. Google Confidential and Proprietary
インストール(ServiceWorker側 / sw.js)
this.addEventListener('install', function
(event) {
event.waitUntil(somePromise);
});
68. Google Confidential and Proprietary
•Plug & Play
•Same powerful features
•Screencast your device
•Port forwarding
· for local development
•Device Presets for most
popular devices
•Rich viewport emulation
•Sensor emulation
· Touch, Geolocation,
Accelerometer
•Network throttling and
offline
•Rich representation of
media queries
•Style filtering
•Media query editing
•Plays well with inline
emulation
Responsive layouts Rich Emulation Remote debugging