Начало работы с прогрессивными веб-приложениями

  • Статья

Progressive Web Apps (PWA) — это приложения, которые вы создаете с использованием веб-технологий и которые можно устанавливать и запускать на всех устройствах из одной базы кода.

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

Это руководство предназначено для веб-разработчиков, которые хотят научиться создавать PWA. Дополнительные сведения об установке и запуске PWA см. в статье Установка PWA в разделе Использование прогрессивных веб-приложений в Microsoft Edge.

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

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

Предварительные условия

  • Установите Visual Studio Code , чтобы изменить исходный код PWA.
  • Установите Node.js , чтобы использовать его в качестве локального веб-сервера.
  • Опыт работы с HTML, CSS и JavaScript также является плюсом.

Архитектура PWA

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

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

  • Внутренний код: конечные точки, необходимые приложению при подключении к Интернету для получения динамического содержимого, которое может храниться в базе данных на сервере.
  • Интерфейсный код: ресурсы, необходимые для установки приложения на устройстве пользователя, например HTML, CSS и код JavaScript.

Серверный код может использовать выбранные серверные языки, такие как ASP.NET, Java, Node.js или PHP. Однако обратите внимание, что серверные конечные точки могут даже не требоваться в зависимости от приложения, которое вы создаете. PWA, который вы создадите в этом руководстве, не содержит серверного кода, так как приложение выполняется исключительно на устройстве, на котором оно установлено, и не требует каких-либо данных на стороне сервера.

Интерфейсный код использует только HTML, CSS, JavaScript и манифест JSON.

Html используется для описания содержимого в приложении, например текста, изображений, текстовых полей или кнопок, отображаемых в пользовательском интерфейсе. Затем с помощью CSS можно упорядочить HTML-содержимое в макете и предоставить стили элементам. JavaScript используется для добавления взаимодействий с пользователем в пользовательский интерфейс. И, наконец, вы используете json-файл манифеста, который описывает приложение для операционной системы узла.

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

Помимо кода пользовательского интерфейса, вы также можете использовать JavaScript, чтобы сделать приложение более быстрым, надежным и независимым от сети с помощью рабочего файла службы. Наконец, интерфейсный код также содержит файл манифеста JSON, который описывает приложение для операционной системы узла.

На следующей схеме показана высокоуровневая архитектура PWA. Веб-сервер находится на одной стороне PWA, а устройство — с другой. Устройство содержит интерфейсный код, включая HTML, CSS, JavaScript, рабочую роль службы и манифест:

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

Шаг 1. Запуск веб-сервера

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

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

  1. Создайте на компьютере папку, в которой будет выполняться веб-сервер.

    Это можно сделать, открыв командную строку и введя следующее:

    cd path/to/your/dev/folder
mkdir MySamplePWA
cd MySamplePWA

  2. Запустите сервер с помощью библиотеки http-server Node.js:

    npx http-server

Теперь у вас есть простой локальный веб-сервер, работающий по адресу http://localhost:8080.

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

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

Вы также можете разместить свой веб-сайт на GitHub Pages , который также поддерживает HTTPS.

В целях отладки Microsoft Edge также позволяет localhost веб-серверу использовать API PWA без HTTPS.

Шаг 2. Создание начальной страницы приложения

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

  1. Откройте Visual Studio Code, выберите Файл>Открыть папку , а затем выберите каталог, MySamplePWA созданный на предыдущем шаге.

  2. Создайте новый файл в проекте, нажав клавиши CTRL+N, добавьте следующее содержимое и сохраните файл как index.html:

    <!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" />
    <title>Temperature converter</title>
  </head>
  <body>
    <h1>Temperature converter</h1>
  </body>
</html>

  3. Перейдите на страницу http://localhost:8080 , чтобы просмотреть приложение:

    Запуск нового PWA на localhost

Сейчас приложение запускается в браузере и не может быть установлено. Чтобы сделать приложение устанавливаемым, приложению требуется манифест веб-приложения.

Шаг 3. Создание манифеста веб-приложения

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

Чтобы добавить манифест приложения в приложение, выполните следующие действия:

  1. В Visual Studio Code нажмите клавиши CTRL+N , чтобы создать файл со следующим содержимым, и сохраните файл как 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"
        }
    ]
}

  2. Добавьте изображение значка приложения 512x512 пикселей с именем icon512.png в проект. Образец можно использовать для тестирования.

  3. В Visual Studio Code откройте index.htmlи добавьте следующий код в <head> тег.

    <link rel="manifest" href="/manifest.json">

Приведенный выше фрагмент кода связывает новый файл манифеста веб-приложения с веб-сайтом.

Теперь проект VS Code должен выглядеть примерно так:

Снимок экрана: VS Code с примером проекта PWA с файлами index.html, manifest.json и значками

Шаг 4. Продолжение создания пользовательского интерфейса приложения

Теперь, когда у вашего приложения есть файл манифеста веб-приложения и начальная страница, пришло время создать основную функциональность приложения.

На этом шаге руководства мы создадим приложение для преобразования единиц измерения температуры.

  1. Чтобы создать основное содержимое пользовательского интерфейса, скопируйте следующий HTML-код и вставьте его в index.html файл, заменив <h1> HTML-тег:

    <form id="converter">
  <label for="input-temp">temperature</label>
  <input type="text" id="input-temp" name="input-temp" value="20" />
  <label for="input-unit">from</label>
  <select id="input-unit" name="input-unit">
    <option value="c" selected>Celsius</option>
    <option value="f">Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <label for="output-unit">to</label>
  <select id="output-unit" name="output-unit">
    <option value="c">Celsius</option>
    <option value="f" selected>Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
</form>

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

  2. Чтобы заставить преобразователь работать, используйте код JavaScript. Создайте в проекте новый файл с именем converter.js и добавьте в него следующий код:

    const inputField = document.getElementById('input-temp');
const fromUnitField = document.getElementById('input-unit');
const toUnitField = document.getElementById('output-unit');
const outputField = document.getElementById('output-temp');
const form = document.getElementById('converter');

function convertTemp(value, fromUnit, toUnit) {
  if (fromUnit === 'c') {
    if (toUnit === 'f') {
      return value * 9 / 5 + 32;
    } else if (toUnit === 'k') {
      return value + 273.15;
    }
    return value;
  }
  if (fromUnit === 'f') {
    if (toUnit === 'c') {
      return (value - 32) * 5 / 9;
    } else if (toUnit === 'k') {
      return (value + 459.67) * 5 / 9;
    }
    return value;
  }
  if (fromUnit === 'k') {
    if (toUnit === 'c') {
      return value - 273.15;
    } else if (toUnit === 'f') {
      return value * 9 / 5 - 459.67;
    }
    return value;
  }
  throw new Error('Invalid unit');
}

form.addEventListener('input', () => {
  const inputTemp = parseFloat(inputField.value);
  const fromUnit = fromUnitField.value;
  const toUnit = toUnitField.value;

  const outputTemp = convertTemp(inputTemp, fromUnit, toUnit);
  outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase();
});

  3. index.html Откройте файл еще раз и добавьте следующий код после закрывающего </form> тега, чтобы загрузить файл JavaScript:

    <script src="converter.js"></script>

  4. Теперь добавьте в приложение стиль CSS, чтобы сделать его более привлекательным. Создайте в проекте новый файл с именем converter.css и добавьте в него следующий код:

    html {
  background: rgb(243, 243, 243);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 15pt;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
}

#converter {
  width: 15rem;
  padding: 2rem;
  border-radius: .5rem;
  box-shadow: 0 0 2rem 0 #0001;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#converter input, #converter select {
  font-family: inherit;
  font-size: inherit;
  margin-block-end: 1rem;
  text-align: center;
  width: 10rem;
}

#converter #output-temp {
  font-size: 2rem;
  font-weight: bold;
}

  5. Откройте index.html еще раз и сослаться на новый CSS-файл в нем, добавив следующий код в <head> тег:

    <link rel="stylesheet" href="converter.css">

    Теперь проект Visual Studio Code должен выглядеть примерно так:

    Пример проекта PWA в Visual Studio Code с файлами index.html, converter.js, converter.css и manifest.json

  6. Перейдите на страницу http://localhost:8080 , чтобы просмотреть приложение:

    Запуск нового PWA с интерфейсным кодом на локальном узле

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

Шаг 5. Добавление рабочей роли службы

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

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

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

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

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

  1. В Visual Studio Code создайте новый файл (CTRL+N), добавьте следующее содержимое и сохраните файл как 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.
        }
    }
  })());
});

    Файл sw.js будет выступать в качестве рабочей роли службы PWA. Приведенный выше код прослушивает install событие, которое активируется при установке приложения пользователем, и использует его для кэширования ресурсов, необходимых приложению для автономной работы, например начальной HTML-страницы, файла JavaScript конвертера и CSS-файла преобразователя.

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

  2. Откройте index.html и добавьте следующий код в конец тега <body> , чтобы зарегистрировать рабочую роль службы:

    <script>
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', { scope: '/' });
}
</script>

Чтобы убедиться, что рабочая роль службы запущена, выполните приведенные далее действия.

  1. В Microsoft Edge перейдите по адресу http://localhost:8080.

  2. Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.

  3. Откройте средство "Приложение ", а затем щелкните Служебные рабочие роли. Если рабочая роль службы не отображается, обновите страницу.

    Средство приложения DevTools с панелью

  4. Просмотрите кэш рабочей роли службы, развернув хранилище кэша и выбрав temperature-converter-v1. Должны отображаться все ресурсы, кэшированные рабочей ролью службы. Ресурсы, кэшируемые рабочей ролью службы, включают значок приложения, манифест приложения и начальную страницу.

    Средства разработки, показывающие, где следует просматривать кэшированные ресурсы

  5. Попробуйте использовать PWA в качестве автономного приложения. В средствах разработки откройте средство "Сеть" и измените значение регулирования на Автономно.

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

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

Шаг 6. Установка приложения

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

В Microsoft Edge после обновления приложения в адресной строке появится кнопка Доступ к приложению . При нажатии кнопки Доступ к приложению вам будет предложено установить приложение локально.

Microsoft Edge с примером PWA на вкладке. Кнопка

Нажмите кнопку Установить , чтобы установить приложение локально. После завершения установки приложение отобразится в собственном окне, а значок приложения — на панели задач.

Пример PWA, установленный и запущенный в собственном окне

Дополнительные сведения об установке PWA см. в статье Использование прогрессивных веб-приложений в Microsoft Edge.

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

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

Когда пользователи устанавливают приложения, у них есть определенные ожидания в том, что эти приложения могут делать. Например:

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

Чтобы создать отличный PWA, ознакомьтесь с рекомендациями по PWA.

См. также