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

  • Статья

Прогрессивные веб-приложения (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 по умолчанию, но если узел этого не выполняет, Let's Encrypt предлагает бесплатную альтернативу для создания необходимых сертификатов.

Например, можно создать бесплатную учетную запись Azure. Если веб-сайт размещен на Служба приложений 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-файл, содержащий метаданные о приложении, такие как его имя, описание, значки и различные функции операционной системы, которые он использует.

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

  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. Продолжение создания пользовательского интерфейса приложения

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

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

  1. Чтобы создать содержимое пользовательского интерфейса main, скопируйте следующий КОД 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 и обеспечивают сценарии, которые ранее были ограничены собственными приложениями, в том числе:

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

Чтобы Microsoft Edge мог установить приложение, ваше приложение должно иметь рабочий файл службы.

Рабочая роль службы определяется в файле 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.

См. также