Практическое руководство по Angular 6 прогрессивным веб-приложениям (PWA). В первой части курса мы собираемся погрузиться прямо в Angular Service Worker и встроенную поддержку Angular CLI PWA. В качестве отправной точки мы собираемся использовать обычное Angular приложение, и мы собираемся начать добавлять функции PWA поверх него, чтобы превратить его в прогрессивное веб-приложение.
Мы начнем с добавления оператора Angular Service Worker и включаем опцию «Загрузка и установка приложения». Мы узнаем все об управлении версиями приложений, и мы узнаем о различных стратегиях кэширования, доступных для кэширования не только пакетов приложений, но и данных приложения.
Затем мы добавим Application Shell с помощью Angular CLI и Angular Universal и сделаем приложение One-Click Installable с помощью app manifest. Наконец, мы добавим Push Notifications в приложение, используя Angular Service Worker, для полного использования мобильных PWA-приложений.
Во второй части вы узнаете о Progressive Web Applications в целом (включая Service Workers, App Manifest и Cache Storage API.), И вы будете использовать эти API для реализации нескольких родных функций: One-Click Install, Offline поддержка, загрузка и установка приложений, кэширование данных приложений и многое другое.
Мы также изучим основы Service Worker с первых принципов, используя встроенные API-интерфейсы браузера, и мы подтвердим наше понимание того, что происходит на каждом шагу, используя встроенные инструменты Chrome Dev Tools PWA.
Знания, полученные в этом разделе, долговечны, как и основы браузера, а также то, как работает новая PWA Web в целом, поэтому все, что вы узнали, все еще применимо к любой другой платформе разработки.
Почему PWA? Создайте будущее Интернета сегодня
Будущее Интернета явно идет в одном направлении: прогрессивные веб-приложения! Благодаря предстоящей поддержке Safari и возможности установки PWA непосредственно на рабочий стол Windows, PWA - это новое поколение веб-приложений, которое позволит преодолеть разрыв с Native Apps: это будет включать в ближайшем будущем такие вещи, как Bluetooth и платежи.
PWA выглядят и чувствуют себя как родные приложения, но их нет в App Store и всех его проблем: вместо этого веб-приложение теперь можно установить непосредственно на рабочий стол пользователя на главный экран одним щелчком мыши!
Затем приложение будет установлено непосредственно в фоновом режиме, чтобы его не нужно было загружать повторно, если только новая версия не доступна.
PWA не зависят от мобильных устройств: любое приложение может выиграть от запуска на порядок быстрее! Поддержка Angular CLI PWA и Service Workers, позволяют использовать функции PWA на другом уровне: мы сможем легко добавить функции PWA в наше приложение прозрачным способом через Angular CLI в рамках процесса сборки.
Но нам все равно нужно понять, как функции PWA работают под капотом, чтобы устранить любые проблемы.
Беглый взгляд на курс
В первой части мы собираемся использовать функции PWA по одному. Эти функции, предназначенные для совместного использования, поэтому использование их для реализации конкретного варианта использования - лучший способ изучить их. Основным компонентом PWA является Service Worker, так что это наша отправная точка.
Мы узнаем все о жизненном цикле Service Worker, о том, как браузеры обслуживают несколько версий Service Worker, и мы узнаем об установке и активации Service Worker. Затем мы собираемся создать Service Worker, который дает приложению возможность показывать офлайн-страницу при отключении сети, используя API Cache.
Большинство API-интерфейсов PWA основаны на Promise, поэтому, чтобы сделать код более читаемым, мы будем использовать Async / Await в наших примерах. Затем мы собираемся внедрить Application Download and Installation: мы увидим, как мы можем использовать Service Worker, чтобы полностью загрузить версию веб-сайта на мобильный или рабочий стол пользователя и как обрабатывать установку нескольких версий приложения.
Мы собираемся продемонстрировать преимущества производительности кэширования всего приложения локально, моделируя медленную сеть и узнаем, как очистить предыдущие версии приложения. Мы также узнаем, как кэшировать данные, специфичные для пользовательского интерфейса, и полученные данные View Model на клиентской стороне с помощью Indexed DB и Service Worker, и мы также увидим, как реализовать фоновую синхронизацию.
В следующем разделе курса рассказывается о app manifest и о том, как настроить этот процесс установки одним щелчком мыши. После этого мы проверим наше приложение с помощью инструмента «Lighthouse tool » и проанализируем сгенерированный отчет.
Последняя часть этого раздела основывается на Web Push и Notifications. В этом разделе мы собираемся настроить сервер Node с возможностями Web Push, а затем мы свяжем его с нашим Service Worker, чтобы реализовать уведомления на мобильных устройствах.
Что вы узнаете на этом курсе?
Вы узнаете, как функции PWA работают в целом, а не только в контексте Angular приложения. Вы узнаете, как анализировать и устранять неполадки PWA с помощью инструментов Chrome PWA Dev. Вы также узнаете, как использовать Angular Service Worker и все функции Angular CLI PWA для создания веб-приложений с поддержкой PWA.
Что вы сможете сделать в конце этого курса?
Вы сможете проектировать, разрабатывать и устранять неполадки PWA, а также будете знать, как быстро добавлять функции PWA в Angular приложение, используя Angular CLI и Angular Service Worker.
