Поделиться через

Начало разработки PWA

Прогрессивное веб-приложение (PWA) — это приложение, которое создается с помощью таких веб-технологий, как HTML, CSS и JavaScript, и которое также можно установить и запустить в различных операционных системах устройств из одной базы кода.

Используя эту статью вместе с примером преобразователя температуры, который предназначен для обучения созданию PWA, вы сможете:

  • Настройте PWA преобразователя температуры, внося незначительные изменения в код примера.

  • Создайте собственный PWA, скопировав и вставив весь каталог примера и тщательно изменив код.

См. также:

Архитектура прогрессивного веб-приложения

На следующей схеме показана высокоуровневая архитектура прогрессивного веб-приложения (PWA):

Схема архитектуры PWA

Слева на устройстве, на котором выполняется интерфейс PWA, есть файлы для внешнего кода PWA.

Справа веб-сервер выполняет внутренний код (или содержимое базы данных) PWA.

Устройство содержит интерфейсный код, включая HTML, CSS, JavaScript, рабочую роль службы и манифест. Это верно независимо от того, используется ли прогрессивное веб-приложение (PWA) как веб-приложение в браузере или как локальное приложение, установленное на устройстве.

Как и обычное веб-приложение, прогрессивное веб-приложение пишется с помощью веб-языков программирования: HTML, CSS и JavaScript, и распространяется среди пользователей с помощью веб-сервера. Если веб-приложение является прогрессивным веб-приложением, пользователь сначала видит веб-приложение в веб-браузере, а в адресной строке также есть кнопка "Доступно приложение ", которая предлагает пользователю установить приложение локально.

Развертывание PWA на рабочем веб-сервере

Чтобы сделать прогрессивное веб-приложение (PWA) доступным для пользователей, разверните прогрессивное веб-приложение (PWA) на веб-сервере, доступном по протоколу HTTPS (в отличие от локальной среды разработки). Веб-сервер отправляет интерфейсный код пользователям и выполняет внутренний код для веб-приложения.

Некоторые части платформы прогрессивного веб-приложения (PWA), например рабочие роли службы, требуют использования HTTPS.

Если у прогрессивного веб-приложения (PWA) нет внутреннего кода, то прогрессивное веб-приложение (PWA) можно обслуживать со статического веб-сервера. Например, преобразователь температуры в https://microsoftedge.github.io/Demos/temperature-converter/ использует статический сервер github.io из GitHub.

В статье Пример преобразователя температуры выполняется и тестируется пример прогрессивного веб-приложения на локальном сервере. Когда ваше собственное прогрессивное веб-приложение будет протестировано и готово к распространению, вы распространяете протестированное PWA среди пользователей через веб-сервер (поставщик веб-хостинга).

Чтобы обновить прогрессивное веб-приложение, повторно разверните новую версию на веб-сервере.

Примеры узлов веб-сервера

При запуске прогрессивного веб-приложения (PWA) его необходимо опубликовать по URL-адресу HTTPS. Многие узлы по умолчанию используют ПРОТОКОЛ HTTPS, но если ваш узел не предлагает HTTPS, Let's Encrypt предлагает бесплатную альтернативу для создания необходимых сертификатов.

Например, можно создать бесплатную учетную запись Azure. Если веб-сайт размещен на Служба приложений Azure Майкрософт, он по умолчанию обслуживается по протоколу HTTPS.

Вы также можете разместить веб-сайт на GitHub Pages (pages.github.com), который поддерживает ПРОТОКОЛ HTTPS. См. документацию по GitHub Pages.

Сведения о локальном узле (http) и рабочем сервере (https)

При использовании локального веб-сервера разработки localhost по адресу URL-адрес обычно начинается с http, а не https. Для ключевых компонентов платформы прогрессивного веб-приложения, таких как рабочие роли служб, требуется использовать протокол HTTPS, а не HTTP.

В целях разработки и отладки Microsoft Edge (или окно, в котором размещено локальное приложение PWA) разрешает адресу запускать API-интерфейсы localhost прогрессивного веб-приложения (PWA) без HTTPS.

Интерфейсные файлы кода (код пользовательского интерфейса)

Прогрессивное веб-приложение (PWA) содержит интерфейсные файлы кода, которые отправляются веб-сервером в браузер на локальном устройстве.

Интерфейсный код — это ресурсы, необходимые для установки приложения на устройстве пользователя, например HTML, CSS и код JavaScript.

Прогрессивное веб-приложение (PWA) обычно включает следующие интерфейсные файлы кода:

  • HTML-файл, описывающий содержимое приложения, например текст, изображения, текстовые поля или кнопки, отображаемые в пользовательском интерфейсе.

  • CSS-файл для организации HTML-содержимого в макете и предоставления стилей элементам.

  • Файл JavaScript для добавления взаимодействий с пользователем в пользовательский интерфейс.

  • Файл манифеста JSON для описания приложения в операционной системе узла.

  • Рабочий файл службы JavaScript для кэширования файлов внешнего кода приложения и выполнения фоновых задач.

Интерфейсный код для прогрессивного веб-приложения (PWA) выполняется с помощью веб-браузера устройства. Собственный пользовательский интерфейс браузера не отображается при запуске приложения в автономном окне, которое представляет собой упрощенное окно браузера с минимальными элементами управления пользовательским интерфейсом браузера.

Внутренний код, файлы, конечные точки и данные (код на стороне сервера)

Прогрессивное веб-приложение (PWA) потенциально имеет внутренний код, который находится и выполняется на веб-сервере.

Как и веб-приложение, прогрессивное веб-приложение может включать серверный код (серверный код), который реализует любые конечные точки API веб-службы, необходимые приложению при подключении к Интернету для получения динамического содержимого, которое может храниться в базе данных на сервере.

Внутренний код для прогрессивного веб-приложения может использовать выбранные серверные языки, например:

  • ASP.NET
  • Java
  • Node.js
  • PHP

Конечные точки API веб-службы на стороне сервера могут не потребоваться в зависимости от приложения, которое вы создаете.

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

В остальных разделах описываются файлы, составляющие образец PWA.

Манифест веб-приложения (manifest.json)

Обычное веб-приложение запускается только в браузере. При добавлении манифеста веб-приложения веб-приложение становится прогрессивным веб-приложением (PWA). Манифест веб-приложения позволяет браузерам, поддерживающим PWA, устанавливать веб-приложение в качестве прогрессивного веб-приложения на устройстве.

Манифест веб-приложения — это JSON-файл, содержащий метаданные о прогрессивном веб-приложении, такие как его имя, описание, значки и различные функции операционной системы, которые он использует. Код JSON описывает приложение для операционной системы узла. Файл манифеста содержит основные сведения о прогрессивном веб-приложении для использования операционной системы устройства.

Имя manifest.json файла является общим соглашением, а не строгим требованием.

Пример manifest.json:

{
  "lang": "en-us",
  "name": "Temperature converter app",
  "short_name": "Temperature converter",
  "description": "A basic temperature converter application that can convert to and from Celsius, Kelvin, and Fahrenheit",
  "start_url": "./",
  "background_color": "#2f3d58",
  "theme_color": "#2f3d58",
  "orientation": "any",
  "display": "standalone",
  "icons": [
      {
          "src": "./icon512.png",
          "sizes": "512x512"
      }
  ]
}

См. также:

Рабочая роль службы для кэширования файлов приложения на локальном устройстве (sw.js)

Прогрессивное веб-приложение (PWA) может использовать файл JavaScript рабочей роли службы (например sw.js, ), чтобы кэшировать интерфейсные файлы пользовательского интерфейса на локальном устройстве. Рабочая роль службы определяется в выделенном файле JavaScript, который загружается приложением (в отличие от основного .js файла, содержащего логику приложения).

Рабочая роль службы — это специализированная веб-рабочая роль, которая может перехватывать сетевые запросы от прогрессивного веб-приложения. Рабочая роль службы включает такие сценарии, как:

  • Поддержка в автономном режиме, включая периодические подключения к Интернету.
  • Расширенное кэширование на устройстве.
  • Выполнение фоновых задач, таких как получение push-сообщений, добавление значков в значок приложения или получение данных с сервера.

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

  • Повышенное быстродействие.
  • Более надежный.
  • Независимо от сети; приложение продолжает работать (в некотором смысле), даже при отсутствии или прерывистом подключении к Интернету.

Этот пример sw.js файла — это рабочая роль службы, которая управляет кэшированием файлов, входящих в PWA-преобразователя температуры, кэшированием файлов на локальный диск и обслуживанием их при отсутствии подключения к Интернету.

sw.js:

const CACHE_NAME = `temperature-converter-v1`;
    
// Use the install event to pre-cache all initial resources.
self.addEventListener('install', event => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    cache.addAll([
      './',
      './converter.js',
      './converter.css'
    ]);
  })());
});

self.addEventListener('fetch', event => {
  event.respondWith((async () => {
    const cache = await caches.open(CACHE_NAME);

    // Get the resource from the cache.
    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) {
      return cachedResponse;
    } else {
        try {
          // If the resource was not in the cache, try the network.
          const fetchResponse = await fetch(event.request);
    
          // Save the resource in the cache and return it.
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        } catch (e) {
          // The network failed
        }
    }
  })());
});

Эта рабочая роль службы явно кэширует три файла:

  • ./ средство index.html
  • ./converter.js
  • ./converter.css

Два дополнительных файла кэшируются автоматически браузером:

  • Файл значка (.png).
  • Файл манифеста (.json).

Прослушивание install события

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

  • Начальная HTML-страница.
  • Основной файл JavaScript приложения, содержащий логику приложения.
  • CSS-файл приложения.

Чтобы включить установку приложения, рабочий файл службы JavaScript позволяет приложению работать в автономном режиме (без подключения к Интернету) путем кэширования необходимых интерфейсных файлов на локальном устройстве.

Прослушивание fetch события

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

Рабочая роль службы возвращает кэшированные ресурсы, чтобы приложение работало в автономном режиме, а в случае сбоя рабочая роль службы пытается скачать файл с сервера.

Рабочая роль службы необязательна

Для установки приложения в Прогрессивном веб-приложении (PWA) не требуется рабочая роль службы для Microsoft Edge. Однако мы рекомендуем включить рабочую роль службы в собственное прогрессивное веб-приложение, чтобы ускорить его работу и сделать приложение более надежным, например, если ваше устройство имеет прерывистое сетевое подключение или находится в автономном режиме.

См. также:

Дальнейшие действия

Выполните действия, описанные в примере преобразователя температуры. Затем, чтобы создать собственное прогрессивное веб-приложение (PWA), можно скопировать, вставить и изменить Demos\temperature-converter каталог. Выборка преобразователя температуры демонстрирует лишь небольшую выборку того, что может сделать прогрессивная веб-приложения (PWA). В этом примере демонстрируется код, важный для любого прогрессивного веб-приложения (PWA), например, если нет подключения к Интернету.

Существуют дополнительные рекомендации для PWA , чтобы прогрессивное веб-приложение (PWA) выглядело как собственное приложение:

  • Интегрируйте приложение в операционную систему, например, обрабатывая файлы.

  • Выполнение нетривиальных вычислительных задач.

  • Отправьте приложение в магазины приложений.

См. также

MDN:

Хостинг:

Образец:

  • Last updated on