Сначала офлайн

Поскольку подключение к Интернету может быть нестабильным или вообще отсутствовать, вам нужно сначала подумать об автономном режиме : напишите свое приложение так, как будто оно не имеет подключения к Интернету. Как только ваше приложение начнет работать в автономном режиме, добавьте любые сетевые функции, необходимые для того, чтобы ваше приложение могло делать больше, когда оно подключено к сети. Прочтите советы по реализации автономного приложения.

Обзор

Приложения Chrome бесплатно получают следующее:

  • Файлы вашего приложения — весь JavaScript, CSS и шрифты, а также другие необходимые ему ресурсы (например, изображения) — уже загружены .
  • Ваше приложение может сохранять и при необходимости синхронизировать небольшие объемы данных с помощью Chrome Storage API .
  • Ваше приложение может обнаруживать изменения в подключении, прослушивая онлайн- и офлайн-события .

Но этих возможностей недостаточно, чтобы гарантировать, что ваше приложение будет работать в автономном режиме. Ваше автономное приложение должно соответствовать следующим правилам:

По возможности используйте локальные данные.
При использовании ресурсов из Интернета используйте XMLHttpRequest , чтобы получить их, а затем сохраните данные локально. Вы можете использовать API хранилища Chrome, IndexedDB или API файловой системы для локального сохранения данных.
Отделите пользовательский интерфейс вашего приложения от его данных.
Разделение пользовательского интерфейса и данных не только улучшает дизайн вашего приложения и упрощает задачу включения автономного использования, но также позволяет вам предоставлять другие представления данных пользователя. Фреймворк MVC может помочь вам разделить пользовательский интерфейс и данные.
Предположим, ваше приложение можно закрыть в любой момент.
Сохраняйте состояние приложения (по возможности как локально, так и удаленно), чтобы пользователи могли продолжить работу с того места, на котором они остановились.
Тщательно протестируйте свое приложение.
Убедитесь, что ваше приложение хорошо работает как в обычных, так и в сложных сценариях .

Ограничения безопасности

Приложения Chrome ограничены в том, где они могут размещать свои ресурсы:

  • Поскольку локальные данные видны на компьютере пользователя и не могут быть надежно зашифрованы, конфиденциальные данные должны оставаться на сервере . Например, не храните пароли или номера кредитных карт локально.
  • Весь код JavaScript , который выполняет приложение, должен находиться в пакете приложения. Он не может быть встроенным.
  • Все стили CSS , изображения и шрифты изначально могут находиться либо в пакете приложения, либо по удаленному URL-адресу. Если ресурс удален, вы не можете указать его в своем HTML. Вместо этого получите данные с помощью XMLHttpRequest (см. Ссылки на внешние ресурсы ). Затем либо обратитесь к данным с помощью URL-адреса большого двоичного объекта, либо (еще лучше) сохраните и затем загрузите данные с помощью API файловой системы .

Однако вы можете загружать большие медиа-ресурсы, такие как видео и звуки, с внешних сайтов. Одна из причин этого исключения из правила заключается в том, что элементы <video> и <audio> имеют хорошее резервное поведение, когда приложение имеет ограниченное подключение или отсутствует вообще. Другая причина заключается в том, что извлечение и обслуживание мультимедиа с помощью XMLHttpRequest и URL-адресов больших двоичных объектов в настоящее время не позволяет осуществлять потоковую передачу или частичную буферизацию.

Чтобы обеспечить изолированный iframe, вы можете создать тег <webview> . Его содержимое может быть удаленным, но у него нет прямого доступа к API-интерфейсам приложений Chrome (см. Встраивание внешних веб-страниц ).

Некоторые ограничения для приложений Chrome накладываются Политикой безопасности контента (CSP), которая всегда следующая и не может быть изменена для приложений Chrome:

default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;

Указание offline_enabled

Предполагается, что ваше приложение хорошо работает в автономном режиме. Если это не так, вам следует объявить об этом факте, чтобы значок запуска был затемнен, когда пользователь находится в автономном режиме. Для этого установите для offline_enabled значение false в файле манифеста приложения :

{
  "name": "My app",
  ...
  "offline_enabled": false,
  ...
}

Сохранение данных локально

В следующей таблице показаны варианты локального сохранения данных (см. также «Управление данными» ).

API Лучшее использование Примечания
API хранилища Chrome Небольшие объемы строковых данных Отлично подходит для настроек и состояния. Легко синхронизировать удаленно (но это не обязательно). Не подходит для больших объемов данных из-за квот.
API индексированной базы данных Структурированные данные Обеспечивает быстрый поиск данных. Используйте с разрешением неограниченного хранилища .
API файловой системы Что-нибудь еще Предоставляет изолированную область, в которой можно хранить файлы. Используйте с разрешением неограниченного хранилища .

Сохранение данных удаленно

В общем, как сохранять данные удаленно, зависит от вас, но могут помочь некоторые фреймворки и API (см. Архитектура MVC ). Если вы используете Chrome Storage API, все синхронизируемые данные автоматически синхронизируются, когда приложение находится в сети и пользователь входит в Chrome. Если пользователь не вошел в систему, ему будет предложено войти в систему. Однако обратите внимание, что синхронизированные данные пользователя удаляются, если пользователь удаляет ваше приложение. {ВОПРОС: правда?}

Рассмотрите возможность сохранения данных пользователей в течение как минимум 30 дней после удаления вашего приложения, чтобы у пользователей было хорошее впечатление, если они переустановят ваше приложение.

Отделение пользовательского интерфейса от данных

Использование платформы MVC может помочь вам спроектировать и реализовать приложение так, чтобы данные были полностью отделены от представления данных приложением. Список инфраструктур MVC см. в разделе «Архитектура MVC» .

Если ваше приложение взаимодействует с пользовательским сервером, сервер должен предоставлять вам данные, а не фрагменты HTML. Подумайте о RESTful API.

Когда ваши данные отделены от вашего приложения, гораздо проще предоставить альтернативные представления данных. Например, вы можете предоставить веб-сайту представление любых общедоступных данных. Просмотр веб-сайта может быть не только полезен, когда ваш пользователь находится вдали от Chrome, но и позволяет поисковым системам находить данные.

Тестирование

Убедитесь, что ваше приложение работает хорошо при следующих обстоятельствах:

  • Приложение устанавливается, а затем сразу отключается. Другими словами, первое использование приложения происходит в автономном режиме.
  • Приложение устанавливается на один компьютер, а затем синхронизируется с другим.
  • Приложение удаляется, а затем сразу же устанавливается снова.
  • Приложение работает на двух компьютерах одновременно с одним и тем же профилем. Приложение должно вести себя разумно, когда один компьютер отключается от сети, пользователь выполняет на этом компьютере кучу действий, а затем компьютер снова подключается к сети.
  • Приложение имеет прерывистую связь, часто переключаясь между онлайн и оффлайн.

Также убедитесь, что приложение не сохраняет конфиденциальные пользовательские данные (например, пароли) на компьютере пользователя.