Slide 1
Slide 1 text
*OUSPEVDUJPOUP
4FSWJDF8PSLFS
'SPOUSFOE$POGFSFODF
Slide 2
Slide 2 text
!DI
!
Slide 3
Slide 3 text
4FOTVJ4IPHP
&OHJOFFSBU$ZCFS"HFOU
*OD
'SPOUFOEⰋ菙
/PEFKTהַ&4הַ
Slide 4
Slide 4 text
ؿٗٝزؒٝسؒٝآص،
균䧭铣劤
8%#13&44
8FCؿٗٝزؒٝس剑简
Slide 5
Slide 5 text
㛇燉ַַ
8FC$PNQPOFOUT䗡䎿鍑铡
։➬圫ַ㹋鄲תד椚鍑ׅ։
IUUQIUNMFYQFSUTKQTFSJFTXFCDPNQPOFOUT
Slide 6
Slide 6 text
8FC《䋆ֻ
橆㞮ך鹌⻉
Slide 7
Slide 7 text
طحزٙ٦ؙ
ה
ع٦سؐؑ،
Slide 8
Slide 8 text
ع٦سؐؑ،ךألحؙ䱿獳
J1IPOF
J1IPOF4
"QQMF"
()[
"QQMF"
()[
.FNPSZ
(#
.FNPSZ
.#
Slide 9
Slide 9 text
ػا؝ֿׁٝהזָ
ٌغ؎ٕع؎ألحؙ⻉ָ
滠㹋ח鹌דֹגְ
Slide 10
Slide 10 text
ٌغ؎ٕر٦ة㔐简ךⵃ欽罏
劢⢪欽
-5&
(
(
˟筨満չ䎂䧭䎃晛䞔㜠鸐⥋涯剅*$5ךⵃ欽橆㞮ך㢌⻉պ
Slide 11
Slide 11 text
( -5&
ך兛⿹ָ鹌ךך
(כה劢ח㢳ְ
كأزؒؿؓ٦ز׃˘
Slide 12
Slide 12 text
رغ؎أה㛇㖑㽷הך騃ꨄ
ח֮黪誊暟䒉暟٥瑞孡
ٖ؎ذٝء٦ך銲㔓
"
# $
Slide 13
Slide 13 text
طحزٙ٦ؙכ
ع٦سؐؑ،קו
㸜㹀׃גְזְ
%
&
Slide 14
Slide 14 text
頾蚚ַֽץֹכ
طحزٙ٦ؙדכזֻ
ع٦سؐؑ،
Slide 15
Slide 15 text
ٌغ؎ٕرغ؎أך兛⿹װ
8FC䪮遭ך鹌⻉הⰟח
ػؿؓ٦وٝأָ㉏
Slide 16
Slide 16 text
)JHI1FSGPSNBODF8FC'SPOUFOE
IUUQTTQFBLFSEFDLDPNBIPNVIJHIQFSGPSNBODFXFCGSPOUFOE
Slide 17
Slide 17 text
)JHI1FSGPSNBODF#SPXTFS/FUXPSLJOH
IUUQDIJNFSBMBCTPSFJMMZDPNCPPLT
Slide 18
Slide 18 text
馄㣐✲կדծ
ؔؿٓ؎ٝך儗ח歗ָ
溪涯זֿהכ劢鍑寸˘կ
Slide 19
Slide 19 text
ؔؿٓ؎ٝؿ؋٦أزהכ
ؔؿٓ؎ٝ8FC㹋植ׅ䪮遭
4FSWJDF8PSLFSJTDPNJOH
Slide 20
Slide 20 text
ΦϑϥΠϯϑΝʔετͱ
Slide 21
Slide 21 text
ؔؿٓ؎ٝ䲿ח
8FC،فٔ⡲ֿה
Slide 22
Slide 22 text
0JOF'JSTU
ˊ"CFUUFS)5.-6TFS&YQFSJFODF
IUUQCMPHKPFMBNCFSUDPVLPJOFSTUBCFUUFSIUNMVTFSFYQFSJFODF
Slide 23
Slide 23 text
ؔؿٓ؎ٝ8FCךًٔحز
ؔؿٓ؎ٝד،ؙإأדֹ
琎噰涸חٍؗحءُ撑ׅךד넝鸞
طحزٙ٦ؙ䌒㚖眍秈〳腉
Slide 24
Slide 24 text
ؔؿٓ؎ּֽٝדכזְ
㸣Ⰻזؔؿٓ؎ֽٝדכזֻ
鴟㞮ך㖑װ㖑♴ꉟך״ֲז籬ָꨇְ
橆㞮ח㼎׃ג؟ه٦زדֹ
Slide 25
Slide 25 text
ط؎ذ؍ـך䮶莸ְח鵚בֻ
؎ٝأز٦ٕ儗ח䲽歗ٔا٦أ然⥂
ؔؿٓ؎ٝ儗ח歗ָ溪涯חזזְ
鸐⥋דֹזַֿה䠐陎ׇׁזְ鏣鎘
Slide 26
Slide 26 text
ؔؿٓ؎ٝכ堣腉ךמהא
ٔ،ٕة؎ي䚍銲実ׁ،فٔחכ♶ぢֹ
铣⚥䗰٥⽯儗䚍ָ♶銲ז箟꧊ד֮ל˘
،فٔ؛٦ءّٝך堣腉ךמהאח麓ֺזְ
Slide 27
Slide 27 text
ؔؿٓ؎ٝ⻉ָ姻纏דכזְ
Slide 28
Slide 28 text
דծ嗚鎢כ⳿勻
Slide 29
Slide 29 text
ؔؿٓ؎ٝ8FC㹋植ׅ䪮遭
Slide 30
Slide 30 text
ꟼ鸬ׅـٓؐؠ"1*
OBWJHBUPSPO-JOF
'JMF4ZTUFN
8FC4UPSBHF
JOEFYFE%#
"QQMJDBUJPO$BDIF
Slide 31
Slide 31 text
OBWJHBUPSPO-JOF
ؔٝٓ؎ַٝוֲַ《䖤
POMJOFPJOF؎كٝز
ـٓؐؠ؟ه٦زקר㸣✪
Slide 32
Slide 32 text
'JMF4ZTUFN
㣐ֹז؟؎ؤךؿ؋؎ٕך⥂㶷ぢֽ
ꬊず劍㘗"1*
زٓٝؠؙءّٝꬊ㼎䘔
Slide 33
Slide 33 text
'JMF4ZTUFN
' ( ) * +
#
, &
&
&
-
- &
&
&
Slide 34
Slide 34 text
8FC4UPSBHF
,FZ7BMVF䕎䒭דر٦ة⥂㶷_.#
ず劍㘗ךءٝفٕז"1*
㼰ꆀךر٦ة䲿ה׃גְ
Slide 35
Slide 35 text
var value = localStorage['key'];
var json = JSON.parse(value);
localStorage['key'] = JSON.stringify(json);
Slide 36
Slide 36 text
8FC4UPSBHF
' ( ) * +
#
, -
-
-
-
-
- -
-
Slide 37
Slide 37 text
JOEFYFE%#
,FZ7BMVF䕎䒭דر٦ة⥂㶷_.#
ꬊず劍㘗ךװװ醱꧟ז"1*
؎ٝرحؙأ⢪넝鸞ז،ؙإأ
غ٦آّصؚٝהزٓٝؠؙءّٝ
Slide 38
Slide 38 text
var db;
var objectStore;
var req = window.indexedDB.open('dbname', 3);
req.onsuccess = function(event) {
db = event.target.result;
};
req.onupgradeneeded = function(event) {
db = event.target.result;
objectStore = db.createObjectStore('name', {
keyPath: 'key'
});
};
Slide 39
Slide 39 text
JOEFYFE%#
' ( ) * +
#
, -
-
-
-
-
- -
-
Slide 40
Slide 40 text
"QQMJDBUJPO$BDIF
وصؿؑأزؿ؋؎ٕחٍؗحءُ㹀纏
Slide 41
Slide 41 text
CACHE MANIFEST
# Resource to cache
CACHE:
index.html
stylesheet.css
image.png
script.js
# Resource to bypass
NETWORK:
login.php
/api/data
# Fallback URLs
FALLBACK:
/ /offline.html
Slide 42
Slide 42 text
⽃秪ח鋅ִג醱꧟ז
"QQMJDBUJPO$BDIF㉏겗
Slide 43
Slide 43 text
"QQMJDBUJPO$BDIFךꨇ׃ׁ
㹀纏⯋ך)5.-ل٦آٍؗحءُ
ٍؗحءُ稢װַח؝ٝزٗ٦ٕ♶〳
+BWB4DSJQUַٍؗحءُך乼⡲♶〳
长ղך➬圫♳ծ鏣鎘ָ䓼ⵖׁ
Slide 44
Slide 44 text
POMJOF"1*4UPSBHF"1*
Slide 45
Slide 45 text
if (navigator.onLine) {
$.ajax({
url: '/api/data',
method: 'get'
}).done(function (data) {
render(data);
});
} else {
var cacheData = localStorage.getItem('key');
render(JSON.parse(cacheData));
}
Slide 46
Slide 46 text
"QQMJDBUJPO$BDIFד갹䓸
Slide 47
Slide 47 text
ꟼ鸬ׅـٓؐؠ"1*
OBWJHBUPSPO-JOF
'JMF4ZTUFN
8FC4UPSBHF
JOEFYFE%#
"QQMJDBUJPO$BDIF
4FSWJDF8PSLFS̒/FX
Slide 48
Slide 48 text
4FSWJDF8PSLFSJTDPNJOH
Slide 49
Slide 49 text
넝堣腉זٗ٦ٕؕفٗؗء
4FSWJDF8PSLFSכ+BWB4DSJQUד㹋鄲ׅ
ٗ٦ٕؕفٗؗءך״ֲזך
Slide 50
Slide 50 text
4FSWJDF8PSLFS
+BWB4DSJQU8PSLFSךמהא
)551ؙٔؒأزך嗚濼ה何甑
'FUDI"1*⢪ٔا٦أך《䖤
$BDIF"1*⢪ٍؗحءُך盖椚
غحؙؚٓؐٝسず劍#BDLHSPVOE4ZOD
؟٦غ٦فحءُך「⥋8FC1VTI"1*
Slide 51
Slide 51 text
+BWB4DSJQU8PSLFSךמהא
Slide 52
Slide 52 text
ـٓؐؠ
4FSWJDF8PSLFS
4FSWJDF8PSLFSך涫ꐮ
4FSWJDF8PSLFS涫ꐮ
Slide 53
Slide 53 text
var sw = navigator.serviceWorker;
sw.register('sw.js').then(function (res) {
console.log('sw.js is installed!');
}, function (error) {
console.log('sw.js is not installed...');
});
JO#SPXTFS
Slide 54
Slide 54 text
)551ؙٔؒأزך嗚濼ה何甑
Slide 55
Slide 55 text
ـٓؐؠ
4FSWJDF8PSLFS
ؙٔؒأز嗚濼
؟٦غ٦
)551ؙٔؒأز涪欰
չֶծؙٔؒأزպ
GFUDI؎كٝز涪欰
Slide 56
Slide 56 text
ـٓؐؠ
4FSWJDF8PSLFS
ؙٔؒأز何甑
؟٦غ٦
)551ؙٔؒأز涪欰
չ䩛חٖأهٝأպ
Slide 57
Slide 57 text
self.addEventListener('fetch', function (e) {
console.log('Request in Browser');
e.respondWith(
new Response('Not Found', {
status: 404
})
);
});
JO4FSWJDF8PSLFS
Slide 58
Slide 58 text
'FUDI"1*⢪
ٔا٦أך《䖤
Slide 59
Slide 59 text
'FUDI"1*הכ
ٔا٦أ《䖤ך倜ז"1*
1SPNJTFك٦أך"1*鏣鎘
9)3״⡚ٖكٕ
➙ךהֿ4FSWJDF8PSLFS؝ٝذؗأز㼔欽
Slide 60
Slide 60 text
4FSWJDF8PSLFS
'FUDI"1*ךⵃ欽
؟٦غ٦
'FUDI"1*ד
ٔا٦أ《䖤
Slide 61
Slide 61 text
fetch('/url/json').then(function (res) {
return res.json();
}).then(function (json) {
console.log(json);
});
JO4FSWJDF8PSLFS
Slide 62
Slide 62 text
'FUDI"1*鍑铡ծתכ
8FCחְֶג'FUDIׅהכ⡦ַ
IUUQKYDLIBUFOBCMPHDPNFOUSZXIBUXHGFUDI
Slide 63
Slide 63 text
$BDIF"1*⢪
ٍؗحءُך盖椚
Slide 64
Slide 64 text
$BDIF"1*הכ
ٔا٦أך宕竲涸ٍؗحءُׅ"1*
1SPNJTFك٦أך"1*鏣鎘
➙ךהֿ4FSWJDF8PSLFS؝ٝذؗأز㼔欽
Slide 65
Slide 65 text
4FSWJDF8PSLFS
$BDIF"1*ךⵃ欽
$BDIF"1*
$BDIF"1*⢪ג
ٔا٦أ涫ꐮ٥撑
Slide 66
Slide 66 text
caches.open('cache-key').then(function(cache) {
return cache.addAll([
'js/app.js',
'css/app.css',
'img/image.png'
]);
});
caches.match(e.request).then(function (res) {
return res;
});
JO4FSWJDF8PSLFS
Slide 67
Slide 67 text
4FSWJDF8PSLFSDBDIFQPMZMM
IUUQHJUIVCDPNDPPOTUBDBDIFQPMZMM
Slide 68
Slide 68 text
غحؙؚٓؐٝسず劍
#BDLHSPVOE4ZOD
Slide 69
Slide 69 text
ـٓؐؠ
4FSWJDF8PSLFS
涫ꐮ儗ח♧㹀ךワ劍ד
TZOD؎كٝز涪抟鏣㹀
TZOD؎كٝزך㹀劍涸ז涪抟
TZOD؎كٝز涪欰
Slide 70
Slide 70 text
var sw = navigator.serviceWorker;
sw.ready.then(function(reg) {
reg.syncManager.register({
id: "periodicSync",
minDelay: 60 * 60 * 1000,
minPeriod: 12 * 60 * 60 * 1000,
allowOnBattery: true
idleRequired: false
}).then(function() {
// Success
});
});
JO#SPXTFS
Slide 71
Slide 71 text
؟٦غ٦فحءُך「⥋
8FC1VTI"1*
Slide 72
Slide 72 text
4FSWJDF8PSLFS
1VTIر٦ة「⥋
1VTI؟٦غ٦
QVTI؎كٝز涪欰
)551הַד
؟٦غ٦1VTI
Slide 73
Slide 73 text
var sw = navigator.serviceWorker;
sw.ready.then(function(reg) {
reg.pushManager.subscribe().then(
function(subscription) {
// Success
console.log(subscription.subscriptionId);
console.log(subscription.endpoint);
}
});
});
JO#SPXTFS
Slide 74
Slide 74 text
4FSWJDF8PSLFSה)551ָⴖֻ
倜׃ְ8FC1VTIך⚅歲רר傈鎸
IUUQEIBUFOBOFKQKPWJ
Slide 75
Slide 75 text
넝堣腉ײִ)5514ָ䗳갭
鸐⥋鷿⚥ד何甑ׁזְ״ֲחկ
涪כٗ٦ٕؕمأزדծꂁ⥋כ44-䲿կ
Slide 76
Slide 76 text
ؔؿٓ؎ٝ8FCךֽ
דכזְկ4FSWJDF8PSLFSך⯋ד
8FC1VTIװغحؙؚٓؐٝسず劍㹋植ׅ
Slide 77
Slide 77 text
4FSWJDF8PSLFSך㹋鄲朐屣
' ( ) * +
#
,
-
-
-
&
&
&
-
Slide 78
Slide 78 text
4FSWJDF8PSLFS⢪
ٔا٦أٍؗحءُך؎ً٦آ
Slide 79
Slide 79 text
ـٓؐؠ
؟٦غ٦
鸐䌢ٕ٦ز
ؙٔؒأز׃ג
ٖأهٝأֲ
Slide 80
Slide 80 text
ـٓؐؠ
؟٦غ٦
4FSWJDF8PSLFS
$BDIF"1*
4FSWJDF8PSLFS
ד劢ٍؗحءُ
$BDIF"1*⢪ג
ٔا٦أ⥂㶷
Slide 81
Slide 81 text
ـٓؐؠ
؟٦غ٦
4FSWJDF8PSLFS
$BDIF"1*
$BDIF"1*ַ撑׃
ٔا٦أ鵤⽱
4FSWJDF8PSLFS
דٍؗحءُ幥
Slide 82
Slide 82 text
e.respondWith(
caches.open(CACHE_KEY).then(function (cache) {
return cache.match(e.request)
.then(function (response) {
if (response) {
return response;
} else {
return fetch(e.request.clone())
.then(function (res) {
cache.put(e.request, res.clone());
return res;
});
}
});
})
);
JO4FSWJDF8PSLFS
Slide 83
Slide 83 text
IUUQTDIHJUIVCJPUPEP
Slide 84
Slide 84 text
ؔؿٓ؎ٝהְֲ倜ז
ػٓت؎ي「ֽⰅ״ֲ
Slide 85
Slide 85 text
5IBOLZPV
!DI
.
!
DI
/ DIOFU