Примечание.
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
В этих демонстрационных PWA показано, как использовать функции и API, которые могут постепенно улучшать приложения при установке на устройствах.
Первым примером, используемым при начале работы, является пример преобразователя температуры.
Пример см. в файле Readme. Некоторые примеры требуют настройки и не работают, если просто щелкнуть ссылку приложения ниже.
Большинство из этих демонстраций PWA находятся в репозитории MicrosoftEdge и Demos .
1DIV
1DIV — это редактор CSS, который позволяет пользователям создавать рисунки, создавая только один HTML-элемент и код CSS.
- Приложение
- /1DIV/ — каталог исходного кода.
1DIV использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Наложение элементов управления окнами | 1DIV использует пространство, обычно зарезервированное строкой заголовка, для отображения логотипа, поля поиска и кнопки. | Отображение содержимого в области заголовка с помощью наложения элементов управления окнами |
клиент Email
Имитированный клиент электронной почты PWA, демонстрирующий использование обработчиков протокола PWA.
- Приложение
- /email-client/ — каталог исходного кода.
Email клиент использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Обработка протокола |
mailto ссылки обрабатываются приложением для создания нового сообщения электронной почты. |
Обработка протоколов в PWA |
Мета-тег заголовка приложения
Демонстрационное веб-приложение для демонстрации мета-тега application-title .
- Приложение
- /pwa-application-title/ — каталог исходного кода.
Метатэг заголовка приложения использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
application-title Метатег |
PWA вносит изменения в элемент среды <meta name="application-title" content=""> выполнения. |
application-title в <атрибуте метаимя> в MDN. |
Преобразователь температуры
Простое демонстрационное приложение PWA, которое преобразует температуру. См . пример преобразователя температуры.
- Приложение
- /temperature-converter/ — каталог исходного кода.
Установщик PWA
PWA, использующий API веб-установки для установки других PWA. Также используется css masonry.
- Приложение установщика PWA
- /pwa-installer/ — каталог исходного кода.
Установщик PWA использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| API веб-установки | Установщик PWA использует navigator.install() API для установки других PWA на устройстве. |
API веб-установки |
| Кладка CSS | Вместо строгой сетки, которая содержит пробелы ниже более коротких элементов, элементы в следующей строке поднимаются вверх, чтобы заполнить пробелы. | Макет кладки |
См. также:
- Microsoft Edge: пробная версия для разработки api веб-установки
- API веб-установки — средство объяснения.
Таймер PWA
Имеет кнопку Задать таймер , и вы можете задать длительность таймера.
- Приложение
- /pwa-timer/ — каталог исходного кода.
PWA для выполнения
Создайте списки задач локально в браузере или путем установки приложения. Щелкните ссылку О программе в отрисованном демоверсии.
- Приложение
- /pwa-to-do/ — каталог исходного кода.
PWAmp
PWAmp — это классический музыкальный проигрыватель, который воспроизводит локальные и удаленные звуковые файлы.
- Приложение
- /pwamp/ — каталог исходного кода.
PWAmp использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Наложение элементов управления окнами | Пространство, обычно зарезервированное для строки заголовка, может использоваться PWAmp для отображения визуализации текущей песни. | Отображение содержимого в области заголовка с помощью наложения элементов управления окнами |
| Обработка протокола | Ссылки, которые начинаются с, web+amp: можно использовать для совместного использования удаленных песен. |
Обработка протоколов в PWA |
| Обработка файлов | Аудиофайлы можно открыть напрямую с помощью PWAmp. Например, щелкните правой кнопкой мыши файл, заканчивающийся .mp3 на , и выберите команду Открыть с помощью. |
Обработка файлов в PWA |
| Общий веб-ресурс | Песни можно предоставить другим приложениям с помощью диалогового окна общего доступа к операционной системе. | Предоставление общего доступа к содержимому |
| Целевой общий доступ | Другие приложения могут обмениваться звуковыми файлами с PWAmp через диалоговое окно общего доступа к операционной системе. | Получение общего содержимого |
| Виджет | Мини-приложение мини-проигрывателя можно установить на панели мониторинга Windows 11 Widgets, чтобы просмотреть текущую песню. | Отображение мини-приложения PWA на доске мини-приложений Windows |
| Боковая панель | PWAmp можно закрепить на боковой панели в Microsoft Edge. | Создание PWA для боковой панели в Microsoft Edge |
wami
wami может применять последовательность действий по обработке изображений, таких как обрезка, изменение размера, поворот или добавление эффектов на пакет изображений.
- Приложение
- /wami/ — каталог исходного кода.
Wami использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Наложение элементов управления окнами | Пространство, обычно зарезервированное для строки заголовка, может использоваться wami. | Отображение содержимого в области заголовка с помощью наложения элементов управления окнами |
| Доступ к файловой системе | Wami может сохранять преобразованные образы обратно на диск. | API доступа к файловой системе |
Список моих фильмов
Эта простая демонстрация PWA позволяет выполнять поиск вымыщенных фильмов и хранить их локально.
- Приложение
-
/movies-db-pwa/ — каталог исходного кода.
- Нет файла Readme.
В списке фильмов используются следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Фоновая синхронизация | Если пользователь находится в автономном режиме при отображении дополнительных сведений о фильме, приложение использует фоновую синхронизацию для получения сведений позже, когда пользователь снова будет подключен к сети. | Использование API фоновой синхронизации для синхронизации данных с сервером |
| Уведомления | При получении сведений о фильме отправляется уведомление, чтобы пользователь смог повторно взаимодействовать с приложением. | Отображение уведомлений в центре уведомлений |
Мои треки
Мои треки полезны для визуализации GPS-треков (*.gpx файлов) на карте.
- Приложение — см. раздел Сведений о настройке.
- /mytracks/ — каталог исходного кода.
My Tracks использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Наложение элементов управления окнами | Пространство, обычно зарезервированное для строки заголовка, используется службой "Мои дорожки" для отображения собственной панели поиска. | Отображение содержимого в области заголовка с помощью наложения элементов управления окнами |
| Обработка протокола | My Tracks обрабатывает URI, которые начинаются с geo: протокола для отображения расположений на карте. |
Обработка протоколов в PWA |
| Обработка файлов | My Tracks изначально обрабатывает *.gpx файлы. |
Обработка файлов в PWA |
| Ярлыки | My Tracks определяет ярлыки, которые можно легко скрыть и отобразить все дорожки на карте. | Определение ярлыков приложений (меню с длинным нажатием или щелчком правой кнопкой мыши) |
BPM Techno
BPM Techno анализирует звук с помощью микрофона устройства и отображает счетчик ударов в минуту (BPM) в режиме реального времени.
- Приложение
- /bpm-counter/ — каталог исходного кода.
Эта демонстрация находится в репозитории webmaxru/ bpm-counter .
BPM Techno использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Ярлыки | BPM Techno определяет ярлык, который позволяет пользователям передавать звуковой файл в приложение. | Определение ярлыков приложений (меню с длинным нажатием или щелчком правой кнопкой мыши) |
| Обработка файлов | BPM Techno изначально обрабатывает *.mp3 файлы. |
Обработка файлов в PWA |
| Целевой общий доступ | Другие приложения могут обмениваться звуковыми файлами с BPM Techno с помощью диалогового окна общего доступа к операционной системе. | Получение общего содержимого |
| Обработка протокола | Приложение обрабатывает web+bpm: URI, которые можно использовать для отправки ссылок на песню для анализа. |
Обработка протоколов в PWA |
Веб-доска
Веб-область — это приложение для рисования.
- Приложение
- /web-whiteboard/ — каталог исходного кода.
Эта демонстрация находится в репозитории pwa-builder/ web-whiteboard .
Веб-область использует следующие функции:
| Функция | Описание | Документация |
|---|---|---|
| Общий веб-ресурс | Рисунки можно предоставить другим приложениям с помощью диалогового окна общего доступа к операционной системе. | Предоставление общего доступа к содержимому |
См. также
- Клонируйте репозиторий демонстраций Edge на диск в примере кода для средств разработки.