SuperOleg dev notes

Дальше нужно генерировать manifest.json и иконки. Я решил интегрировать это в процесс сборки, причин несколько, не уверен что перевешивают сложность реализации:

- Доступ к манифесту и иконкам через наш dev server, не надо писать их на диск во время разработки
- Хочется отслеживать изменения исходного файла с иконками
- Возможно понадобится иметь их в манифесте сборки

Кстати до сих пор не знаю, нужно ли предварительное кэширование для вебманифеста и иконок)

В итоге, пришлось сделать два небольших вебпак плагина, которые умеют их генерировать. Отсутствие хорошей документации это отдельная боль, хорошо есть тайпинги и много примеров плагинов в node_modules в качестве референса, пригодилось даже для таких простых кастомных плагинов.

У sharp простое API, но надо продумать такие кейсы как ресайз картинок только если исходник реально изменился + персистентный кэш между сборками для ускорения процесса.

Отлично, у нас есть сервис-воркер, вебманифест и иконки, пора интегрировать в приложение.

Сделал общий новый PWA модуль с декомпозицей по вложенным модулям 1 в 1 как у Nuxt.js плагина.

Для сервис-воркера - на клиенте регистрируем его через workbox-window (вынес либу в динамический чанк, уменьшает надежность но не хочется тянуть лишние килобайты кода на клиент).

При кэшировании бандлов приложения, они не кэшируются намертво, что заблокировало бы разработку - InjectManifest создает манифест сборки с актуальными ревизиями файлов в development режиме, это меняет содержимое воркера при пересборке, браузер после загрузки видит что SW изменился и грузит новый (принудительный update воркера позволит сделать это быстрее) - итого + одна перезагрузка страницы, но мы получаем в итоге актуальный код в браузере, кажется нормальный компромисс для разработки PWA.
Также сделал опцию на отключение фичи в dev режиме.

Для вебманифеста - просто добавляем его в head приложения, как и мета теги.

Интеграция иконок заканчивается на добавлении их в вебманифест.

👍2

www.tgoop.com/super_oleg_dev/97

646 viewsedited  May 2, 2023 at 15:52

Дальше нужно генерировать manifest.json и иконки. Я решил интегрировать это в процесс сборки, причин несколько, не уверен что перевешивают сложность реализации:

- Доступ к манифесту и иконкам через наш dev server, не надо писать их на диск во время разработки
- Хочется отслеживать изменения исходного файла с иконками
- Возможно понадобится иметь их в манифесте сборки

Кстати до сих пор не знаю, нужно ли предварительное кэширование для вебманифеста и иконок)

В итоге, пришлось сделать два небольших вебпак плагина, которые умеют их генерировать. Отсутствие хорошей документации это отдельная боль, хорошо есть тайпинги и много примеров плагинов в node_modules в качестве референса, пригодилось даже для таких простых кастомных плагинов.

У sharp простое API, но надо продумать такие кейсы как ресайз картинок только если исходник реально изменился + персистентный кэш между сборками для ускорения процесса.

Отлично, у нас есть сервис-воркер, вебманифест и иконки, пора интегрировать в приложение.

Сделал общий новый PWA модуль с декомпозицей по вложенным модулям 1 в 1 как у Nuxt.js плагина.

Для сервис-воркера - на клиенте регистрируем его через workbox-window (вынес либу в динамический чанк, уменьшает надежность но не хочется тянуть лишние килобайты кода на клиент).

При кэшировании бандлов приложения, они не кэшируются намертво, что заблокировало бы разработку - InjectManifest создает манифест сборки с актуальными ревизиями файлов в development режиме, это меняет содержимое воркера при пересборке, браузер после загрузки видит что SW изменился и грузит новый (принудительный update воркера позволит сделать это быстрее) - итого + одна перезагрузка страницы, но мы получаем в итоге актуальный код в браузере, кажется нормальный компромисс для разработки PWA.
Также сделал опцию на отключение фичи в dev режиме.

Для вебманифеста - просто добавляем его в head приложения, как и мета теги.

Интеграция иконок заканчивается на добавлении их в вебманифест.

BY SuperOleg dev notes