Практический мастер-класс по PWA
HTML-код
- Опубликовано: 21 окт 2024
- План стрима:
определяем общую цель и конкретные задачи, что нужно, чтобы наше приложение стало PWA
устанавливаем и настраиваем наше рабочее окружение
создаем и регистрируем наш первый сервис-воркер. Изучаем возможности Dev Tools браузера касательно PWA
отправляем наше приложение в оффлайн - на практике знакомимся с библиотекой Workbox
оптимизируем работу с сетью - кешируем запросы к API, используя разные стратегии
отдыхаем от кодинга - составляем Web App Manifest, чтобы наше приложение стало устанавливаемым
проверка итоговой “прогрессивности” нашего приложения, подведение итогов
пара слов о других интересных возможностях сервис воркеров и о будущем PWA
Ведущий: Максим Сальников
spasibo ) super
PWA, serves worker
udaci i prodvijeniya
То что надо для старта! Спасибо!
Хороший мастер класс. Спасибо Максим.
Много воды говорят в каментах, но мне, как ознакомительное видео (совершенно не работал раньше ни с чем из перечисленного) зашло на ура. Хотя тоже ставил скорость 1.25. Всё же спасибо.
Если сайт попадает под бан РКН, можно ли как то уже установленное pwa у пользователя перенаправить на новый домен?
Годнота. Не бросайте канал.
спасибо много нового
Спасибо за интересную тему, Максим.. Хотелось бы узнать: 1) как дело обстоит с php-файлами в плане кэширования например, а также 2) можно ли оффлайн, например, отправить форму, а затем передать данные каким-либо образом?
1. PHP-скрипты выполняются на сервере. Кешируется только клиентская часть, выполняемая в браузере пользователя - картинки, стили, js. 2. Зачем все усложнять, если можно просто попросить пользователя повторить действие с формой после того как он подключится к сети.
Подскажите, как убрать кнопку установки, когда PWA уже будет установлено ? Т.е. как узнать установил человек приложение или нет ?
А как трекается трафик полученный с PWA?
Что нужно сделать, чтоб разделить трафик с основного сайта и трафик с PWA?
Максим спасибо за мастер-класс очень доходчиво и по делу, все кто в немного в теме думаю согласятся. Уточни пожалуйста фича с показом кнопкой установки будет работать на iOs? И как вообще дела с установкой PWA из под мобильных браузеров, легко ли дать понять пользователю что ваше web app можно устанавливать как нативное на iOs и Android?
Спасибо! В iOS, к сожалению, установка PWA запрятана в кнопке с иконкой Share и далее "Add to home screen", события beforeinstallprompt там нет. Но я видел подсказки про установку просто в виде анимированных гифок для iOS разработчики делают :)
@@maxim.salnikov А подскажи пожалуйста еще один момент, я правильно понимаю что 'Add to home screen' есть только в safari под iOs, а в chrome под iOs ее нет?
Очень не хватает простого и главного понятного для повторения кода по PUSH уведомлениям. Очень прошу - сделайте или дайте ссылку если есть достойные примеры.
А можно в PWA другой сайт вывести, как на стандартном сайте фреймом?
Слушать действительно сложно. Много ииииииии, тооооо, ааа, эээээээ. Куча воды, но информация полезная. Напишите лучше статью с примерами кода.
скажите пожалуйста какой объем мегабайт для кэшсторж
Привет! Для разных браузеров и ОС этот лимит разный, и даже вычисляется по-разному. Вот полезная ссылка: developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa#how_much_can_i_store
Не веб-сайт, а веб-браузер на 10-й минуте. Ошибка, которая может стоить многого для начинающих верстальщиков и фронт-эндеров. Повнимательнее надо
первые двадцать минут потратил на воду. Как дело дошло до кода, все очень сжато
Столько воды - невозможно слушать даже ускорив в полтора раза!
Блин, и это урок? Копипаста одна без каких-либо объяснений
Если вы ничего не поняли, значит до этого и не читали о том, что такое PWA, и оно вам нафиг не надо. Мне вот надо, и я на днях как раз читал об этом (заняло аж целый час!), и в этом видео всё предельно понятно.
Привет! Приходилось выбирать между количеством материала и глубиной. Вот ссылка на огромный документ с более подробным описанием: bit.ly/workbox-workshop-2019
@@dfkkg3453 Спасибо за обратную связь! Значит, подобный формат имеет право на существование. Думаю, записать еще урок про push-уведомления.
@@maxim.salnikov И вам спасибо) Пуши в PWA - это основное, что тянет. Как я понял, ничего глобального придумывать не надо, и работать будет кросплатформенно. А если неправ - в новом видео вы всё расскажете )
@@maxim.salnikov Привет, а когда будет видео про пуши, они же вроде сейчас в IOS стали поддерживаться ? Хочу один крупный проект на PWA перевести, вот пуши смущают, на сколько сейчас стабильно работают и сложно настраиваются ?