Что такое PWA. Как работают Service Workers
HTML-код
- Опубликовано: 8 фев 2025
- Исходный код тут: t.me/js_by_vla...
Получить профессию Frontend разработчика - bit.ly/3a6IZCn
Подробнее узнать об обучении в Result School -
bit.ly/3y8xemL
Бесплатный курс HTML & CSS - bit.ly/3bEK2tv
Сделать 5 проектов на JavaScript - bit.ly/3Nz7Qwa
Я в соц сетях:
Telegram: t.me/js_by_vla...
VK: vladile...
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_sc...
VK: result....
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vla...
Roadmap по каналу:
vladilen.notio...
Исходный код тут: t.me/js_by_vla...
Что такое PWA приложения и как работают Service Workers
Ролик, в котором мы создадим с нуля PWA приложение.
Разберем manifest.json, Service Workers и несколько стратегий кеширования
Исходный код тут: t.me/js_by_vladilen/339
Получить профессию Frontend разработчика - bit.ly/3a6IZCn
С детского сада знаю, что ПВА необходим для апликейшн !!!
Есть подозрение, что не все поймут 😃
😂👍
Слишком годно :)
Клей))
)))))))))))))))))))
Спасибо за как всегда великолепные уроки. Пожалуй лучшие в Ютьюбе по глубине и доступности изложения. Очень круто
Круто! Спасибо, Владилен!
Как раз писал что интересно узнать про PWA!
О, качественная годнота!
Благодарю за проделанный труд и за то, что делишься знаниями!
Такой кайф, когда на стажировки дали pwa сделать, и есть такой канал как твой.
ле, давненько я не видел, чтобы так просто и без лишней воды объясняли тему, лукас и подписка
Я только начинаю изучать какую либо технологию и Владилен сразу выпускает видео по ней)
Большое спасибо за труд, ценим и ждём продолжение про более продвинутые концепции PWA)
Спасибо за видео!
Интересно было бы еще посмотреть как это реализовать внутри приложения на том же Vue || React
Как вовремя нашла ваш урок, просмотрела, хоть поняла что к чему, ещё хорошо что в консоли все объясняете, кроме как ошибок, в ней ничего не знаю, в другие вкладки и не заходила, а тут прям находка, кучу открытий для себя сделала, если что, я новичок, которого посадили в сложный проект, без знания языка и сказали освоить за короткий срок, за 2 недели научилась оформлению на html, css, так же освоила axios, api, да и вообще кучу всего, а тут на днях сказали посмотреть и изучить PWA, чтоб знала что к чему, сутками не сплю, учеба😅
почти весь свой js изучаю с этого канала) Был бы рад увидеть гайд PWA в практике с каким то полезным сайте
Отлично! Как раз сегодня начал разбираться с тем, что такое PWA. Оказалось, под мои задачи подходит. Теперь нужно делать вёрстку под комп и мобильник.
Ой, спасибо огромное! Это видео - реально ценный клад.
Я вообще не понимал, как так возможно закешировать страницу, чтобы она открывалась без интернета. Гуглил гуглил, и ничего. А оказывается есть волшебные три буквы: PWA
Внятная речь, качественная подача. Спасибо за труд!
Не успел я проголосовать за эту тему, как она появилась) Владилен мое уважение!!!
Будете использовать технологию для своих приложений?)
1000 смирённых поклонов!!! Спасибо я так давно ждал!!!
Я буду использовать обязательно потому, что:
1) это реальные клиенты которых я получаю из поиска, так как сайты с PWA ранжируются выше, а значит клиентов!
2) продавать приложения по цене сайта намного проще, чем сайт!
И много много многое!!!
Конечно, спасибо, не знал об этом
Да совместно с NUXT и VUE)))
Было бы круто увидеть видео по стеку: vue-spa + pwa
Огромное тебе спасибо
Сложно сказать. Развернуть такое приложение очень просто, но:
а) рядовой пользователь знать не знает как его установить, и отсюда вытекает:
б) AppStore такое приложение публиковать не будет, а в iOs, из Safari к примеру, его установить - целая история
Это очень клевая технология, но практического применения в ней мизер.
Только по работе вспоминал фронт лид об этом, я начал гуглить вер воркеры, узнавать что такое pwa, и тут бац, твое видео как раз очень в тему и вовремя. Спасибо) не зря - лучший фронтенд канал на ютубе
Да, было бы неплохо разобрать тему обновления PWA при обновлении сайта на хосте))
Я ради этого и гуглю, вот сюда попал... Но кажется зря
@@ArtiomNeganov нагуглил что-нибудь? А то я только сейчас докопался до service workers, до этого пытался сбросить кэш при перезагрузке
@@Timoffey ну как, 2 года прошло. Нагуглил?
@@ДмитрийСитников-ш2хну как? Месяц прошел.
Очень круто! Хотелось бы более продвинутый курс на примере более сложного pwa !
Спасибо, Владилен! Как всегда - локанично, доступно и исчерпывающе!
Отличный туториал, никак руки не доходили чтобы разобраться :) А тут все разжевал :) Было бы круто послушать о Advanced решениях по PWA и фреймворках, WorkBox :) Спасибо.
Модно, стильно, молодёжно. Давно хотел видосик про пва. Сразу лайк!
Первый раз посмотрел на скорости х2, чтобы просто понимать, что это и зачем😅 Однозначно снова пересмотрю, когда буду внедрять) Спасибо тебе!
Всё чётко, освежил знания, жду видос про workbox!
спасибо огромное! как всегда супер! Было бы интересно послушать более расширенный курс по СВ и с более подробным рассмотрением)))
Спасибо, Владилен. Лайк, колокольчик, все дела 👍
Отличный урок! Хотелось бы узнать про использование геолокации и bluetooth в PWA
я буквально пару дней назад так же ютуб установил и ещё подумал как это работает) вон оно что оказывается. Теперь хочется глубже погрузиться и изучать
1000 смирённых поклонов!!! Спасибо я так давно ждал!!!
Я буду использовать обязательно потому, что:
1) это реальные клиенты которых я получаю из поиска, так как сайты с PWA ранжируются выше, а значит клиентов больше!
2) продавать приложения по цене сайта намного проще, чем сайт!
И много много многое!!!
Очень интересно, спасибо! Хотелось бы ещё больше!🦾
Спасибо за урок. Всё понятно и доступно. Сэкономил кучу времени. Кстати изучаю твои курсы на udemy, тоже очень доволен. Всем рекомендую
спасибо! Очень-очень актуальное сейчас видео PWA технологии! Пожалуйста выпускайте новые видосы по этой теме. Работа с железом телефона например, непаханное поле )
Спасибо за отличный материал! Будет очень интересно узнать о более продвинутых темах в концепции PWA
Спасибо за ролик, дает отличное базовое понимание того, что это и зачем
О да! Развитие темы pwa категорически интересно. Например как можно кэшировать пользовательский ввод и передавать инфу при появлении сети. Большое спасибо!!!
Нужно больше уроков по PWA, Владилен ) Нотификашки, workbox и т.д.
Давно пора было эту тему раскрыть, круто спасибо)
Ещё этого не хватало) Благодарю!
Ждем более продвинутую работу с PWA)
Супер актуальное и полезное видео. Огромное спасибо за такую ценную информацию.
Полезное видео, спасибо! Очень вовремя)
Спасибо большое за урок! Было бы круто если сняли видео про WorkBox
+++
Владилен Здоровья, Успехов ...ПВА это клей
Спасибо! лучшее что я видел по pwa
Спасибо за видео, просто и понятно о PWA и service workers.
Спасибо за видео урок, ждем разбор work box
Спасибо огромное! Очень полезное видео!!! Интересно будет сделать PWA на Angular!
Полезный материал! Да, было бы не плохо разобрать настройку workbox...
Очень крутая тема! Большое спасибо за такое простое и понятное объяснение!
Отличный туториал, хотим ещё! 😀
Спасибо за видео. Ещё как понял начало. Го глубокое. И ещё спасибо за предоставленный контент.
Понравилось ! Спасибо!
Можно развивать эту тему дальше
кайф! спасибо! жду более глубоких уроков по теме!
Спасибо, Владилен, за урок!
Спасибо большое, это очень важная и нужная штука!
Владилен, спасибо огромное! Хотелось бы увидеть, как это работает на смартфоне, например с картой.
Круто! Хотелось бы увидить как сделать PWA с реактом
Отличное видео, спасибо! Было бы здорово посмотреть как это выглядит на vue, а так же как это совмещается с SSR
Спасибо за курс👍
Большое спасибо! Было очень познавательно и интересно!
Лайк за невероятно годный контент, не глядя
Как всегда супер видео. Ждём ПВА на Ангуларе
Спасибо! Интересная тема.
Оу маай !!!))) Спасибо, интересная тема и очень полезное видео !!)))))
Было бы интересно посмотреть на более продвинутые ПВА на Реакте ещё и с использованием пуш уведомлений.
Классный обзор. Можно добавить к курсу по angular
Внедрил PWA в свой проект. В первую очередь делал это ради возможности установки на главный экран, потому что это будет весьма удобно для использования. Но потом и идея с кэшем и возможностью запуска оффлайн мне тоже показалась неплохой и я решил сделать и это. И, как я понял, работает это весьма странно и нестабильно. Я заметил, что если зайти в приложение с включенным интернетом, то при перезаходе в него без интернета кэш подгружается и все работает нормально. Но если же попытаться зайти сразу без интернета, то будет надпись: "Не удаётся получить доступ к сайту", кэш просто не подгружается. Почитал комментарии и понял, что не только у меня такое. Может кто знает, как это фиксится, пишите, буду рад. Но в целом, я думаю это сказывается сырость технологии. На бумаге, потенциально, это достаточно перспективно, но работает пока так себе. Единственное, ради чего можно это добавлять, так это для возможности установки на главный экран и еще может уведомлений. Хоть и не пробовал играться с уведомлениями, но почитав комментарии, понял, что и там наблюдаются проблемы в работе.
Спасибо огромное конечно нужно продолжение
Спасибо за видео. Очень познавательно и полезно
Да, было бы неплохо развернуть данную тему дальше.
Отличная тема. очень интересно. Покажи как использовать для моб платформ. и расскажи как она под капотом работает
Владилен как всегда топ . Я за то чтоб познакомиться с более глубокими концептами.
Гоу видео про Workbox :) И продвинутые темы в PWA
ура ! Разбери офлайн часть и background sync будет интересно.
Тема интересная, но для меня пока сложновата. Автору огромное уважение за труды )))
Отличный урок!!! Спасибо!!!
29:38 неверно. при возврате из промиса не обязательно делать await. Если вернуть другой промис, то результат будет тот же для вызывающего кода.
ps) отличный туториал. просто решил придраться к словам.
workbox бы глянул, да и про PWA подробнее в целом
Круто а можно подробнее про эту тему с workbox, вывести кнопку Установить в ui сайта, push notification и прочие апихи которые сейчас доступны а pwa?)
все просто и понятно. мне как бекендеру особенно интересно изучать чего у вас на фронте происходит. спасибо буду прокачивать скилы в этом направлении
Единственно кто разобрал SW более чем просто регистрация .. порядочный парень , да прибудет успех с тобой
Очень круто, спасибо!
Есть нюанс с той частью, где описывается , как удалять старые версии кэша, при добавлении новой версии.
Так как юзер не ставит галку update on reload, у него кэш обновится только после того как он закроет страницу, а потом снова откроет
Владилен, золотые уроки 👏👍
Спасибо, тебе!!! Миллион лайков
Спасибо, хороший урок!
спасибо за твой труд
Спасибо, отличный урок
Спасибо за видео
Алгоритм поиска какой нибудь темы: 1) Посмотри есть ли про это видео у Владилена 2) поиск в общем поиске 😁 Уважение!👍
Круто))) спасибо большое
Спасибо за обзор.
К сожалению несколько вскользь упомянутых глюков "тут хром почемуто закешировал запрос", "а тут почемуто не удалил кеш", и т.п., а реальных приложениях в продакшене вырастают в реальные проблемы. Постоянно сталкиваемся с этим, то приложение у клиентов отказывается обновляться пока вручную не зайдёшь в панель разработчика и не почистишь кеши, то наоборот, приложение напрочь отказывается использовать данные из кеша и при офлайне выдает "нет интернета", хоть убейся. Технология бесспорно крутая, но реализация довольно сырая, хотя ей уже не один год.
Спасибо. Хочу больше
Спасибо, было интересно
Спасибо большое)
Можете пожалуйста сделать видео на тему Workbox?)
Спасибо! оч полезный видос
Ура, новое видео
блин, только недавно мне попадался такой манифест, погуглил но не понял надо ли оно мне. а тут видос такой годный и я понимаю что надо!
Круто, спасибо!
Говорят PWA не выгодно гуглу и эплу, потому что с них они не могут процент с продаж брать.
А вообще тема супер интересная, нужно больше видосов по ней, в том числе и о либах, которые ты упомянул (воркбокс?).