#Задание

Склонируйте код из репозитория: 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 ход ваших мыслей — какие ошибки и как вы нашли, почему они возникли и какие способы исправления существуют. Мы не ограничиваем вас в использовании сторонних инструментов и библиотек, однако при их использовании также ожидаем комментариев, в которых вы расскажете, зачем и почему было использовано то или иное средство.

Исправление ошибок, code review

1. Первым делом, при запуске сервера, выводится сообщение, что сервер поднят на 8080 порту. А в документации указан 3000 порт.

• Для консистентности в сообщении и в коде файла index.js укажем 3000 порт.

2. При загрузке страницы, возникает js ошибка: Uncaught SyntaxError: missing ) after argument list :3000/js/worker.js:36.

• Убираем ; в конце вызова метода getFromCache - аргументы, передаваемые в функцию разделяются ,, а точки с запятой не ставятся

3. У Service worker указан scope как /js/, и поэтому он не может закешировать index.html, index.css.

   • Перемещаем worker.js в корень проекта client, и указываем в нём новые пути к js и css:

     var urlsToCache = [
       '/',
       '/css/index.css',
       '/js/index.js'
     ];

4. Если загрузить страницу, когда в кеше не будет данных, то после getFromCache, вызовется fetchAndPutToCache, но в аргументы ему не прокинется event.request, т.к. Promise.reject() ничего не возвратит.

   • Прокинем в fetchAndPutToCache объект запроса event.request с помощью bind:

     return event.respondWith(
         getFromCache(event.request).catch(fetchAndPutToCache.bind(this, event.request))
     );

5. При скачивании нового ресурса, используется Promise.race - это не очень надёжная конструкция, т.к. мы не можем контролировать, какая операция вызовется быстрей и возвратит результат.

   • Заменим вызов fetchAndPutToCache и одновременный getFromCache на скачивание результата через fetchAndPutToCache:

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