mozilla
/
serviceworker-cookbook
зеркало из https://github.com/mdn/serviceworker-cookbook.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Working fine

This commit is contained in:
Salvador de la Puente González 2015-11-30 21:51:42 +01:00
Родитель a8ff039954
Коммит d0e30d9829
5 изменённых файлов: 23 добавлений и 13 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
render-store/README.md
Просмотреть файл

@ -1,5 +1,5 @@
# Render store
The recipe illustrates one recommendation from the [NGA](https://wiki.mozilla.org/Gaia/Architecture_Proposal#Render_store). A cache containing the interpolated templates in order to avoid render time upon successive requests.
The recipe illustrates one recommendation from the [NGA](https://wiki.mozilla.org/Gaia/Architecture_Proposal#Render_store). A cache containing the interpolated templates in order to avoid model fetching and render times upon successive requests.
## Difficulty
Intermediate

2
render-store/index.html
Просмотреть файл

@ -8,7 +8,7 @@
</head>
<body>
<h1>Pokemon Character Sheets</h1>
<p>Choose a character once and revisit. Compare the loading times.</p>
<p>Choose a character once, see the times and reload. Check the difference in times.</p>
<p><ul id="pokemon-list"></ul></p>
</body>
</html>

4
render-store/pokemon.html
Просмотреть файл

@ -9,7 +9,9 @@
</head>
<body>
<h1>#{{national_id}} {{name}}</h1>
<p id="loading-time-banner" hidden="hidden">Loading time: <span id="loading-time"></span></p>
<p>Fetching model time: <span id="fetching-time-label"></span></p>
<p>Interpolation time: <span id="interpolation-time-label"></span></p>
<p>Loading time: <span id="loading-time-label"></span></p>
<p><img src="http://pokeapi.co/media/img/{{national_id}}.png" /></p>
<dl>
<dt>HP:</dt> <dd>{{hp}}</dd>

26
render-store/pokemon.js
Просмотреть файл

@ -1,4 +1,6 @@
var startTime = Date.now();
var startTime = performance.now();
var interpolationTime = 0;
var fetchingModelTime = 0;
var isCached = document.documentElement.dataset.cached;
if (isCached) {
@ -13,8 +15,10 @@ function getPokemonId() {
}
function getPokemon(id) {
var fetchingModelStart = performance.now();
var url = 'http://pokeapi.co/api/v1/pokemon/' + id + '/?_b=' + Date.now();
return fetch(url).then(function (response) {
fetchingModelTime = performance.now() - fetchingModelStart;
return response.json();
});
}
@ -22,27 +26,31 @@ function getPokemon(id) {
function fillCharSheet(pokemon) {
var element = document.querySelector('body');
element.innerHTML = interpolateTemplate(element.innerHTML, pokemon);
};
}
function logTime() {
var loadingTime = document.querySelector('#loading-time');
var label = loadingTime.parentNode;
loadingTime.textContent = (Date.now() - startTime) + ' ms';
label.hidden = false;
var loadingTimeLabel = document.querySelector('#loading-time-label');
var interpolationTimeLabel = document.querySelector('#interpolation-time-label');
var fetchingModelTimeLabel = document.querySelector('#fetching-time-label');
loadingTimeLabel.textContent = (performance.now() - startTime) + ' ms';
interpolationTimeLabel.textContent = interpolationTime + ' ms';
fetchingModelTimeLabel.textContent = fetchingModelTime + ' ms';
}
function cache() {
document.documentElement.dataset.cached = true;
var url = window.location;
var data = document.documentElement.outerHTML;
var headers = { 'x-url': window.location };
fetch('/render-store/', { method: 'PUT', body: data, headers: headers }).then(function () {
fetch('/render-store/', { method: 'PUT', body: data }).then(function () {
console.log('Page cached');
});
}
function interpolateTemplate(template, pokemon) {
return template.replace(/{{(\w+)}}/g, function (match, field) {
var interpolationStart = performance.now();
var result = template.replace(/{{(\w+)}}/g, function (match, field) {
return pokemon[field];
});
interpolationTime = performance.now() - interpolationStart;
return result;
}

2
render-store/service-worker.js
Просмотреть файл

@ -29,7 +29,7 @@ function cacheInRenderStore(request) {
var headers = { 'Content-Type': 'text/html' };
var response = new Response(contents, { headers: headers, status: 200 });
return self.caches.open('render-store').then(function(cache) {
return cache.put(request.headers.get('x-url'), response);
return cache.put(request.referrer, response);
});
});
}