История трансформации Интернета удивительна. Интернет начал обслуживать статические документы. Затем CSS и JavaScript добавили к нему стили и скрипты. Затем сеть заполонили тонны и тонны библиотек (проверьте этот пост — чтобы понять стоимость Javascript). Теперь он пытается сбросить свой вес, чтобы стать легким и еще более удивительным.
PWA — это прогрессивные веб-приложения. Он добавляет новую парадигму в Интернет. Он предлагает автономный рендеринг контента. Он предлагает push-уведомления. Делаем веб более нативным.
Подробно, что предлагает PWA? — Посмотрите это здесь
Ознакомьтесь со списком потрясающих PWA и здесь.
Как создать PWA?
Ну, это то, о чем эта статья. Вы можете проверить это здесь, если хотите получить краткий обзор. Но если вы такие же ленивые (😉), как я, и хотите быстро приступить к работе. Давай сделаем это.
Надеюсь, вы уже слышали о вебпаке (в некоторых редких случаях, если вы не заглянули в тот замечательный проект здесь)
Webpack использует webpack-cli для работы с интерфейсом командной строки. Webpack CLI также помогает разработчикам инициализировать конфигурацию webpack и переходить с одной версии webpack на другую.
Хорошо, давайте создадим PWA.
Подойдите к терминалу,
Создайте папку, назовите ее my-awesome-pwa .
Зайдите в эту папку, cd my-awesome-pwa .
Беги npm init --yes
Установите зависимости веб-пакета, npm i webpack @webpack-cli/init --save-dev
Наконец, запустите node_modules/.bin/webpack-cli init webpack-scaffold-pwa и ответьте на заданные вопросы.
Ура 🎉🎉🎉🎉 вот и все, вы создали свой PWA. Если это ваш первый, побалуйте себя 🍰 . Если нет, то наслаждайтесь сэкономленным временем 👏.
Оформить проект здесь, 🌟 приветствуются.
Если у вас есть интересные функции/предложения/проблемы, сообщите нам об этом.
Это все?
Вы создали базовый PWA, то есть
- Фреймворк-агностик
- Зарабатывает 💯 балл Маяк
Взгляните на показатели маяка.
Убедитесь, что функции, компоненты и приложения, которые вы создаете, следуют ему.
Если интересно идти шаг за шагом, проверьте эту codelab.
