Будущее веб-приложений и нативных приложений
Разрыв между нативными и веб-приложениями сокращается. Давайте откроем для себя развивающийся мир веб-приложений и посмотрим, как они могут помочь нам улучшить наши приложения.
Возможности веб-сайтов и приложений значительно изменились с момента появления статических страниц. Даже в последнее время мы наблюдаем значительные улучшения, в том числе:
Нативная анимация, простые гибкие макеты, реалистичная 3D-графика и потоковое видео набирают популярность. Всё это под девизом «но мало». Но многое ещё предстоит сделать. Особенно если веб хочет эффективно конкурировать с нативными операционными системами.
Эксперты-писатели и разработчики браузеров искали функции, которые могли бы повысить популярность родной операционной системы и её приложений. Теперь мы видим, как веб занимает определённую позицию и пытается заполнить пробелы в возможностях операционной системы. По сути, это привело к сосредоточению внимания на нескольких функциях, некоторые из которых легко реализовать, а другие — не очень. Список ниже не является исчерпывающим, но охватывает основные моменты.
К родным программам относятся:
- Связь: По заданному URL-адресу вы можете быть перенаправлены в веб-приложение.
- Реактивный: С помощью таких инструментов, как медиазапросы, можно создавать сложные макеты, работающие в различных форматах (ориентация, разрешение, размер экрана и т. д.). Фактически, стандартная модель веб-макета изначально адаптивна, что делает её особенно подходящей для работы с текстом.
- На основе данных: С помощью HTML можно придать смысл и структуру, а Интернет лучше всего справляется с обработкой данных.
- Передовой: Вы можете разрабатывать веб-приложения, которые снабжают современные браузеры новейшими функциями, сохраняя при этом приемлемый уровень удобства в старых браузерах.
- Безопасность: Интернет предлагает функции, обеспечивающие безопасность приложений, используя модель безопасности с единым источником и протокол HTTPS. Благодаря такой программе, как Давайте зашифруем Обеспечить безопасность веб-приложений стало еще проще.
Однако Интернет также имеет определенные преимущества, такие как:
- Возможность установки: Доступность приложений на устройстве и полная интеграция с операционной системой для удобства использования. Было бы ещё лучше, если бы на главном экране был небольшой значок для приложений, и приложения могли бы открываться на весь экран или в небольшом окне. Это же просто, правда?
- Обнаруживаемость: Американские интернет-энтузиасты в большинстве своём не одобряют идею закрытого магазина приложений. Но нельзя отрицать, что они улучшили способы поиска приложений, хотя некоторые утверждают, что даже лучшие закрытые магазины приложений терпят неудачу из-за переполненности.
- Находясь офлайн: Интернет есть по всему миру. Но на 100% нельзя положиться. А вы страдаете от невозможности использовать приложение, потому что вы офлайн, и другого выхода нет.
- Очарование: Как только вы привлечёте пользователя к использованию вашего приложения, вы уже на полпути к успеху. Но как поддерживать его интерес и быть в курсе событий? Разработчики нативных приложений давно используют push-уведомления для информирования пользователей.
- Быстрый: Многие считают, что собственный код работает лучше веб-кода, но, как вы прочтете далее, этот разрыв быстро сокращается.
Сайт pokedex.org является лучшим примером продвинутого веб-приложения, которое также служит интересным хобби.
√Мы хотим разработать веб-сайт, обеспечивающий доступ к полезным приложениям в нативных приложениях, но не в ущерб уже проверенным базовым возможностям. Это движение называется революцией веб-приложений, и его лидерами являются такие компании, как Mozilla и Google Их поддерживают.
√Позже мы рассмотрим новые технологии, которые делают возможными такие усовершенствования, но сначала давайте немного приблизимся к Интернету, чтобы опередить нативные приложения.
√Примечание: Над какими интересными вещами работают собственные операционные системы, чтобы преодолеть разрыв между собой и Интернетом? Например, инициатива в духе Руба Голдберга, которая позволила создавать более глубокие ссылки.
Что было до этого
Важно сначала выйти из сети.
Опытные фанаты хотят создавать веб-приложения, которые работают в автономном режиме и подключаются к Интернету по умолчанию только для обновлений.
Приложения с нативными возможностями — это совсем не новая концепция. Изначально существовало множество “веб-пакетов” — шаблонов приложений, появлявшихся в разных местах (например, в приложении Chrome), — которые позволяли устанавливать одобренные пакеты на устройство для использования офлайн, а также обеспечивать доступ к оборудованию и т. д.
Мы встречали термин “гибридные приложения”, например, Cordova и Electron. Они позволяют разработчикам писать приложения с использованием веб-технологий, а затем портировать их на нативные приложения для iOS и Android. Такие приложения очень популярны. Но они требуют создания и распространения нескольких версий одного и того же приложения, а также имеют ограничения по функциональности, поддерживаемой такими приложениями. Как мы все знаем, принцип “написал один раз — запусти везде” не совсем верен.
Прежде всего, само собой разумеется, что стоит упомянуть и одностраничные приложения. Одна HTML-страница может служить главной страницей приложения и динамически загружать различные представления с помощью XHR (или аналогичного), что позволяет сделать веб-приложения более быстрыми и отзывчивыми. Этот тип модели приложений поддерживается популярными фреймворками, такими как Ember. JS и AngularJS, наряду с офлайн-ориентированными технологиями, составляют основу значительной части современных веб-приложений.
Возможности установки и настройки
В первой части книги «Расширенные веб-приложения» мы рассмотрим установку и настройку. Это позволит вам использовать скин веб-приложения, который создаёт JSON-файл, содержащий информацию о веб-приложении, такую как значки, название и режим отображения, используемый при открытии приложения:
Такой код может быть использован для дальнейшей интеграции приложения с основной операционной системой (иконка на главном экране, открытие на весь экран вместо браузера и т. д.), а также обеспечивает лучшую находимость в списке приложений — например, оно отображается в результатах поисковой системы.
Эта информация уже используется в Opera и Chrome на телефонах для кроссплатформенной интеграции, а поддержка Firefox появится в ближайшее время.
Оффлайн
А теперь перенесёмся в настоящее время: у нас есть сервисные приложения — новая технология в Firefox, Chrome и Opera, которая позволяет разработчикам создавать офлайн-приложения, работающие подобно AppCache и многим другим. Это самый низкий уровень API, а значит, гораздо более сложная структура. Но это даёт разработчикам больше возможностей в выборе того, что должны делать их сервисы.
С другой стороны, Asset Storage — это совсем другое дело. Какое-то время казалось, что что-то вроде AppCache решит проблему, но это было слишком большим предположением о том, что приложение можно запустить, и у разработчиков не было достаточного контроля над происходящим.
Проблема офлайн-веб-ресурсов существует уже невероятно давно, учитывая, насколько простой она кажется на первый взгляд. Проблема в том, что реализовать эффективный набор офлайн-технологий непросто. Хранить большие объёмы данных офлайн не так уж сложно. Современные браузеры уже давно имеют API (интерфейсы прикладных программ), такие как IndexedDB, а поддержка веб-хранилищ появилась ещё в IE8.
Серверное приложение — это фрагмент JavaScript-кода, написанный в отдельном файле и работающий в отдельном потоке. Оно действует как прокси-сервер между интернетом и вашими приложениями (и браузером). При поступлении запроса серверное приложение может перехватить его и настроить перед отправкой в браузер.
Чтобы использовать сервисную программу, необходимо сначала запустить () навигатор. сервисработник. зарегистрироваться Зарегистрируйте его на главной странице.
навигатор.serviceWorker.регистр(‘'sw.js'’)
.затем(функция(рег) {
// Сделайте что-нибудь для инициализации приложения
});
А затем установил его с помощью установщика из раздела «Утилиты». Иногда эти важные файлы хранятся во всех приложениях, использующих API кэширования (который, кстати, используется независимо от коммуникационных приложений).
этот.addEventListener(‘'установить'’, функция(событие) {
событие.подождите, пока(
кэши.открыть(‘'v1'’).затем(функция(кэш) {
возвращаться кэш.добавитьВсе([
‘'/sw-test/'’,
‘'/sw-test/index.html'’,
‘'/sw-test/style.css'’,
‘'/sw-test/app.js'’
]);
})
);
});
А после ответа прослушивателя событий в сервисном приложении отправляется код в ответ на поступающие запросы, что позволяет разработчикам настраивать результат ответа. Таким образом, разработчик может запросить сохранение в инсталляции файлов, которые не сильно изменились (например, скина пользовательского интерфейса), а затем при необходимости использовать версии, хранящиеся в репозитории (вместо онлайн-версии). Бум! — офлайн-приложения!.
этот.addEventListener(‘'принести'’, функция(событие) {
вар ответ;
событие.ответить(кэши.соответствовать(событие.запрос).ловить(
// написать код для обработки случая, когда запрошенный файл
// еще не сохранен в кэше в автономном режиме
);
});
Следует отметить, что сервисные приложения работают только с HTTPS-соединением.
↑ На диаграмме выше показан цикл установки сервисного приложения ↑
Повторное взаимодействие с пользователем
В собственных операционных системах push-уведомления — возможность сервера отправлять клиентской системе сообщения об изменениях — даже когда приложение закрыто. Возможно, новостное приложение хочет отправить пользователю новое обновление? Или, может быть, ваша игра Pokémon надоела и требует внимания? Теперь эти возможности доступны и для веб-приложений.
Для использования этой программы, как уже объяснялось, необходимо установить и активировать сервисную программу на странице программ. После этого её можно использовать, оформив подписку. Для этого можно использовать формулу () ServiceWorkerRegistration.pushManager.subscribe Для выполнения работы используйте:
навигатор.serviceWorker.готовый.затем(функция(рег) {
рег.pushManager.подписаться({userVisibleOnly: истинный})
.затем(функция(подписка) {
// Обновить пользовательский интерфейс и т. д. в соответствии с подпиской
// Обновить статус для подписки текущего пользователя на сервере
вар конечная точка = подписка.конечная точка;
вар ключ = подписка.получитьКлей(‘'p256dh'’);
updateStatus(конечная точка,ключ,‘'подписаться'’);
})
});
Этот метод отправляет тип дополнительных материалов, используемых для решения проблемы совместного использования. Он имеет свойство конечной точки (содержащее уникальный URL-адрес, указывающий на сервер) и метод получитьКлей(), Который используется для генерации открытого ключа для шифрования. Вам необходимо разрешение от обоих, после чего результаты будут отправлены на сервер приложений.
Чтобы отправить оповещение на сервер, отправьте запрос на адрес конечной точки. Это позволит серверу отправить сообщение сервисным приложениям. При желании вы также можете отправлять данные вместе с сообщением, используя ключ шифрования. Оповещения на основе данных работают только в Firefox, но другие браузеры не должны сильно отставать.
Сервисное приложение ожидает оповещения с помощью обработчика push-событий. При отправке оповещения вы можете получить к нему доступ, используя свойство data объекта события. Вы можете отреагировать на сообщение любым удобным для вас способом, например, отправив новость или сообщение на главную страницу, которое обновит ваше приложение.
себя.addEventListener(‘'толкать'’, функция(е) {
вар объект = е.данные.json();
// Ответьте на push-сообщение каким-либо образом
// например, уведомление или сообщение канала
});
Примечание: Многие семейства технологических сервисов (оповещения и т. д.) имеют разумную поддержку в Chrome и Firefox, но другие браузеры учитывают их. На момент написания статьи данные оповещений работали только в Firefox.
Эта программа от Mozilla предоставляет информацию о прогрессе в реализации современных интерфейсов веб-приложений в браузерах.
Производительность
Производительность долгое время была больным местом между веб-приложениями и нативными приложениями, поскольку разработчики нативных приложений отказывались от возможностей веб-производительности. Но в последние дни этот разрыв значительно сократился благодаря значительно более быстрым движкам Java в браузерах и более быстрому коду в вебе для запуска таких задач, как анимация и 3D-графика, которые могут всё активнее использовать доступную мощность графических процессоров.
Кроме того, мы можем преобразовывать нативный код приложений (например, C++) в Java, используя такие технологии, как Emscripten. Когда мы говорим о Java, мы, по сути, имеем в виду asm.js — высокооптимизированное подмножество Java, которое может использовать методы компиляции AOT для достижения производительности, близкой к нативной. Он стал настолько популярен, что поддерживается не только Firefox, но и Chrome и Edge, а веб-сайты добавили asm.js в качестве целевой платформы для публикации приложений для популярных 3D-движков Unity и Unreal.
И вот наступает следующее поколение — некоторые производители браузеров сотрудничают с разработчиками для настройки и внедрения WebAssembly, который будет выполнять функции, аналогичные Emcscripten. Но с более высокой скоростью, лучшими стандартами и производительностью.
Он используется вместо (asm.js) с форматом wasm, поскольку имеет лучшие настройки, мы можем рассчитывать на то, что компиляторы будут выдавать корректный вывод wasm, а браузеры должны запускать его с постоянной производительностью, независимо от того, какой компилятор его создал.
Результат
Как видите, интернет развивается, и появляются новые захватывающие технологии, призванные устранить некоторые из сохранившихся недостатков наших любимых платформ, которые традиционно страдали от них. Однако производительность даже превосходит все ожидания. Это позволяет веб-приложениям достойно конкурировать с нативными. Конечно, если мы не забудем о том, что изначально сделало интернет таким замечательным.
