Спасибо, на канале есть видео и по сервис воркеру и по веб воркеру, если вдруг не смотрели :) Можно будет сделать что-нибудь посложнее, для более глубокой проработки материала.
Добрый день. Вообще без проблем. На одном довольно крупном проекте так и сделали. Но еще надо учесть, что за библиотеки у Вас используются. Могут возникнуть проблемы, например, с юнит тестами. У нас возникли и пришлось тесты переписать на vitest. Если для проекта не делали detach и не добавляли потом уж очень специфических плагинов-конфигов для webpack, то все должно пройти хорошо. Спасибо за просмотр.
Вопрос, не по теме, но по Vite(предположительно, так все поломалось именно после его подключения). Искала в сети ответ на вопрос, как оказалось, очень частый у новичков. Ответ дают очень непонятный для нового в этом деле человека) Вопрос: создала простой проект create-react-app, закачала его на Vercel. Все работает идеально. Используется react-router 6.4 для переключения между страниц. Решила подключить vite, чтобы посмотреть что это вообще такое. Теперь приложение выдает ошибку 404 при перезагрузке дочерних страниц. "/" - ошибки нет, "/contacts" или "/about" - ошибка 404. Как я поняла, не настроен redirect. На сервере настроить его не дает. Надо что-то менять, чтоб отдавать index.html со всех маршрутов. Но что и как? Было бы здорово посмотреть видео на эту тему.
Это довольно странно. Я лично переводил несколько крупных проектов с CRA на vite. В деплое вообще ничего менять не пришлось, все решилось на уровне скриптов в package.json. Но у нас нормальный взрослый CI, билд приложения, энвайроменты, все работает в докере под nginx и там есть настройка «все запросы переводить на index.html”. Использовался бесплатный Vercel? Сделаем. Должно с vite работать, если с CRA работает.
Не нужно стесняться (бояться) задавать «глупые» вопросы. Когда не можешь в чем-то разобраться по неопытности или недостатку знаний это нормально. Гораздо хуже когда без вопросов начинаешь что-то делать, теряешь кучу времени и потом все приходится переделывать. Еще пол-беды если самому ;) Вопрос вполне нормальный, я ответа прямо сейчас не знаю, с Vercel никогда не работал, но разберусь - к гадалке не ходи ;)
@@EasyITChannel К сожалению, русское айти сообщество беспощадно, не все(!!!), но в в своем большинстве. Если какой-то вопрос возникает, то лучше посмотреть на англо-говорящем ресурсе. Даже stackoverflow русский и английский кардинально разнятся.
Добрый день. Спасибо за видео. Напишите, пожалуйста, а вот как отслеживать изменения в приложении на других платформах? Также хотелось бы уточнить информацию, по работе с данными не через сервер, а допустим в файловой системе, т.е сохранение данных, допустим для компа или все же лучше это делать через БД?
Добрый день. От того что мы превратили web приложение в PWA оно web приложением быть не перестало. Просто оно стало немного похоже на нативное приложение по поведению. Как и в любом web приложении, разделяемые данные нужно хранить на сервере. Тут обычная архитектура клиент - сервер, пусть даже клиентом выступает браузер. Веб приложение сильно ограничено в части работы с файловой системой. Причина - безопасность. Если есть желание написать практически полноценное приложение на JS - посмотрите на Electron, на канале есть видео.
Добрый день! Спасибо за видеоролик! 🎉 Люди, подскажите пожалуйста, возможно ли сделать PWA не всего приложения, а только определенных страниц? Например у меня есть 5 вкладок я хочу что бы при оффлайне работали и кэшировались только 2 страницы. Сейчас реализован сервис воркер который перехватывает запросы на сервер и берет файлы из кэша, но например при переключении на другую вкладку ошибки, так как страницы в кэше нет, и не знаю как закэшировать только часть страниц с возможностью по ним переходить оффлайн а по остальным онлайн Спасибо 🫶
Добрый день. Сделать так, конечно, можно. Нужно всего лишь в обработчике запроса проверять к какому URL идёт обращение и принимать решение что делать - обращаться к кэшу или серверу.
@@EasyITChannel Автор, большое спасибо за ваши ответы! 🙏🏻 Даже когда видео уже год 😀 Моя сложность в том, что я понимаю что можно кэшировать файлы, например, картинки, но что бы кэшировать страницы, ведь нужно кэшировать статику, это брать весь бандл и кэшировать все приложение, оно большое, когда мне нужно всего две вкладки из этого бандла, то есть закэшировать часть бандла, наверно 🧐 Извините за глупые вопросы, впервые в PWA.
Кеширование файлов работает на уровне URL. Т.е. нужно принять решение о том кешировать конкретный URL или нет. И проверка выполняется именно по URL. В данном видео используется плагин vite-plugin-pwa, который автоматически генерит воркер с функционалом, подходящим для большинства приложений. Минимум настроек. Если нужно какое-то супер кастомное поведение, то сервис воркер можно написать и самостоятельно вручную. Это не то чтобы запредельно сложно. Нужно написать несколько обработчиков событий. Минимум два. Для событий install и fetch. Первое событие - какие файлы поместить в кеш изначально. Второе - для реализации необходимой стратегии уже при выполнении запроса. Тут можно кешировать не только файлы (бандлы), но и запросы. Как-то так.
Спасибо за видео! Но у меня вопрос. При запуске http-server у меня 2 адреса - локальный и внутренней сети. На компьютере, если захожу через локальный, я могу поставить себе приложение, но через запуск внутренней сети нет такой опции (список sw пуст и манифест не видит sw, плюс пишет, что загрузка из незащищенного источника). Однако, через моб. устройство я могу подключиться через внутреннюю сеть и поставить себе на главный экран свое PWA. Почему так происходит?
Хороший вопрос! Требования к pwa приложению (полноценному) следующие: 1. необходимо использовать протокол https 2. должен быть минимально, но правильно сконфигурированный манифест файл (иконки, имя...) 3. сервер воркер должен быть в наличии и загружаться с того же хоста что и манифест файл. Нарушение любого из этих требований не гарантирует работоспособность PWA. Есть исключение, чтобы приложение можно было тестировать. Это работа с localhost или если устройство с браузером находится в той же самой подсети, что и сервер. Если сеть локальная, но подсеть не совпадает (например, на сервере адрес 192.168.1.100/24, а на устройстве - 192.168.2.50/24, то работать не будет.
@@EasyITChannel здравствуйте ещё раз. Возникла проблемка. Если собираю и запускаю через http-server как PWA, то получается мелкий масштаб. Но если через команду npm run dev (vite) то всё отображается корректно. Не совсем понимаю, в чем может быть проблема. К проекту подключена сторонняя библиотека vuetify.
А как это «через http-server как PWA»? Разницы быть не должно. Нужно выполнить npm run build и затем полученные после билда файлы выложить в корень http сервера. Так делаете?
@@EasyITChannel если через run dev то манифест не видит sw , а если через http то и с манифестом и с sw всё ок, но отображается мелко почему-то. А сгенерированные файлы надо куда то перекидывать? У меня они в папке dist лежат.
уважаемый 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" ] } что нужно поправить где
Добрый день. Ваша ошибка находится в строке globDirectory Укажите отностиельный путь, а не абсолютный и не используйте обратный слэш в пути к каталогу. Должно выглядеть как-то так: globDirectory: 'build/' Т.е. нужно верняться к той версии, которая и была изначально в моей версии.
Очень много воды. Например, тот же момент, где "а вот на этой версии я не знаю, работает или нет, но я укажу ту, на которой все работало..." 5:42 И таких моментов куча на протяжении всего видео. Это все можно было вырезать
Сколько людей столько мнений. Можно было вырезать, но я посчитал полезным оставить. Это, так сказать, авторский замысел :) Спасибо за просмотр и обратную связь.
супер! очень полезное видео! побольше бы таких видео про PWA, service-workers, и по web-worker тоже было бы неплохо)
Спасибо, на канале есть видео и по сервис воркеру и по веб воркеру, если вдруг не смотрели :) Можно будет сделать что-нибудь посложнее, для более глубокой проработки материала.
Очень полезно, спасибо! всё завелось на последних версиях
Спасибо за полезный ролик!!!
Рад что полезный. Спасибо за поддержку!
Спасибо!!!!!!
Спасибо за видео
Спасибо за просмотр и поддержку.
Спасибо за видео!
И Вам спасибо.
Добрый день. Подскажите пожалуйста, если проект создавался через CRA, то Vite так же можно подключить?
Добрый день.
Вообще без проблем. На одном довольно крупном проекте так и сделали. Но еще надо учесть, что за библиотеки у Вас используются. Могут возникнуть проблемы, например, с юнит тестами. У нас возникли и пришлось тесты переписать на vitest. Если для проекта не делали detach и не добавляли потом уж очень специфических плагинов-конфигов для webpack, то все должно пройти хорошо.
Спасибо за просмотр.
Вопрос, не по теме, но по Vite(предположительно, так все поломалось именно после его подключения). Искала в сети ответ на вопрос, как оказалось, очень частый у новичков. Ответ дают очень непонятный для нового в этом деле человека) Вопрос: создала простой проект create-react-app, закачала его на Vercel. Все работает идеально. Используется react-router 6.4 для переключения между страниц. Решила подключить vite, чтобы посмотреть что это вообще такое. Теперь приложение выдает ошибку 404 при перезагрузке дочерних страниц. "/" - ошибки нет, "/contacts" или "/about" - ошибка 404. Как я поняла, не настроен redirect. На сервере настроить его не дает. Надо что-то менять, чтоб отдавать index.html со всех маршрутов. Но что и как? Было бы здорово посмотреть видео на эту тему.
Заранее прошу прощения, если вопрос глупый 😅
Это довольно странно. Я лично переводил несколько крупных проектов с CRA на vite. В деплое вообще ничего менять не пришлось, все решилось на уровне скриптов в package.json. Но у нас нормальный взрослый CI, билд приложения, энвайроменты, все работает в докере под nginx и там есть настройка «все запросы переводить на index.html”. Использовался бесплатный Vercel? Сделаем. Должно с vite работать, если с CRA работает.
Не нужно стесняться (бояться) задавать «глупые» вопросы. Когда не можешь в чем-то разобраться по неопытности или недостатку знаний это нормально. Гораздо хуже когда без вопросов начинаешь что-то делать, теряешь кучу времени и потом все приходится переделывать. Еще пол-беды если самому ;)
Вопрос вполне нормальный, я ответа прямо сейчас не знаю, с Vercel никогда не работал, но разберусь - к гадалке не ходи ;)
@@EasyITChannel О, здоров было бы еще про nginx посмотреть! Да, Vercel бесплатный.
@@EasyITChannel К сожалению, русское айти сообщество беспощадно, не все(!!!), но в в своем большинстве. Если какой-то вопрос возникает, то лучше посмотреть на англо-говорящем ресурсе. Даже stackoverflow русский и английский кардинально разнятся.
Добрый день. Спасибо за видео. Напишите, пожалуйста, а вот как отслеживать изменения в приложении на других платформах? Также хотелось бы уточнить информацию, по работе с данными не через сервер, а допустим в файловой системе, т.е сохранение данных, допустим для компа или все же лучше это делать через БД?
Добрый день. От того что мы превратили web приложение в PWA оно web приложением быть не перестало. Просто оно стало немного похоже на нативное приложение по поведению. Как и в любом web приложении, разделяемые данные нужно хранить на сервере. Тут обычная архитектура клиент - сервер, пусть даже клиентом выступает браузер. Веб приложение сильно ограничено в части работы с файловой системой. Причина - безопасность. Если есть желание написать практически полноценное приложение на JS - посмотрите на Electron, на канале есть видео.
Добрый день!
Спасибо за видеоролик! 🎉
Люди, подскажите пожалуйста, возможно ли сделать PWA не всего приложения, а только определенных страниц? Например у меня есть 5 вкладок я хочу что бы при оффлайне работали и кэшировались только 2 страницы.
Сейчас реализован сервис воркер который перехватывает запросы на сервер и берет файлы из кэша, но например при переключении на другую вкладку ошибки, так как страницы в кэше нет, и не знаю как закэшировать только часть страниц с возможностью по ним переходить оффлайн а по остальным онлайн
Спасибо 🫶
Добрый день.
Сделать так, конечно, можно. Нужно всего лишь в обработчике запроса проверять к какому URL идёт обращение и принимать решение что делать - обращаться к кэшу или серверу.
@@EasyITChannel
Автор, большое спасибо за ваши ответы! 🙏🏻 Даже когда видео уже год 😀
Моя сложность в том, что я понимаю что можно кэшировать файлы, например, картинки, но что бы кэшировать страницы, ведь нужно кэшировать статику, это брать весь бандл и кэшировать все приложение, оно большое, когда мне нужно всего две вкладки из этого бандла, то есть закэшировать часть бандла, наверно 🧐
Извините за глупые вопросы, впервые в PWA.
Кеширование файлов работает на уровне URL. Т.е. нужно принять решение о том кешировать конкретный URL или нет. И проверка выполняется именно по URL. В данном видео используется плагин vite-plugin-pwa, который автоматически генерит воркер с функционалом, подходящим для большинства приложений. Минимум настроек.
Если нужно какое-то супер кастомное поведение, то сервис воркер можно написать и самостоятельно вручную. Это не то чтобы запредельно сложно.
Нужно написать несколько обработчиков событий. Минимум два. Для событий install и fetch. Первое событие - какие файлы поместить в кеш изначально. Второе - для реализации необходимой стратегии уже при выполнении запроса. Тут можно кешировать не только файлы (бандлы), но и запросы. Как-то так.
@@EasyITChannel спасибо вам большое за такой понятный и развернутый ответ! Продвижения канала и всего вам доброго! 🙌🙌🙌
Спасибо за видео! Но у меня вопрос. При запуске http-server у меня 2 адреса - локальный и внутренней сети. На компьютере, если захожу через локальный, я могу поставить себе приложение, но через запуск внутренней сети нет такой опции (список sw пуст и манифест не видит sw, плюс пишет, что загрузка из незащищенного источника). Однако, через моб. устройство я могу подключиться через внутреннюю сеть и поставить себе на главный экран свое PWA. Почему так происходит?
Хороший вопрос!
Требования к pwa приложению (полноценному) следующие:
1. необходимо использовать протокол https
2. должен быть минимально, но правильно сконфигурированный манифест файл (иконки, имя...)
3. сервер воркер должен быть в наличии и загружаться с того же хоста что и манифест файл.
Нарушение любого из этих требований не гарантирует работоспособность PWA.
Есть исключение, чтобы приложение можно было тестировать. Это работа с localhost или если устройство с браузером находится в той же самой подсети, что и сервер.
Если сеть локальная, но подсеть не совпадает (например, на сервере адрес 192.168.1.100/24, а на устройстве - 192.168.2.50/24, то работать не будет.
@@EasyITChannel здравствуйте ещё раз. Возникла проблемка. Если собираю и запускаю через http-server как PWA, то получается мелкий масштаб. Но если через команду npm run dev (vite) то всё отображается корректно. Не совсем понимаю, в чем может быть проблема. К проекту подключена сторонняя библиотека vuetify.
А как это «через http-server как PWA»? Разницы быть не должно. Нужно выполнить npm run build и затем полученные после билда файлы выложить в корень http сервера. Так делаете?
@@EasyITChannel если через run dev то манифест не видит sw , а если через http то и с манифестом и с sw всё ок, но отображается мелко почему-то. А сгенерированные файлы надо куда то перекидывать? У меня они в папке dist лежат.
Dist каталог это должен быть корень web сервера. Маленький масштаб скорее всего потому что не настроен мета-тег viewport.
уважаемый 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"
]
}
что нужно поправить где
Добрый день.
Ваша ошибка находится в строке globDirectory
Укажите отностиельный путь, а не абсолютный и не используйте обратный слэш в пути к каталогу.
Должно выглядеть как-то так:
globDirectory: 'build/'
Т.е. нужно верняться к той версии, которая и была изначально в моей версии.
так же что-то вызывает сомнение наличие опции globIgnores. Такое ощущение, что она тут лишняя.
Очень много воды. Например, тот же момент, где "а вот на этой версии я не знаю, работает или нет, но я укажу ту, на которой все работало..." 5:42
И таких моментов куча на протяжении всего видео. Это все можно было вырезать
Сколько людей столько мнений. Можно было вырезать, но я посчитал полезным оставить. Это, так сказать, авторский замысел :)
Спасибо за просмотр и обратную связь.
@@EasyITChannel пожалуйста. Без негатива, если что
Это клад,
Спасибо за поддержку :)
Спасибо!!!!!