Urbanhelp Интерактивное PWA
НКО "Благотворительный фонд защиты городских животных"
НКО осуществляет текущую деятельность и ведет общественные кампании по защите прав животных на жизнь на территории всей страны.Предпосылки проекта
НКО "Фонд защиты городских животных" решили создать интерактивный веб ресурс в позновательных целях для молодой аудитории.
Основные задачи:
- Разработать интерактивное PWA
- Интегрировать PWA с cloudpayments
- Развивать и поддерживать проект
Разработка PWA
Наша команда разработала современное PWA на передовых веб технологиях.
Основная сложность была в требовании к быстрой работе и загрузке PWA, при этом веб приложение имело большое количество векторной графики, более чем на 50 мегабайт на одной странице.
Как мы решали задачу
Решили использовать React + Next + Django + PWA
Так как подобный техно стек, легко переваривает легко переваривает такие объёмы за счёт встроенной оптимизации изображений (next/image), ленивой загрузки компонентов и кэширования через Service Worker.
Мы дополнительно сжали векторную графику (SVG) и разбили её на чанки, подгружаемые по мере прокрутки. Next.js обеспечил быстрый серверный рендеринг первой страницы, а React плавный клиентский рефлоу. Django отдавал только необходимые метаданные, а PWA сохранял статику в кэше после первого визита.
В итоге даже при 50+ МБ графики на одном экране время до интерактивности (TTI) не превысило 1.8 секунды, а повторные загрузки стали мгновенными.
