Превращаем существующее веб приложение в PWA #easyit #js #javascript @EasyITChannel

Рассматриваем наиболее простой способ превратить сущестующее WEB приложение, собираемое с помощью vitejs в прогрессивное веб приложение (PWA).

Исходные файлы проекта здесь:

Документация и ссылки:

Связанные видео:

Сериал "Создание SPA приложения на чистом JS":

Полезные видео по настройке webpack:

Самый простой способ установить nodejs на Linux и Mac:

#easyit #javascript #js #vanillajs #jsworkers @EasyITChannel

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

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

[valeriyk]

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

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

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

[waldo_]

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

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

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

[windcrack]

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

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

уважаемый 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"
]
}
что нужно поправить где

[qwz]

Добрый день!
Спасибо за видеоролик! 🎉

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

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

Спасибо 🫶

[aysommer]

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

И таких моментов куча на протяжении всего видео. Это все можно было вырезать