#Задание

Склонируйте код из репозитория: git clone https://github.com/shri-msk-2016/task3.git, перейдите в директорию проекта cd task3.

Выполните npm install, а затем npm start и откройте приложение в браузере (http://localhost:3000).

Приложение позволяет добавлять и редактировать данные студентов ШРИ (ФИО, ссылку на фотографию и краткую информацию). Для работы в офлайне оно использует ServiceWorker, позволяя при этом, как минимум, просматривать данные студентов.

Однако при реализации были допущены несколько ошибок:

• Без подключения к серверу приложение не работает.
• Не всегда обновляется список студентов после добавления нового.

Найдите и исправьте ошибки. В качестве дополнительного задания вы можете реализовать добавление студентов в офлайне с последующей синхронизацией. При выполнении обратите внимание на способы определения режима «онлайн/офлайн».

Результат пришлите в виде ссылки на https://github.com

##Что мы проверяем этим заданием?

Мы хотим проверить вашу способность разобраться в незнакомом коде и/или API. Также с помощью этого задания мы оценим ваш навык отладки. Поэтому прокомментируйте, пожалуйста, в коде или текстовом файле README ход ваших мыслей — какие ошибки и как вы нашли, почему они возникли и какие способы исправления существуют. Мы не ограничиваем вас в использовании сторонних инструментов и библиотек, однако при их использовании также ожидаем комментариев, в которых вы расскажете, зачем и почему было использовано то или иное средство.

Моё решение

Файл с сервис-воркером лежит в папке /js/, поэтому область видимости воркера ограничена этой папкой. Перемещаю его на уровень выше:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/worker.js');
}

Обзорно знакомлюсь с кодом сервис-воркера, исправляю бросающиеся в глаза ошибки:

// Прописал правильные пути к статике
var urlsToCache = [
  '/',
  '/css/index.css',
  '/js/index.js'
];

// Убрал ненужную точку с запятой
return event.respondWith(
  getFromCache(event.request).catch(fetchAndPutToCache)
);

После перезагрузки страницы воркер установился, но пропали аватарки студентов и в консоль стали сыпаться ошибки о том, что, мол, не удалось загрузить аватарки.

Загрузка картинок в воркере обрабатывается следующим блоком кода:

return event.respondWith(
  getFromCache(event.request).catch(fetchAndPutToCache)
);

Функция getFromCache проверяет, находится ли ресурс в кеше. Она позволяет обработать случай, когда ресурса в кеше нет, что и делается в коде выше — вот только в Promise.reject не передаётся парамерт request, который ожидается в fetchAndPutToCache. Исправляю это недоразумение:

function getFromCache(request) {
  return caches.match(request)
    .then((response) => {
      if (response) {
        return response;
      }
	  
      // Добавил параметр request
      return Promise.reject(request);
    });
}

Во время редактирования кода воркера замечаю, как обрабатывается запрос к серверу:

if (/^\/api\/v1/.test(requestURL.pathname)) {
  return event.respondWith(
    Promise.race([
      fetchAndPutToCache(event.request),
      getFromCache(event.request)
    ])
  );
}

Вызов Promise.race здесь явно не к месту — ресурс из кеша будет отдаваться быстрее. Видимо, именно из-за этого вызова есть проблемы с обновлением списка студентов после добавления нового. Лучшим решением здесь будет замена этого вызова на fetchAndPutToCache, тогда при наличии интернета будет совершён запрос к серверу (и, соответственно, будут получены актуальные данные), а при отсутствии интернета ответ сервера будет взят из кеша (если он там есть):

if (/^\/api\/v1/.test(requestURL.pathname)) {
  return event.respondWith(fetchAndPutToCache(event.request));
}