Примеры прогрессивных веб-приложений

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

Первым примером, используемым при начале работы, является пример преобразователя температуры.

Пример см. в файле Readme. Некоторые примеры требуют настройки и не работают, если просто щелкнуть ссылку приложения ниже.

Большинство из этих демонстраций PWA находятся в репозитории MicrosoftEdge и Demos .

1DIV

1DIV — это редактор CSS, который позволяет пользователям создавать рисунки, создавая только один HTML-элемент и код CSS.

Приложение 1DIV

Файл сведений и исходный код, Приложение.

1DIV использует следующие функции:

Функция Описание Документация
Наложение элементов управления окнами 1DIV использует пространство, обычно зарезервированное строкой заголовка, для отображения логотипа, поля поиска и кнопки. Отображение содержимого в области заголовка с помощью наложения элементов управления окнами

клиент Email

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

Файл сведений и исходный код, Приложение.

Email клиент использует следующие функции:

Функция Описание Документация
Обработка протокола mailto ссылки обрабатываются приложением для создания нового сообщения электронной почты. Обработка протоколов в PWA

Мета-тег заголовка приложения

Демонстрационное веб-приложение для демонстрации мета-тега application-title .

Файл сведений и исходный код, Приложение.

Метатэг заголовка приложения использует следующие функции:

Функция Описание Документация
application-title Метатег PWA вносит изменения в элемент среды <meta name="application-title" content=""> выполнения. application-title в <атрибуте метаимя> в MDN.

Фоновая синхронизация PWA

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

Демонстрация API фоновой синхронизации PWA

Файл сведений и исходный код, Приложение.

Демонстрация API фоновой синхронизации PWA использует следующие функции:

Функция Описание Документация
Фоновая синхронизация Включает использование PWA в автономном режиме; синхронизирует данные с сервером при восстановлении сетевого подключения. Синхронизация и обновление PWA в фоновом режиме

Обработчики файлов PWA

Приложение обработчиков файлов PWA обрабатывает *.txt файлы так же, как и собственное приложение.

Демонстрационная версия приложения

Файл сведений и исходный код, Приложение.

Приложение обработчиков файлов PWA использует следующие функции:

Функция Описание Документация
Обработка файлов Член file_handlers манифеста веб-приложения позволяет PWA обрабатывать типы файлов так же, как это делает собственное приложение. Обработка файлов в PWA

Установщик PWA

PWA, использующий API веб-установки для установки других PWA. Также используется css masonry.

Файл сведений и исходный код, Приложение.

Установщик PWA использует следующие функции:

Функция Описание Документация
API веб-установки Установщик PWA использует navigator.install() API для установки других PWA на устройстве. API веб-установки
Кладка CSS Вместо строгой сетки, которая содержит пробелы ниже более коротких элементов, элементы в следующей строке поднимаются вверх, чтобы заполнить пробелы. Макет кладки

См. также:

Таймер PWA

Имеет кнопку Задать таймер , и вы можете задать длительность таймера.

Файл сведений и исходный код, Приложение.

PWA для выполнения

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

Файл сведений и исходный код, Приложение.

PWAmp

PWAmp — это классический музыкальный проигрыватель, который воспроизводит локальные и удаленные звуковые файлы.

Приложение PWAmp, отображающее кнопки воспроизведения и список песен

Файл сведений и исходный код, Приложение.

PWAmp использует следующие функции:

Функция Описание Документация
Наложение элементов управления окнами Пространство, обычно зарезервированное для строки заголовка, может использоваться PWAmp для отображения визуализации текущей песни. Отображение содержимого в области заголовка с помощью наложения элементов управления окнами
Обработка протокола Ссылки, которые начинаются с, web+amp: можно использовать для совместного использования удаленных песен. Обработка протоколов в PWA
Обработка файлов Аудиофайлы можно открыть напрямую с помощью PWAmp. Например, щелкните правой кнопкой мыши файл, заканчивающийся .mp3 на , и выберите команду Открыть с помощью. Обработка файлов в PWA
Общий веб-ресурс Песни можно предоставить другим приложениям с помощью диалогового окна общего доступа к операционной системе. Предоставление общего доступа к содержимому
Целевой общий доступ Другие приложения могут обмениваться звуковыми файлами с PWAmp через диалоговое окно общего доступа к операционной системе. Получение общего содержимого
Виджет Мини-приложение мини-проигрывателя можно установить на панели мониторинга Windows 11 Widgets, чтобы просмотреть текущую песню. Отображение мини-приложения PWA на доске мини-приложений Windows
Боковой панели PWAmp можно закрепить на боковой панели в Microsoft Edge. Создание PWA для боковой панели в Microsoft Edge

Преобразователь температуры

Простое демонстрационное приложение PWA, которое преобразует температуру. См . пример преобразователя температуры.

Файл сведений и исходный код, Приложение.

wami

wami может применять последовательность действий по обработке изображений, таких как обрезка, изменение размера, поворот или добавление эффектов на пакет изображений.

Приложение wami

Файл сведений и исходный код, Приложение.

Wami использует следующие функции:

Функция Описание Документация
Наложение элементов управления окнами Пространство, обычно зарезервированное для строки заголовка, может использоваться wami. Отображение содержимого в области заголовка с помощью наложения элементов управления окнами
Доступ к файловой системе Wami может сохранять преобразованные образы обратно на диск. API доступа к файловой системе

BPM Techno

BPM Techno анализирует звук с помощью микрофона устройства и отображает счетчик ударов в минуту (BPM) в режиме реального времени.

Приложение BPM Techno

Файл сведений и исходный код, Приложение.

Эта демонстрация находится в репозитории webmaxru/ bpm-counter .

BPM Techno использует следующие функции:

Функция Описание Документация
Ярлыки BPM Techno определяет ярлык, который позволяет пользователям передавать звуковой файл в приложение. Определение ярлыков приложений (меню с длинным нажатием или щелчком правой кнопкой мыши)
Обработка файлов BPM Techno изначально обрабатывает *.mp3 файлы. Обработка файлов в PWA
Целевой общий доступ Другие приложения могут обмениваться звуковыми файлами с BPM Techno с помощью диалогового окна общего доступа к операционной системе. Получение общего содержимого
Обработка протокола Приложение обрабатывает web+bpm: URI, которые можно использовать для отправки ссылок на песню для анализа. Обработка протоколов в PWA

Веб-доска

Веб-область — это приложение для рисования.

Веб-доска — это прогрессивное веб-приложение для рисования и интеллектуальной доски

Файл сведений и исходный код, Приложение.

Эта демонстрация находится в репозитории pwa-builder/ web-whiteboard .

Веб-область использует следующие функции:

Функция Описание Документация
Общий веб-ресурс Рисунки можно предоставить другим приложениям с помощью диалогового окна общего доступа к операционной системе. Предоставление общего доступа к содержимому

См. также

  • Last updated on