/third-task

Вступительное задание №3

Primary LanguageJavaScript

Задание 3

Мобилизация.Гифки – сервис для поиска гифок в перерывах между занятиями.

Сервис написан с использованием bem-components.

Работа избранного в оффлайне реализована с помощью технологии Service Worker.

Для поиска изображений используется API сервиса Giphy.

В браузерах, не поддерживающих сервис-воркеры, приложение так же должно корректно работать, за исключением возможности работы в оффлайне.

Структура проекта

  • gifs.html – точка входа
  • assets – статические файлы проекта
  • vendor – статические файлы внешних библиотек
  • service-worker.js – скрипт сервис-воркера

Открывать gifs.html нужно с помощью локального веб-сервера – не как файл. Это можно сделать с помощью встроенного в WebStorm/Idea веб-сервера, с помощью простого сервера из состава PHP или Python. Можно воспользоваться и любым другим способом.

Однако офлайновый сценарий был сломан последовательностью действий:

*Был проведён рефакторинг под названием «Более надёжное кеширование на этапе fetch», после которого стало невозможно обновить HTML-страницу: у клиентов она стала браться из кеша не только в офлайн-режиме, а всегда.

*Был сделан фикс этого бага, но перестал работать офлайн-режим: основной документ не загружался при отсутствии сети.

*Оказалось, что невозможно обновить статику из директорий vendor и assets. Но всё наладилось само собой после того, как был проведён рефакторинг под названием «Разложить файлы красиво». Правда, ServiceWorker перестал обрабатывать запросы за ресурсами приложения: HTML-страницей, скриптами и стилями из каталогов vendor и assets.

Решение и мысли

  • В первую очередь необходимо перенести Service Worker в корень нашего приложения, чтобы область видимости не была ограничена. Так как ранее файл лежал в папку assets, то доступа к gifs.html не было. Также необходимо было добавить кэширование файла в функцию needStoreForOffline. Добавили нестрогую проверку, что в URL есть название файла gifs.html, поэтому поисковые запросы, тоже кэшируются. Планируется оптимизировать и проверять в URL наличие gifs.html, но возвращать единый закэшированный файл. UDP: Т.к. браузер не закэшировал service-worker, поэтому на страницах с query parameters данную теорию проверить не удалось и пришлось закэшировать любое упоминание gifs.html

  • При установке Service Worker указан список файлов, которых надо закэшировать изначально, таким образом после первой загрузки страницы мы можем загрузить в оффлайн режиме

  • Оказалось, что при изменении статических файлов они берутся из кэша, есть два выхода для решения данной проблемы. Либо менять CACHE_VERSION, либо изменить принцип работы нашего кэша на Network-first. Все запросы мы кэшируем и в случае неудачи отдаем статику. Т.е. оффлайн режим также будет работать корректно. Для этого необходимо изменить эту строчку кода: response = caches.match(cacheKey) .then(cacheResponse => cacheResponse || fetchAndPutToCache(cacheKey, event.request)); на эту строчку кода: response = caches.match(cacheKey) .then(cacheResponse => fetchAndPutToCache(cacheKey, event.request) || cacheResponse);

Ответы на выпросы даны в файле service-worker.js