Прогрессивные веб-приложения: исчерпывающий набор ресурсов
Прогрессивные веб-приложения: что, как и почему
Вступление
Хотите начать работу с прогрессивными веб-приложениями, но не знаете, с чего начать? На этой странице перечислены лучшие известные нам ресурсы, которые помогут вам разобраться в прогрессивных веб-приложениях (PWA), приступить к работе и изучить вещи более подробно.
Не забудьте добавить эту страницу в закладки, так как это живой документ, который мы будем время от времени добавлять.
Прогрессивные веб-приложения
Эти статьи знакомят с концепцией прогрессивных веб-приложений и служат отправной точкой, чтобы узнать о них больше.
Прогрессивные веб-приложения: будущее приложений : 20-минутное видео с презентацией Брюса Лоусона из Opera, в котором рассказывается об общих «почему» и «что» о PWA.
Прогрессивные веб-приложения (Chrome Dev Summit 2015) : Алекс Рассел (Google) и Андреас Бовенс (Opera) представляют концепции, код и кросс-браузерный характер PWA.
Прогрессивные веб-приложения: избегая вкладок, не теряя души: оригинальное сообщение в блоге Алекса Рассела, в котором излагается концепция PWA. Обязательно к прочтению.
Прогрессивные веб-приложения в Google Web Fundamentals: это исчерпывающий набор руководств по различным аспектам разработки PWA от команды Google.
Начало работы с прогрессивными веб-приложениями: руководство Адди Османи по началу работы с PWA
Руководство по прогрессивным веб-приложениям для новичков: хорошая вводная статья от Smashing Magazine
Прогрессивные веб-приложения : интервью с экспертом по PWA Хенриком Йоретегом, который работал со своими клиентами над проектированием, созданием и обучением команд по созданию эффективных мобильных веб-приложений.
Концепции пользовательского интерфейса
Одна из лучших особенностей PWA заключается в том, что их можно добавлять на главный экран вашего устройства Android, как это делают собственные приложения. В этом разделе содержатся соответствующие статьи, посвященные возможности «Добавить на главный экран», а также несколько статей о том, как обеспечить бесперебойную работу пользовательского интерфейса веб-приложения.
Добавление на главный экран : Брюс Лоусон о добавлении вашего сайта на мобильный домашний экран.
Обзор команды Google по добавлению на главный экран: хороший обзор параметров, доступных для различных вариантов использования при реализации функции «Добавить на главный экран».
ПЕРЕВЕРНИТЕ свои анимации : важно, чтобы ваш PWA работал плавно. Пол Льюис объясняет, как реализовать плавную анимацию в вашем приложении.
Jankfree : сборник ресурсов, посвященных повышению производительности веб-интерфейса и уменьшению «Jank».
60 кадров в секунду в мобильном Интернете: команда Flipboard обсуждает, как повысить производительность веб-интерфейса на мобильных устройствах со скоростью 60 кадров в секунду.
Не в сети
Прогрессивные веб-приложения могут работать в автономном режиме, как и собственные приложения. В первую очередь это происходит с помощью функции под названием «Service Worker». Сервис-воркеры великолепны, и помимо того, что они используются для автономной работы веб-приложений, они также необходимы для других функций, таких как push-уведомления и фоновая синхронизация.
Что нам нужно от Интернета и что ему нужно от нас: 43-минутное видео от Shwetank Dixit, представляющее PWA с точки зрения пользователей Интернета в Индии. Сервис воркеров начинается на 18 минуте.
Мгновенная загрузка : создание прогрессивных веб-приложений, ориентированных на офлайн : 45-минутное видео Джейка Арчибальда, одного из разработчиков Service Workers.
Service Workers Введение: отличное введение от команды Google о том, что вам нужно знать, чтобы начать работу с Service Workers.
Автономная поваренная книга: Джейк Арчибальд описывает различные варианты использования автономной функциональности, а также полезные иллюстрации и примеры кода для кода службы woker. Стоит посмотреть!
Service Worker: Маленький помощник Санты по производительности : Фил Нэш описывает Service Worker на практическом примере. Он также содержит отличный пример кеширования веб-шрифтов для использования в автономном режиме с помощью Service Workers.
Использование Service Workers : введение команды Mozilla в Service Workers на MDN. Он содержит полезную инфографику о различных частях жизненного цикла Service Worker и многое другое.
Создание сервис-воркера: фантастическая статья Лизы Дэнджер Гарднер, в которой подробно рассказывается о сервис-воркерах.
serviceworke.rs : сайт Mozilla, на котором подробно описаны различные стратегии кэширования и варианты использования, а также примеры кода.
Автономное хранилище для прогрессивных веб-приложений: Адди Османи перечисляет ряд библиотек и инструментов, доступных для автономной работы веб-приложений.
Руководство по копированию и вставке для вашего первого сервис-воркера : Реми Шарп пишет о том, как быстро начать работу.
Разработка автономных веб-приложений : помимо полезных советов по работе в автономном режиме, эта статья поможет вам по-другому взглянуть на автономный режим как на состояние пользователя.
Всплывающее уведомление
Push-уведомления полезны для уведомления пользователя о важных, актуальных или своевременных событиях, даже если ваш сайт не открыт в браузере или даже когда браузер закрыт. Благодаря спецификации Push API и Service Workers вы, наконец, можете реализовать это и в своем прогрессивном веб-приложении. Будьте осторожны, чтобы не спамить ваших пользователей!
На пути к лучшим приложениям: что и почему прогрессивные веб-приложения : 43-минутное видео, в котором Андреас Бовенс представляет PWA, обслуживающего персонала и - примерно 23-минутную отметку - Push-уведомления.
Уведомления Web Push : своевременные, актуальные и точные : введение Google в уведомления Web Push.
Отправка документации API на MDN
Продолжайте продвигать его с помощью API Web Push: Крис Миллс объясняет API Web Push.
Инструменты и библиотеки
В этом разделе перечислен ряд инструментов, которые могут сэкономить вам много времени и усилий при написании кода для ваших PWA.
sw-toolbox: полезная библиотека с учетом множества различных сценариев использования кеширования.
sw-precache: инструмент для предварительного кэширования всех статических ресурсов для использования в автономном режиме.
Lighthouse : показатели аудита и производительности для прогрессивных веб-приложений.
Генератор манифестов: инструмент, который автоматически генерирует файл веб-манифеста.
manifest-json: еще один инструмент (использующий командную строку) для создания файла веб-манифеста.
generator-pwa: йоменский генератор для базового приложения PWA.
UpUp: прочтите статью автора библиотеки о том, как ее использовать.
Web Starter Kit: шаблон для веб-разработки, включая библиотеки sw-toolbox и sw-preache.
Fetch-sync: Fetch Sync позволяет передавать запросы на выборку через API фоновой синхронизации, чтобы они выполнялись, если выполняются, когда UA находится в автономном режиме.
Msgr: Отличная служебная программа для служебного работника / клиента.
Витрины, тематические исследования и многое другое
Посмотрите, что делают другие с прогрессивными веб-приложениями. Получите вдохновение и посмотрите, как это помогло другим в ключевых бизнес-показателях.
PWA.Rocks: выставка лучших прогрессивных веб-приложений в мире. Он поддерживается командой Opera Developer Relations, и мы принимаем запросы на извлечение, если у вас есть великолепно адаптивный PWA. Помните, что сайты не предназначены только для мобильных устройств, поэтому лучшие PWA отлично смотрятся на компьютерах и устройствах.
Google PWA Showcase: витрина Google, показывающая компании, адаптированные к PWA.
Экономическое обоснование прогрессивных веб-приложений: Джейсон Григсби приводит убедительные аргументы в пользу преимуществ PWA для бизнеса.
PWA африканская перспектива: мы интервьюируем двух великих разработчиков из Нигерии и Кении о PWA. Прочтите их мысли о том, как PWA могут помочь решить проблемы в этом регионе.
Книги
Книги, которые помогут вам узнать о PWA.
Прогрессивные веб-приложения: эта книга научит вас дизайну PWA и навыкам, необходимым для создания быстрых и надежных веб-сайтов, шаг за шагом рассмотрев реальные примеры.