Демонстрации прогрессивных веб-приложений
Ознакомьтесь с этими демонстрацией PWA, чтобы узнать, как использовать функции и API, которые могут постепенно улучшать приложения при установке на устройствах.
PWAmp
PWAmp — это классический музыкальный проигрыватель, который воспроизводит локальные и удаленные звуковые файлы.
Приложение, исходный код и файл сведений.
PWAmp использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Наложение элементов управления окнами | Пространство, обычно зарезервированное для строки заголовка, может использоваться PWAmp для отображения визуализации текущей песни. | Отображение содержимого в области заголовка с помощью наложения элементов управления окнами |
| Обработка протокола | Ссылки, которые начинаются с, web+amp: можно использовать для совместного использования удаленных песен. |
Обработка протоколов в прогрессивном веб-приложения |
| Обработка файлов | Аудиофайлы можно открыть напрямую с помощью PWAmp. Например, щелкните правой кнопкой мыши файл, заканчивающийся .mp3 на , и выберите команду Открыть с помощью. |
Обработка файлов в прогрессивном веб-приложения |
| Общий веб-ресурс | Песни можно предоставить другим приложениям с помощью диалогового окна общего доступа к операционной системе. | Общий доступ к содержимому |
| Целевой общий доступ | Другие приложения могут обмениваться звуковыми файлами с PWAmp через диалоговое окно общего доступа к операционной системе. | Получение общего содержимого |
| Виджет | Мини-приложение мини-проигрывателя можно установить на панели мониторинга Windows 11 Widgets, чтобы просмотреть текущую песню. | Создание мини-приложений на основе PWA |
| Боковая панель | PWAmp можно закрепить на боковой панели в Microsoft Edge. | Создание PWA для боковой панели в Microsoft Edge |
Wami
Wami может применять последовательность действий по обработке изображений, таких как обрезка, изменение размера, поворот или добавление эффектов для пакета изображений.
Приложение, исходный код и файл сведений.
Wami использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Наложение элементов управления окнами | Пространство, обычно зарезервированное для строки заголовка, может использоваться wami. | Отображение содержимого в области заголовка с помощью наложения элементов управления окнами |
| Доступ к файловой системе | Wami может сохранять преобразованные образы обратно на диск. | API доступа к файловой системе |
Веб-доска
Веб-область — это приложение для рисования.
Приложение, исходный код и файл сведений.
Веб-область использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Общий веб-ресурс | Рисунки можно предоставить другим приложениям с помощью диалогового окна общего доступа к операционной системе. | Общий доступ к содержимому |
Мои треки
Мои треки полезны для визуализации GPS-треков (*.gpx файлов) на карте.
Приложение, исходный код и файл сведений.
My Tracks использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Наложение элементов управления окнами | Пространство, обычно зарезервированное для строки заголовка, используется службой "Мои дорожки" для отображения собственной панели поиска. | Отображение содержимого в области заголовка с помощью наложения элементов управления окнами |
| Обработка протокола | My Tracks обрабатывает URI, которые начинаются с geo: протокола для отображения расположений на карте. |
Обработка протоколов в прогрессивном веб-приложения |
| Обработка файлов | My Tracks изначально обрабатывает *.gpx файлы. |
Обработка файлов в прогрессивном веб-приложения |
| Ярлыки | My Tracks определяет ярлыки, которые можно легко скрыть и отобразить все дорожки на карте. | Определение ярлыков приложений |
Мои фильмы
Эта простая демонстрация PWA позволяет искать снятые фильмы и хранить их локально.
В разделе "Мои фильмы" используются следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Фоновая синхронизация | Если пользователь находится в автономном режиме при отображении дополнительных сведений о фильме, приложение использует фоновую синхронизацию для получения сведений позже, когда пользователь снова будет подключен к сети. | Использование API фоновой синхронизации для синхронизации данных с сервером |
| Уведомления | При получении сведений о фильме отправляется уведомление, чтобы пользователь смог повторно взаимодействовать с приложением. | Отображение уведомлений в центре уведомлений |
BPM Techno
BPM Techno анализирует звук с помощью микрофона устройства и отображает счетчик ударов в минуту (BPM) в режиме реального времени.
Приложение, исходный код и файл сведений.
BPM Techno использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Ярлыки | BPM Techno определяет ярлык, который позволяет пользователям передавать звуковой файл в приложение. | Определение ярлыков приложений |
| Обработка файлов | BPM Techno изначально обрабатывает *.mp3 файлы. |
Обработка файлов в прогрессивном веб-приложения |
| Целевой общий доступ | Другие приложения могут обмениваться звуковыми файлами с BPM Techno с помощью диалогового окна общего доступа к операционной системе. | Получение общего содержимого |
| Обработка протокола | Приложение обрабатывает web+bpm: URI, которые можно использовать для отправки ссылок на песню для анализа. |
Обработка протоколов в прогрессивном веб-приложения |
1DIV
1DIV — это редактор CSS, который позволяет пользователям создавать рисунки только с одним элементом HTML и кодом CSS.
Приложение, исходный код и файл сведений.
1DIV использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Наложение элементов управления окнами | 1DIV использует пространство, обычно зарезервированное строкой заголовка, для отображения логотипа, поля поиска и кнопки. | Отображение содержимого в области заголовка с помощью наложения элементов управления окнами |
См. также
- Скачайте или клонируйте репозиторий демонстраций в примере кода для средств разработки.