Освальдас Валутис, дизайнер и Front-End разработчик

Посредник - это генератор статических сайтов на основе Ruby, который мы активно используем как для создания прототипов (см. Наш Шаблон посредников), так и для производственных сайтов. В моей предыдущей статье Service Worker я рассмотрел наиболее распространенные проблемы, с которыми вы можете столкнуться при внедрении технологии. На этот раз я хотел бы погрузиться в одну конкретную тему, позволяющую активировать работника на веб-сайте, основанном на посредниках, поскольку есть несколько вещей, с которыми нужно иметь дело ...

Управление версиями

Service Worker - это кеширование ресурсов. Чтобы сделать кеш недействительным с помощью рабочего, вы должны назначить номер версии каждому кэшируемому ресурсу. Вы можете делать это вручную каждый раз, когда вносите изменения на веб-сайт, но, вероятно, вам не стоит помнить об этом и тратить на это время. Итак, как мы можем автоматизировать процесс настройки посредника?

Поскольку Middleman - это генератор статических сайтов, одним из заключительных этапов обслуживания веб-сайта является создание сборки, которая, проще говоря, конвертирует исходные файлы в статические. Добавление .erbextension в статический файл позволяет нам выполнять в нем команды Ruby. По сути, это означает, что мы можем вставлять области динамического содержимого в файл и таким образом делать их разными для каждой сборки. Это именно то, что нам нужно, чтобы реализовать управление версиями для нашего Service Worker и, таким образом, мгновенно предоставлять пользователям свежий контент.

Здесь нужно разместить рабочий файл:

/source/serviceworker.js.erb

Я обнаружил, что временная метка Unix является идеальным методом для наименования версий ресурсов, поскольку в принципе они всегда уникальны для каждой сборки. Теперь мы можем поместить это в serviceworker.js.erb:

const version = '<%= Time.now.to_i %>';

… И воспользуйтесь преимуществом version в коде.

Переваренные активы

Переваривание ресурсов полезно для очистки кеша. Это делает изменение радиуса границы мгновенно видимым для пользователей. Поэтому я не удивлюсь, если у вас активирован :asset_hash. Однако это приводит к проблеме: жестко заданные пути ресурсов не будут работать, потому что они различаются в каждой сборке (файлы переименовываются, чтобы быть более точным). Но благодаря .erb мы можем вставлять динамические пути на Ruby:

Как вы могли заметить, реализации CSS и JS отличаются от изображений. Я столкнулся со странной проблемой, когда asset_path создавал неправильные пути к файлам CSS и JS. Этот крошечный обходной путь решил эту проблему.

Несколько языков

Количество языков на веб-сайте - это вещь, которую вы меняете не очень часто. Но если вы решите жестко закодировать список в рабочем файле, есть большая вероятность, что вы забудете обновить его, когда придет время. Опять же, вероятно, вам стоит не об этом помнить, поэтому лучше автоматизировать работу, когда это возможно. К счастью, есть способ получить список языков, доступных в Middleman, и их можно вставить следующим образом:

Используя appLangs, вы можете автоматически кэшировать эти первые страницы и обслуживать соответствующую« автономную страницу / изображение».

Отладка

Service Worker - это технология, требующая тестирования, и ведение журнала консоли, вероятно, является наиболее важным фактором при тестировании. Но дело в том, что вы, скорее всего, не захотите записывать эти сообщения в браузер пользователя, а хотите делать это только в режиме разработки. Посредник предоставляет средства для определения типа среды для приложения:

Кстати, это еще не все, что касается отладки Service Worker.

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