Прогрессивные веб-приложения: исчерпывающий набор ресурсов

Прогрессивные веб-приложения: исчерпывающий набор ресурсов

Прогрессивные веб-приложения: что, как и почему

𝔉𝔲𝔩𝔩𝔖𝔱𝔞𝔠𝔨 𝔇𝔢𝔳𝔢𝔩𝔬𝔭𝔢𝔯 | 𝔓𝔯𝔬𝔤𝔯𝔞𝔪𝔪𝔢𝔯 | 𝔖𝔈𝔒 𝔢𝔵𝔭𝔢𝔯𝔱's photo
𝔉𝔲𝔩𝔩𝔖𝔱𝔞𝔠𝔨 𝔇𝔢𝔳𝔢𝔩𝔬𝔭𝔢𝔯 | 𝔓𝔯𝔬𝔤𝔯𝔞𝔪𝔪𝔢𝔯 | 𝔖𝔈𝔒 𝔢𝔵𝔭𝔢𝔯𝔱

Published on Jul 1, 2021

5 min read

Вступление

Хотите начать работу с прогрессивными веб-приложениями, но не знаете, с чего начать? На этой странице перечислены лучшие известные нам ресурсы, которые помогут вам разобраться в прогрессивных веб-приложениях (PWA), приступить к работе и изучить вещи более подробно.

Не забудьте добавить эту страницу в закладки, так как это живой документ, который мы будем время от времени добавлять.

Прогрессивные веб-приложения

Эти статьи знакомят с концепцией прогрессивных веб-приложений и служат отправной точкой, чтобы узнать о них больше.

31.png

Концепции пользовательского интерфейса

Одна из лучших особенностей PWA заключается в том, что их можно добавлять на главный экран вашего устройства Android, как это делают собственные приложения. В этом разделе содержатся соответствующие статьи, посвященные возможности «Добавить на главный экран», а также несколько статей о том, как обеспечить бесперебойную работу пользовательского интерфейса веб-приложения.

Не в сети

Прогрессивные веб-приложения могут работать в автономном режиме, как и собственные приложения. В первую очередь это происходит с помощью функции под названием «Service Worker». Сервис-воркеры великолепны, и помимо того, что они используются для автономной работы веб-приложений, они также необходимы для других функций, таких как push-уведомления и фоновая синхронизация.

  • Что нам нужно от Интернета и что ему нужно от нас: 43-минутное видео от Shwetank Dixit, представляющее PWA с точки зрения пользователей Интернета в Индии. Сервис воркеров начинается на 18 минуте.

  • Мгновенная загрузка : создание прогрессивных веб-приложений, ориентированных на офлайн : 45-минутное видео Джейка Арчибальда, одного из разработчиков Service Workers.

  • Service Workers Введение: отличное введение от команды Google о том, что вам нужно знать, чтобы начать работу с Service Workers.

  • Автономная поваренная книга: Джейк Арчибальд описывает различные варианты использования автономной функциональности, а также полезные иллюстрации и примеры кода для кода службы woker. Стоит посмотреть!

Всплывающее уведомление

Push-уведомления полезны для уведомления пользователя о важных, актуальных или своевременных событиях, даже если ваш сайт не открыт в браузере или даже когда браузер закрыт. Благодаря спецификации Push API и Service Workers вы, наконец, можете реализовать это и в своем прогрессивном веб-приложении. Будьте осторожны, чтобы не спамить ваших пользователей!

На пути к лучшим приложениям: что и почему прогрессивные веб-приложения : 43-минутное видео, в котором Андреас Бовенс представляет PWA, обслуживающего персонала и - примерно 23-минутную отметку - Push-уведомления.

Уведомления Web Push : своевременные, актуальные и точные : введение Google в уведомления Web Push.

Отправка документации API на MDN

Продолжайте продвигать его с помощью API Web Push: Крис Миллс объясняет API Web Push.

Спецификация Push API

Инструменты и библиотеки

В этом разделе перечислен ряд инструментов, которые могут сэкономить вам много времени и усилий при написании кода для ваших 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: Отличная служебная программа для служебного работника / клиента.

hashnode

Витрины, тематические исследования и многое другое

Посмотрите, что делают другие с прогрессивными веб-приложениями. Получите вдохновение и посмотрите, как это помогло другим в ключевых бизнес-показателях.

  • PWA.Rocks: выставка лучших прогрессивных веб-приложений в мире. Он поддерживается командой Opera Developer Relations, и мы принимаем запросы на извлечение, если у вас есть великолепно адаптивный PWA. Помните, что сайты не предназначены только для мобильных устройств, поэтому лучшие PWA отлично смотрятся на компьютерах и устройствах.

  • Google PWA Showcase: витрина Google, показывающая компании, адаптированные к PWA.

  • Экономическое обоснование прогрессивных веб-приложений: Джейсон Григсби приводит убедительные аргументы в пользу преимуществ PWA для бизнеса.

  • PWA африканская перспектива: мы интервьюируем двух великих разработчиков из Нигерии и Кении о PWA. Прочтите их мысли о том, как PWA могут помочь решить проблемы в этом регионе.

pwa-engaging.png

Книги

Книги, которые помогут вам узнать о PWA.

Прогрессивные веб-приложения: эта книга научит вас дизайну PWA и навыкам, необходимым для создания быстрых и надежных веб-сайтов, шаг за шагом рассмотрев реальные примеры.

 
Share this