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 # 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 ## Difficulty
Intermediate Intermediate

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

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<h1>Pokemon Character Sheets</h1> <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> <p><ul id="pokemon-list"></ul></p>
</body> </body>
</html> </html>

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

@ -9,7 +9,9 @@
</head> </head>
<body> <body>
<h1>#{{national_id}} {{name}}</h1> <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> <p><img src="http://pokeapi.co/media/img/{{national_id}}.png" /></p>
<dl> <dl>
<dt>HP:</dt> <dd>{{hp}}</dd> <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; var isCached = document.documentElement.dataset.cached;
if (isCached) { if (isCached) {
@ -13,8 +15,10 @@ function getPokemonId() {
} }
function getPokemon(id) { function getPokemon(id) {
var fetchingModelStart = performance.now();
var url = 'http://pokeapi.co/api/v1/pokemon/' + id + '/?_b=' + Date.now(); var url = 'http://pokeapi.co/api/v1/pokemon/' + id + '/?_b=' + Date.now();
return fetch(url).then(function (response) { return fetch(url).then(function (response) {
fetchingModelTime = performance.now() - fetchingModelStart;
return response.json(); return response.json();
}); });
} }
@ -22,27 +26,31 @@ function getPokemon(id) {
function fillCharSheet(pokemon) { function fillCharSheet(pokemon) {
var element = document.querySelector('body'); var element = document.querySelector('body');
element.innerHTML = interpolateTemplate(element.innerHTML, pokemon); element.innerHTML = interpolateTemplate(element.innerHTML, pokemon);
}; }
function logTime() { function logTime() {
var loadingTime = document.querySelector('#loading-time'); var loadingTimeLabel = document.querySelector('#loading-time-label');
var label = loadingTime.parentNode; var interpolationTimeLabel = document.querySelector('#interpolation-time-label');
loadingTime.textContent = (Date.now() - startTime) + ' ms'; var fetchingModelTimeLabel = document.querySelector('#fetching-time-label');
label.hidden = false; loadingTimeLabel.textContent = (performance.now() - startTime) + ' ms';
interpolationTimeLabel.textContent = interpolationTime + ' ms';
fetchingModelTimeLabel.textContent = fetchingModelTime + ' ms';
} }
function cache() { function cache() {
document.documentElement.dataset.cached = true; document.documentElement.dataset.cached = true;
var url = window.location; var url = window.location;
var data = document.documentElement.outerHTML; var data = document.documentElement.outerHTML;
var headers = { 'x-url': window.location }; fetch('/render-store/', { method: 'PUT', body: data }).then(function () {
fetch('/render-store/', { method: 'PUT', body: data, headers: headers }).then(function () {
console.log('Page cached'); console.log('Page cached');
}); });
} }
function interpolateTemplate(template, pokemon) { 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]; 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 headers = { 'Content-Type': 'text/html' };
var response = new Response(contents, { headers: headers, status: 200 }); var response = new Response(contents, { headers: headers, status: 200 });
return self.caches.open('render-store').then(function(cache) { return self.caches.open('render-store').then(function(cache) {
return cache.put(request.headers.get('x-url'), response); return cache.put(request.referrer, response);
}); });
}); });
} }