Offline‑first PWA на примере фитнес‑трекера

[frog]

Варианты вроде wasm + sqlite я не рассматривал

Между прочим, напрасно. Отлично работает (в связке с OPFS), в том числе на старых телефонах. Есть мелкие нюансы, но они просто несравнимы с плясками вокруг IndexedDB.

[Aurum_Gallente]

Я пробовал решения с sqlite, но уже когда завернул PWA в Capacitor. Нет реактивности для vue.js, это было заметно при работе с фильтрами. Пользователю надо было в двух интерфейсах быстро искать и фильтровать упражнения по тегам, названию, группам мускулатуры, быстро подгружать изображения найденных упражнений. Если я бы я переделывал с нуля это приложение, то возможно рассмотрел бы такой вариант. В моём случае indexedDB хорошо подходил тем, что можно было 1200 упраженений вместе с файлами записать как объекты, добавить индексы и быстрый поиск по нужным ключам. Ранее я не работал с wasm (хотя сейчас активно его штурмую), не знаю всех особенностей в каждом из мобильных браузеров, поэтому не захотел тащить это в проект. Поплясать с idexedDB пришлось, не спорю, но пляски мне показались меньшим злом в сравнении с рисками wasm о котором я знаю слишком мало пока что.

[Fragster]

Так как решили с картинками? У меня "с наскока" в оффлайн режиме ничего не работает, и даже если сначала загрузить в онлайне, чтобы оно закэшировалось, при повторном запуске в оффлайне все равно ничего не показывает.

[Aurum_Gallente]

У меня в indexedDB упражнения записываются как json-объект. Одним из атрибутов объекта идёт blob изображения. В интерфейсе я этот блоб преобразую обратно в изображение.

indexedDB это key-value значение. Если нужно кешировать только картинки, можно по id хранить их блобы. А потом уже в коде делать

const imageUrl = URL.createObjectURL(imageBlob);

и присваивать этот imageUrl нужному объекту, потом использовать как :src="obj.imageUrl"

[Fragster]

У меня там были динамические пути к ассетам вида:

function getImageUrl(name) {
  return new URL(`../assets/icons/${name}.svg`, import.meta.url).href
}

При этом добавлял иконки в сборку через

    VitePWA({
      includeAssets: ["/favicon.ico", '**/*.{svg,png}'],
      strategies: "injectManifest",
      injectManifest: {
        globPatterns: ['**/*.{svg,png,js,css,html}'],
      }
    })],

а само кэширование в тупую через workbox cleanupOutdatedCaches() && precacheAndRoute(self.__WB_MANIFEST).

И точно помню, что кэш не работал, при запуске в оффлайн режиме все js отрабатывали, а иконки были битыми. А сейчас проверил - всё супер работает, при этом я даже ничего не пересобирал, как 4 года назад тестово прикрутил pwa, так и оставил.

[Aurum_Gallente]

Если этих иконок будет на 30+ мегабайт, результат будет немного другим. Для малого количества данных (по объему) это сработает. Я же описывал вариант 37-350Мб.

[Fragster]

Отдельно вместо бутстрапа рекомендую tailwind, да.

[Aurum_Gallente]

Вообще да, согласен. Но лично я с вёрсткой не очень плотно дружу. Я хоть и fullstack, но с перекосом в backend. Для PWA я выбрал bootstrap, так проще было лично мне сложные формы заполнения подходов делать, а уже при вёрстке лендинга (PWA на поддомене, api + лендинг + ресет пароля на основном) и формы ресета я делал с tailwind. Если б это был коммерческий проект и наличие хотя бы ещё одного человека в команде, то делалось бы на tailwind.

[popovichihor]

Автор реально хорошо показал обратную сторону PWA, не только возможности, но и проблемы, с которыми сталкиваешься в разработке. Особенно полезно про offline, кеш и indexedDB, потому что такие нюансы редко учитывают заранее. Для небольших проектов это действительно может быть отличным решением.

[Aurum_Gallente]

Там ещё очень много всего - Apple разрешают запускать PWA только на движке Safari даже если основным браузером в системе был установлен другой. В Safari не работает функционал установки по кнопке и многое "не как у людей".
От wasm я отказался как раз таки из-за "полезных" советов ИИ на этапе планирования, пара нейронок написали что при использовании wasm в PWA нельзя будет загружать изображения и видео по src="https://..." и делать кросс-доменные запросы к api. Когда я перешел на английский язык, выяснилось, что это неправда, но было уже поздно.
Изначально я хотел мимикрировать под нативные приложения и наследовать тему и стили системы, но разные браузеры это делали немного по-разному, поэтому я полностью отказался от использования стилей ОС.
При установке на десктоп уведомления через гугловский Firebase разоботают, но отображаются в системе очень по-разному в зависимости от ОС.
PWA работает немного по-разному до установки и после установки. Его можно использовать просто перейдя по ссылке на url приложения и использовать в браузере. А вот после установки на рабочий стол прав у PWA чуть больше, но на разных телефоах разница своя.