Создание новых PWA¶

Добро пожаловать на Неделю 3 День 1 проекта #30DaysOfPWA! Хотите узнать больше об этом проекте? Ознакомьтесь с нашим постом Kickoff, чтобы получить более подробную информацию о дорожной карте контента и участниках. А теперь давайте погрузимся в работу!

Что мы рассмотрим сегодня¶

Раздел	Описание
Введение	Представление новых инструментов из проекта PWABuilder, PWA Studio и PWA Starter!
Начало работы + демонстрация	Давайте воспользуемся этими двумя новыми инструментами, чтобы создать новый PWA с помощью нескольких нажатий кнопок.
Под капотом	Глубокое погружение в некоторые инструменты, используемые в PWA Studio и Starter

Введение¶

Здравствуйте! В сегодняшнем посте из серии 30 дней PWA мы начнем с новых инструментов от проекта PWABuilder! Команда PWABuilder работает над инструментами для разработчиков на всех этапах процесса создания, начиная от создания нового PWA и заканчивая упаковкой существующего PWA для магазинов приложений. В этой статье мы рассмотрим PWA Studio, новое VSCode-расширение проекта PWABuilder, и PWA Starter, также разработанный командой PWABuilder шаблон кодовой базы, который поможет вам начать создание новых PWA.

Начало работы + демонстрация¶

Давайте начнем создавать новое прогрессивное веб-приложение с помощью PWA Studio! Функция PWA Studio Start a new App создает ваше приложение с помощью PWA Starter.

Во-первых, если вы еще не установили PWA Studio, установите ее из VSCode Marketplace.
Теперь, когда PWA Studio установлена, щелкните на значке PWABuilder в левой части VSCode.
Теперь в нижней панели VSCode должна появиться кнопка Start new PWA. Нажмите эту кнопку, чтобы начать генерацию PWA.
Введите имя хранилища, когда оно будет предложено, обычно это имя вашего приложения.
Ваш PWA будет сгенерирован с помощью Starter и все ваши зависимости будут установлены!
Теперь вы готовы приступить к кодированию! Нажмите F5 или щелкните Run и Start Debugging в верхней части VSCode. Ваш новый PWA откроется в режиме разработки, с автозагрузкой, в собственном окне App. Это позволит вам создавать PWA, ориентируясь на приложения.

Под капотом¶

PWA Starter¶

The PWA Starter — это шаблон кода, аналогичный тому, что генерируют такие инструменты, как create-react-app или Angular CLI.

Используя PWA Starter, вы получаете приложение, которое:

Не нужно настраивать систему сборки и добавлять шаблонный код. Все включено в комплект поставки.
Имеет систему сервис-воркеров с использованием Workbox.
Оценка Lighthouse близка к 100 баллам "из коробки".
Использует Fluent Web Components, что позволяет создавать PWA под Windows с учетом специфики платформы.
Имеет все необходимое для установки в браузер
Готов к упаковке в магазины приложений с помощью PWABuilder.

PWA Studio¶

Расширение PWA Studio, работающее в VSCode

PWA Studio — это расширение, которое предоставляет все необходимое для создания PWA в VSCode. Установив PWA Studio, вы сможете:

Начать создание нового PWA за считанные секунды с помощью PWABuilder pwa-starter.
Узнать, как опубликовать свое приложение в Интернете с помощью Azure Static Web Apps.
Добавить манифест веб-приложения и сервис-воркер к существующему веб-приложению
Упаковка PWA для Microsoft Store, Google Play и Apple App Store
Сгенерируйте значки для PWA
Проверка возможности установки PWA в браузере и готовности к публикации в магазинах приложений.
Узнайте больше об использовании Web App Manifest для включения новых функций в PWA.
Использовать сниппеты для реализации специфических для платформы функций, которые могут улучшить пользовательский опыт вашего PWA.

Вот так мы использовали новое расширение PWA Studio VSCode Extension и PWA Starter, чтобы начать создавать PWA всего несколькими нажатиями кнопок!

В следующем посте(./02.md) мы рассмотрим процесс преобразования существующего сайта в PWA!