Поскольку подключение к Интернету может быть нестабильным или вообще отсутствовать, вам нужно сначала подумать об автономном режиме : напишите свое приложение так, как будто оно не имеет подключения к Интернету. Как только ваше приложение начнет работать в автономном режиме, добавьте любые сетевые функции, необходимые для того, чтобы ваше приложение могло делать больше, когда оно подключено к сети. Прочтите советы по реализации автономного приложения.
Обзор
Приложения 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, но и позволяет поисковым системам находить данные.
Тестирование
Убедитесь, что ваше приложение работает хорошо при следующих обстоятельствах:
- Приложение устанавливается, а затем сразу отключается. Другими словами, первое использование приложения происходит в автономном режиме.
- Приложение устанавливается на один компьютер, а затем синхронизируется с другим.
- Приложение удаляется, а затем сразу же устанавливается снова.
- Приложение работает на двух компьютерах одновременно с одним и тем же профилем. Приложение должно вести себя разумно, когда один компьютер отключается от сети, пользователь выполняет на этом компьютере кучу действий, а затем компьютер снова подключается к сети.
- Приложение имеет прерывистую связь, часто переключаясь между онлайн и оффлайн.
Также убедитесь, что приложение не сохраняет конфиденциальные пользовательские данные (например, пароли) на компьютере пользователя.