Превращаем существующее веб приложение в PWA

[@andrewbistroff1199]

Спасибо за полезный ролик!!!

[@EasyITChannel]

Рад что полезный. Спасибо за поддержку!

[@АнатолийГорбов-о1ь]

супер! очень полезное видео! побольше бы таких видео про PWA, service-workers, и по web-worker тоже было бы неплохо)

[@EasyITChannel]

Спасибо, на канале есть видео и по сервис воркеру и по веб воркеру, если вдруг не смотрели :) Можно будет сделать что-нибудь посложнее, для более глубокой проработки материала.

[@valeriyk7565]

Очень полезно, спасибо! всё завелось на последних версиях

[@Trust-i7p]

Спасибо!!!!!!

[@АлексейВорошилов-н8л]

Спасибо за видео

[@EasyITChannel]

Спасибо за просмотр и поддержку.

[@МарияЗахарова-ы8ц]

Спасибо за видео!

[@EasyITChannel]

И Вам спасибо.

[@павеллогинов-в1м]

Это клад,

[@EasyITChannel]

Спасибо за поддержку :)

[@windcrack8404]

Добрый день. Спасибо за видео. Напишите, пожалуйста, а вот как отслеживать изменения в приложении на других платформах? Также хотелось бы уточнить информацию, по работе с данными не через сервер, а допустим в файловой системе, т.е сохранение данных, допустим для компа или все же лучше это делать через БД?

[@EasyITChannel]

Добрый день. От того что мы превратили web приложение в PWA оно web приложением быть не перестало. Просто оно стало немного похоже на нативное приложение по поведению. Как и в любом web приложении, разделяемые данные нужно хранить на сервере. Тут обычная архитектура клиент - сервер, пусть даже клиентом выступает браузер. Веб приложение сильно ограничено в части работы с файловой системой. Причина - безопасность. Если есть желание написать практически полноценное приложение на JS - посмотрите на Electron, на канале есть видео.

[@МарияЗахарова-ы8ц]

Вопрос, не по теме, но по Vite(предположительно, так все поломалось именно после его подключения). Искала в сети ответ на вопрос, как оказалось, очень частый у новичков. Ответ дают очень непонятный для нового в этом деле человека) Вопрос: создала простой проект create-react-app, закачала его на Vercel. Все работает идеально. Используется react-router 6.4 для переключения между страниц. Решила подключить vite, чтобы посмотреть что это вообще такое. Теперь приложение выдает ошибку 404 при перезагрузке дочерних страниц. "/" - ошибки нет, "/contacts" или "/about" - ошибка 404. Как я поняла, не настроен redirect. На сервере настроить его не дает. Надо что-то менять, чтоб отдавать index.html со всех маршрутов. Но что и как? Было бы здорово посмотреть видео на эту тему.

[@МарияЗахарова-ы8ц]

Заранее прошу прощения, если вопрос глупый 😅

[@EasyITChannel]

Это довольно странно. Я лично переводил несколько крупных проектов с CRA на vite. В деплое вообще ничего менять не пришлось, все решилось на уровне скриптов в package.json. Но у нас нормальный взрослый CI, билд приложения, энвайроменты, все работает в докере под nginx и там есть настройка «все запросы переводить на index.html”. Использовался бесплатный Vercel? Сделаем. Должно с vite работать, если с CRA работает.

[@EasyITChannel]

Не нужно стесняться (бояться) задавать «глупые» вопросы. Когда не можешь в чем-то разобраться по неопытности или недостатку знаний это нормально. Гораздо хуже когда без вопросов начинаешь что-то делать, теряешь кучу времени и потом все приходится переделывать. Еще пол-беды если самому ;) Вопрос вполне нормальный, я ответа прямо сейчас не знаю, с Vercel никогда не работал, но разберусь - к гадалке не ходи ;)

[@МарияЗахарова-ы8ц]

​@@EasyITChannel О, здоров было бы еще про nginx посмотреть! Да, Vercel бесплатный.

[@МарияЗахарова-ы8ц]

@@EasyITChannel К сожалению, русское айти сообщество беспощадно, не все(!!!), но в в своем большинстве. Если какой-то вопрос возникает, то лучше посмотреть на англо-говорящем ресурсе. Даже stackoverflow русский и английский кардинально разнятся.

[@waldo_]

Добрый день. Подскажите пожалуйста, если проект создавался через CRA, то Vite так же можно подключить?

[@EasyITChannel]

Добрый день. Вообще без проблем. На одном довольно крупном проекте так и сделали. Но еще надо учесть, что за библиотеки у Вас используются. Могут возникнуть проблемы, например, с юнит тестами. У нас возникли и пришлось тесты переписать на vitest. Если для проекта не делали detach и не добавляли потом уж очень специфических плагинов-конфигов для webpack, то все должно пройти хорошо. Спасибо за просмотр.

[@qwz19]

Добрый день! Спасибо за видеоролик! 🎉 Люди, подскажите пожалуйста, возможно ли сделать PWA не всего приложения, а только определенных страниц? Например у меня есть 5 вкладок я хочу что бы при оффлайне работали и кэшировались только 2 страницы. Сейчас реализован сервис воркер который перехватывает запросы на сервер и берет файлы из кэша, но например при переключении на другую вкладку ошибки, так как страницы в кэше нет, и не знаю как закэшировать только часть страниц с возможностью по ним переходить оффлайн а по остальным онлайн Спасибо 🫶

[@EasyITChannel]

Добрый день. Сделать так, конечно, можно. Нужно всего лишь в обработчике запроса проверять к какому URL идёт обращение и принимать решение что делать - обращаться к кэшу или серверу.

[@qwz19]

@@EasyITChannel Автор, большое спасибо за ваши ответы! 🙏🏻 Даже когда видео уже год 😀 Моя сложность в том, что я понимаю что можно кэшировать файлы, например, картинки, но что бы кэшировать страницы, ведь нужно кэшировать статику, это брать весь бандл и кэшировать все приложение, оно большое, когда мне нужно всего две вкладки из этого бандла, то есть закэшировать часть бандла, наверно 🧐 Извините за глупые вопросы, впервые в PWA.

[@EasyITChannel]

Кеширование файлов работает на уровне URL. Т.е. нужно принять решение о том кешировать конкретный URL или нет. И проверка выполняется именно по URL. В данном видео используется плагин vite-plugin-pwa, который автоматически генерит воркер с функционалом, подходящим для большинства приложений. Минимум настроек. Если нужно какое-то супер кастомное поведение, то сервис воркер можно написать и самостоятельно вручную. Это не то чтобы запредельно сложно. Нужно написать несколько обработчиков событий. Минимум два. Для событий install и fetch. Первое событие - какие файлы поместить в кеш изначально. Второе - для реализации необходимой стратегии уже при выполнении запроса. Тут можно кешировать не только файлы (бандлы), но и запросы. Как-то так.

[@qwz19]

@@EasyITChannel спасибо вам большое за такой понятный и развернутый ответ! Продвижения канала и всего вам доброго! 🙌🙌🙌

[@ДмитрийИванов-и7ц6з]

Спасибо за видео! Но у меня вопрос. При запуске http-server у меня 2 адреса - локальный и внутренней сети. На компьютере, если захожу через локальный, я могу поставить себе приложение, но через запуск внутренней сети нет такой опции (список sw пуст и манифест не видит sw, плюс пишет, что загрузка из незащищенного источника). Однако, через моб. устройство я могу подключиться через внутреннюю сеть и поставить себе на главный экран свое PWA. Почему так происходит?

[@EasyITChannel]

Хороший вопрос! Требования к pwa приложению (полноценному) следующие: 1. необходимо использовать протокол https 2. должен быть минимально, но правильно сконфигурированный манифест файл (иконки, имя...) 3. сервер воркер должен быть в наличии и загружаться с того же хоста что и манифест файл. Нарушение любого из этих требований не гарантирует работоспособность PWA. Есть исключение, чтобы приложение можно было тестировать. Это работа с localhost или если устройство с браузером находится в той же самой подсети, что и сервер. Если сеть локальная, но подсеть не совпадает (например, на сервере адрес 192.168.1.100/24, а на устройстве - 192.168.2.50/24, то работать не будет.

[@ДмитрийИванов-и7ц6з]

​@@EasyITChannel здравствуйте ещё раз. Возникла проблемка. Если собираю и запускаю через http-server как PWA, то получается мелкий масштаб. Но если через команду npm run dev (vite) то всё отображается корректно. Не совсем понимаю, в чем может быть проблема. К проекту подключена сторонняя библиотека vuetify.

[@EasyITChannel]

А как это «через http-server как PWA»? Разницы быть не должно. Нужно выполнить npm run build и затем полученные после билда файлы выложить в корень http сервера. Так делаете?

[@ДмитрийИванов-и7ц6з]

@@EasyITChannel если через run dev то манифест не видит sw , а если через http то и с манифестом и с sw всё ок, но отображается мелко почему-то. А сгенерированные файлы надо куда то перекидывать? У меня они в папке dist лежат.

[@EasyITChannel]

Dist каталог это должен быть корень web сервера. Маленький масштаб скорее всего потому что не настроен мета-тег viewport.

[@aysommer]

Очень много воды. Например, тот же момент, где "а вот на этой версии я не знаю, работает или нет, но я укажу ту, на которой все работало..." 5:42 И таких моментов куча на протяжении всего видео. Это все можно было вырезать

[@EasyITChannel]

Сколько людей столько мнений. Можно было вырезать, но я посчитал полезным оставить. Это, так сказать, авторский замысел :) Спасибо за просмотр и обратную связь.

[@aysommer]

@@EasyITChannel пожалуйста. Без негатива, если что

[@павеллогинов-в1м]

уважаемый Easy IT помогите пожалуйста после сборки npm build вот такая ошибка warnings One of the glob patterns doesn't match any files. Please remove or fix the following: { "globDirectory": "C:\\Users\\Админ\\Desktop\\pwa2\\build", "globPattern": "**/*.{js,css,html}", "globIgnores": [ "**/node_modules/**/*", "sw.js", "workbox-*.js" ] } что нужно поправить где

[@EasyITChannel]

Добрый день. Ваша ошибка находится в строке globDirectory Укажите отностиельный путь, а не абсолютный и не используйте обратный слэш в пути к каталогу. Должно выглядеть как-то так: globDirectory: 'build/' Т.е. нужно верняться к той версии, которая и была изначально в моей версии.

[@EasyITChannel]

так же что-то вызывает сомнение наличие опции globIgnores. Такое ощущение, что она тут лишняя.

[@Trust-i7p]

Спасибо!!!!!