Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webは今まさに面白い(オフライン編)
Search
Yohei Munesada
November 27, 2014
Technology
0
1k
Webは今まさに面白い(オフライン編)
自分がWebについてワクワクしていることを共有したく話したLT資料です。第5回 HTML5 minutes!
https://atnd.org/events/59057
Yohei Munesada
November 27, 2014
Tweet
Share
More Decks by Yohei Munesada
See All by Yohei Munesada
G'sデータベース設計の講義
yoheimune
4
5k
How to create a service, How to google !
yoheimune
0
270
Machine Learning Basic and Python
yoheimune
1
440
Python Scraping and Web Apps for G's ACADEMY TOKYO
yoheimune
0
210
DevelopWorkflow and Solving Problems
yoheimune
0
400
Git and Github for Beginners
yoheimune
1
250
Data Science BOOTCAMP Practices - Recommendation
yoheimune
0
170
Data Science BOOTCAMP Practices
yoheimune
0
340
Machine Learning with Python
yoheimune
0
300
Other Decks in Technology
See All in Technology
私のRSpecの書き方 / How I write RSpec
tmtms
4
840
どう買う?Azure
kuniteru
1
190
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
260
SREsのためのSRE定着ガイド
netmarkjp
10
1.7k
Building a RAG app to chat with your data (on Azure)
pamelafox
0
130
こんなに簡単!AWSマルチアカウント
takuya_terada
0
120
Introducing Pkl
enomotok
0
240
バッチ処理のSLOをどう設計するか
rynsuke
7
590
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
210
業務で使えるかもしれない…!?GitHub Actions の Tips 集 / CI/CD Test Night #7
ponkio_o
PRO
24
7.2k
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
17
3.2k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
Web development in the modern age
philhawksworth
201
10k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
What's new in Ruby 2.0
geeforr
335
31k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
In The Pink: A Labor of Love
frogandcode
137
21k
Facilitating Awesome Meetings
lara
39
5.5k
A designer walks into a library…
pauljervisheath
199
23k
Gamification - CAS2011
davidbonilla
76
4.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Transcript
8FCࠓ·͞ʹ໘ന͍ ΦϑϥΠϯฤ फఆ༸ฏ @yoheiMune ג αΠόʔΤʔδΣϯτ
What is the weakness of the Web?
Weakness of the Web ✓ Slow Speed දࣔը໘ͷସɺϓϩάϥϜͷ࣮ߦͳͲ ✓ JavaScript
Poor Functions MapSetͱ͍ͬͨجຊతͳίϨΫγϣϯαϙʔτ͍ͯ͠ͳ͍ ✓ Restricted functionality ిΧϝϥϚΠΫͳͲ͑ͳ͍ػೳ͕·ͩ·ͩଟ͍ ✓ etc
Weakness of the Web ✓ Slow Speed දࣔը໘ͷସɺϓϩάϥϜͷ࣮ߦͳͲ ✓ JavaScript
Poor Functions MapSetͱ͍ͬͨجຊతͳίϨΫγϣϯαϙʔτ͍ͯ͠ͳ͍ ✓ Restricted functionality ిΧϝϥϚΠΫͳͲ͑ͳ͍ػೳ͕·ͩ·ͩଟ͍ ✓ etc
Web Apps are Slow
Web Apps are Slower
Web Apps are Slower than Native Apps
Why is the web slow?
Why is the web slow? Let’s focus on networking
Reason of slow web http://yoheim.net/index.html ͔ΒσʔλΛऔಘ͢Δ߹Λߟ͑Δ
Step1: DNS Lookup DNS Server What is “yoheim.net” ? 182.48.49.53
Progress
Step2: 3-way Handshake 182.48.49.53 (yoheim.net) ଓ͍͍ͯ͠ʁ OK ͡Ό͋ΑΖ͘͠! Progress
Step3: Content Download yoheim.net GET /index.html Download Progress
Step4: Code Execution yoheim.net Progress )5.-ͷղੳͱ࣮ߦ
Reason of slow web DNS Lookup 3-way handshake Content Download
Execution ϑΝΠϧ࣮ߦ͢Δʹͳ͔ͳ͔େมʂʂ
Reason of slow web html css javascript image 4MPX
͠ΦϑϥΠϯػೳΛ͑
Online vs Offline Online Offline ͱͬͯ͘ͳΔͧʂ
Available Offline Functionality ✓ HTML5 App Cacheʢ2008ʙʣ ✓ LocalStorage /
SessionStorageʢ2009ʙʣ ✓ Navigator.onLine ✓ etc
HTML5 App Cache ✓ ϚχϑΣετϑΝΠϧΛॻ͚͑ͯ؆୯ CACHE MANIFEST # Time: Thu
Oct 02 2014 20:10:16 GMT+0900 (JST) CACHE: js/all.js css/all.css NETWORK: * manifest.appcache
HTML5 App Cache But…
Problems of HTML5 App Cache ✓ Ωϟογϡཧ͕ϒϥβͤ ✓ ్தͰΤϥʔ͕ى͖ͨ࣌ʹͲ͏͢Ε͍͍ͷ͔… ✓
indexϑΝΠϧ͕ඞͣΩϟογϡ͞ΕΔ
Service Worker is coming!
About Service Worker ✓ JavaScriptΛ༻͍ͨΩϟογϡίϯτϩʔϧ ✓ ։ൃऀ͕͖Ίࡉ͔ͳΩϟογϡཧ͕Ͱ͖Δ ✓ ϝΠϯεϨουҎ֎Ͱಈ࡞͢Δ
Register - Service Worker navigator .serviceWorker.register('/sw.js', { scope: '/' }).then(function(sw)
{ console.log('ॲཧޭ'); }).catch(function(error) { console.log('ॲཧࣦഊ'); });
Install - Service Worker this.addEventListener('install', function(event) { event.waitUntil( caches.create('v1').then(function(cache) {
return cache.add( '/index.html', '/style.css', '/app.js', '/img/logo.svg' ); }) ); });
Use Cache - Service Worker this .addEventListener('fetch', function(event){ event.respondWith( caches.match(event.request);
); });
Service Worker is difficult, but magic!
Available Offline Functionality ✓ HTML5 App Cacheʢ2008ʙʣ ✓ LocalStorage /
SessionStorageʢ2009ʙʣ ✓ Navigation.onLine ✓ Service Workerʢ2014ʙʣ
And more…
Weakness of the Web ✓ Slow Speed දࣔը໘ͷସɺϓϩάϥϜͷ࣮ߦͳͲ ✓ JavaScript
Poor Functions MapSetͱ͍ͬͨجຊతͳίϨΫγϣϯαϙʔτ͍ͯ͠ͳ͍ ✓ Restricted functionality ిΧϝϥϚΠΫͳͲ͑ͳ͍ػೳ͕·ͩ·ͩଟ͍ ✓ etc ΦϑϥΠϯ +BWB4DSJQUΤϯ δϯͷੑೳ61 8FC(- &$."4DSJQU 8FC $PNQPOFOUT $P⒎FF4DSJQU "VEJP7JEFP .FEJB$BQUVSF 8FC4QFFDI "1*
Weakness of the Web ✓ Slow Speed දࣔը໘ͷସɺϓϩάϥϜͷ࣮ߦͳͲ ✓ JavaScript
Poor Functions MapSetͱ͍ͬͨجຊతͳίϨΫγϣϯαϙʔτ͍ͯ͠ͳ͍ ✓ Restricted functionality ిΧϝϥϚΠΫͳͲ͑ͳ͍ػೳ͕·ͩ·ͩଟ͍ ✓ etc ΦϑϥΠϯ +BWB4DSJQUΤϯ δϯͷੑೳ61 8FC(- &$."4DSJQU 8FC $PNQPOFOUT $P⒎FF4DSJQU "VEJP7JEFP .FEJB$BQUVSF 8FC4QFFDI "1* 8FCࠓ·͞ʹਐԽ͍ͯͯ͠໘ന͍ʂ
ະདྷ࡞Δ͜ͱ͕Ͱ͖Δ ✓ Join to Github / Publish your code Polymer,
jQuery, Angular, … ✓ Join to Mailing List Service Worker, … ✓ Join to User Group HTML5j, Angular, ….
ະདྷ࡞Δ͜ͱ͕Ͱ͖Δ ✓ Join to Github / Publish your code Polymer,
jQuery, Angular, … ✓ Join to Mailing List Service Worker, … ✓ Join to User Group HTML5j, Angular, …. ຊ͔Βٕज़Λਐา͍ͤͨ͞
http://github.com/yoheiMune http://www.yoheim.net http://twitter.com/yoheiMune Thank you