Прогрессивные веб-приложения для настольных компьютеров (PWA) — это отличный кроссплатформенный и кроссбраузерный способ создания приложений с моделью безопасности, в центре которой находятся безопасность и конфиденциальность пользователей, а также встроенная функция обмена данными благодаря присущей веб-технологиям возможности связывания. Создавайте новые или улучшайте существующие веб-приложения с помощью современных API, чтобы обеспечить им возможности, надежность и простоту установки, аналогичные приложениям для настольных компьютеров. PWA — лучший способ распространения веб-приложений для ChromeOS.
В ChromeOS возможности веб-платформы находятся в центре внимания; веб-приложения являются ключевой функцией платформы. Установленные PWA отображаются в панели запуска ChromeOS, могут быть закреплены на панели задач и глубоко интегрированы с остальной частью ОС.
Для начала ознакомьтесь с контрольным списком PWA и убедитесь, что ваше веб-приложение соответствует основным требованиям. Вы можете использовать PWABuilder , чтобы создать пользовательскую страницу для работы в автономном режиме и сделать ваше приложение устанавливаемым. Затем воспользуйтесь этими рекомендациями, чтобы ваше PWA отлично работало на ChromeOS.
Сделайте его устанавливаемым.
Одно из главных преимуществ PWA перед обычными веб-приложениями — возможность их установки, как и традиционных настольных приложений. На сайте web.dev есть раздел, посвященный установке PWA ; воспользуйтесь им, чтобы начать. Для того чтобы PWA был идентифицирован как устанавливаемый на ChromeOS, должны быть соблюдены следующие критерии, которые можно проверить с помощью проверки устанавливаемости Lighthouse :
- Необходимо наличие действительного манифеста веб-приложения.
- Оно должно соответствовать критериям установки Chrome.
- Для PWA на ChromeOS запрос на установку будет отображаться в адресной строке, даже если не будет достигнут пороговый уровень вовлеченности пользователей.
Иконки — важная часть идентичности вашего PWA, поэтому убедитесь, что они интересные и уникальные; они даже могут быть прозрачными! Поскольку PWA используют единый код, общий для всех платформ, убедитесь, что у вас есть маскируемая иконка . Также обязательно включите обычные иконки для операционных систем, которые не поддерживают маскируемые иконки.
После установки ваше PWA будет отображаться во всей ChromeOS, от лаунчера до панели задач. Установка PWA также открывает дополнительные возможности, которые позволят вашему приложению по-настоящему раскрыть свой потенциал.
Примечание о работе в автономном режиме.
Возможность установки приложения значительно повышает его доступность, удобство использования и расширяет функциональные возможности. Это не означает, что весь функционал приложения должен работать в автономном режиме. Однако, чтобы установленное веб-приложение ощущалось как традиционное приложение, оно должно иметь какую-либо функцию работы в автономном режиме. Для начала достаточно простой пользовательской страницы для работы в автономном режиме; пользователи ожидают, что установленные приложения не будут вылетать при изменении состояния подключения. Как и традиционное приложение, PWA никогда не должны показывать пустую страницу в автономном режиме, так и PWA никогда не должны показывать стандартную страницу браузера для работы в автономном режиме. Пользовательские страницы для работы в автономном режиме могут варьироваться от сообщения о необходимости подключения к сети до игры, позволяющей скоротать время до повторного подключения. Предоставление такого пользовательского опыта работы в автономном режиме для страниц без кэширования или функций, требующих подключения, помогает преодолеть разрыв между удобством использования и функционалом приложения.
Вы можете создать простую страницу для отображения состояния «в автономном режиме» во время события install сервис-воркера, предварительно кэшировав нужную страницу для последующего использования и отправив её в ответ, если пользователь находится в автономном режиме. Вы можете ознакомиться с нашим примером создания пользовательской страницы для отображения состояния «в автономном режиме» , чтобы увидеть пример в действии и узнать, как реализовать это самостоятельно.
Для обеспечения более надежной работы, помимо API кэширования , вы можете использовать такие функции, как IndexedDB для хранения NoSQL-данных в браузере и фоновую синхронизацию , позволяющую пользователям выполнять действия в автономном режиме и откладывать обмен данными с сервером до тех пор, пока у пользователя не восстановится стабильное соединение. Вы также можете реализовать такие шаблоны, как безопасные, долгосрочные сессии для поддержания аутентификации пользователей и экраны-заглушки , чтобы быстро информировать пользователей о загрузке контента, при необходимости можно использовать кэшированный контент или индикатор автономного режима.
Сделайте его осязаемым
Практически все устройства ChromeOS поддерживают сенсорное управление, а многие также поддерживают стилусы, поэтому вам необходимо убедиться, что ваше приложение бесперебойно работает с обоими способами ввода, помимо обычной клавиатуры и мыши. API событий указателя разработан специально для этого! Некоторые основные события, связанные с указателем, вам, вероятно, не придется менять, например, события click . Другие события, такие как mouseup или touchstart , следует перенести в соответствующие API событий указателя, чтобы они бесперебойно работали с любым типом указателя. При желании вы даже можете управлять различными типами ввода отдельно. Для приложений и игр, которые в значительной степени зависят от тактильного ввода пользователя, переход на API событий указателя значительно улучшит работу на устройствах ChromeOS.
Плавное рисование в интернете
Если вы разрабатываете приложение, в котором пользователи рисуют пальцами или стилусом, исторически было сложно обеспечить достаточную задержку между их вводом и выводом, чтобы изображение выглядело плавно. При создании подобных приложений на основе Canvas API для ChromeOS мы рекомендуем использовать подсказку desynchronized для canvas.getContext() , чтобы обеспечить рендеринг с низкой задержкой . Чтобы использовать подсказку desynchronized для canvas, выполните следующие действия:
const canvas = document.createElement('canvas'); // or select one from the DOM const ctx = canvas.getContext('2d', { desynchronized: true, // Other options here… }); if (ctx.getContextAttributes().desynchronized) { // Low-latency supported! Do something awesome with it. } else { // Low-latency not supported! Fall back to less awesome stuff }
Вопросы проектирования сенсорного экрана
При разработке веб-приложений важно учитывать поддержку сенсорного ввода и стилуса. Взаимодействия, которые вы можете считать само собой разумеющимися, например, наведение курсора, плохо работают или вообще не работают для других методов ввода. Вот несколько рекомендаций, которые следует учитывать при разработке интерфейсов, удобных для сенсорного ввода и использования стилуса:
- Не делайте предположений о способе ввода, основываясь на размере экрана. Вместо этого используйте определение характеристик , в идеале — во время ввода, чтобы определить, как реагировать. Помните, что в ChromeOS пользователи могут и действительно плавно переключаются между мышью, сенсорным экраном и стилусом в рамках одной сессии.
- Убедитесь, что элементы, к которым, как ожидается, будет прикасаться пользователь, имеют минимальный размер цели, достаточный для того, чтобы случайно не задеть окружающие элементы.
- Рассматривайте наведение курсора как постепенное улучшение и обеспечьте возможность взаимодействия с помощью других средств сенсорного управления и стилуса (например, длительного нажатия или касания).
- Пользователи сенсорных устройств ожидают возможности прямого взаимодействия с элементами на экране, например, масштабирования карт с помощью жеста «щипок» вместо использования кнопок увеличения/уменьшения масштаба. Добавление распространенных жестов сенсорного управления , где это уместно, может значительно улучшить удобство использования приложения.
Сделайте его способным
Хотя некоторые возможности PWA широко известны, например, API уведомлений , позволяющий веб-приложению получать и публиковать уведомления платформы, в интернете появляется множество новых и перспективных функций, которые значительно расширят возможности ваших приложений. Проект Chromium Web Capabilities , также известный как Project Fugu 🐡, направлен на внедрение новых, мощных веб-стандартов, сохраняющих уникальность интернета: ориентированную на пользователя безопасность, простоту использования и кроссплатформенную совместимость.
Примечание: Эти возможности находятся на разных стадиях разработки, от «на рассмотрении» до «выпущены», и могут быть предназначены только для настольных или мобильных устройств, но не для обоих одновременно. Хотя пользователи ChromeOS, вероятно, получат функции, ориентированные на настольные компьютеры, по мере их появления, кроссплатформенная поддержка, даже стабильная поддержка в ChromeOS, иногда может занимать несколько лет.