Ладно, может быть, я прыгаю по этому поводу, но это отличные новости, мягко говоря!
Недавний анонс Chrome v70
В последней версии Chrome (v70) появилась отличная поддержка для настольных прогрессивных веб-приложений в Linux и Windows. Вот текущий список поддержки Chrome.
Вы сразу заметите, что MacOS отсутствует в списке. Не бойтесь, это должно быть здесь для Chrome v72.
Важно отметить, что, хотя по умолчанию он недоступен в MacOS, он доступен с помощью флагов функций Chrome. Чтобы включить эти флаги, просто откройте Chrome и перейдите к chrome: // flags или просто перейдите к флагу Desktop PWA, chrome: // flags / # enable-desktop-pwas. Не забудьте перезагрузить Chrome после включения любых флагов функций.
Что такое прогрессивные веб-приложения?
Хотя мы не будем подробно рассматривать PWA, я рекомендую вам прочитать Документацию Google, чтобы сделать отличное вступление. Чтобы увидеть несколько богатых примеров и понять, каково это использовать PWA, перейдите в Chrome на Android или Safari на iOS (частичная поддержка) и ознакомьтесь с этими примерами. Я рекомендую посмотреть объявление Chrome ниже.
Что такое Электрон?
Electron - это платформа, которая позволяет разработчикам создавать кроссплатформенные настольные приложения с использованием Javascript, HTML и CSS. Это снижает планку для разработчиков веб-приложений, позволяющую легко создавать альтернативы для настольных компьютеров, а также использовать некоторые из замечательных библиотек и фреймворков Javascript. Приложения на основе Electron в последние годы стали штурмом настольных приложений. Такие программы, как Slack, VSCode, Atom и Discord, вложили значительные средства в разработку Electron. Если вы еще не использовали ни одну из этих услуг, обязательно ознакомьтесь с ними. Настольные приложения казались неуклюжими, а компоненты пользовательского интерфейса всегда казались устаревшими. Electron определенно привнес сексуальность в настольную игру!
Почему настольные прогрессивные веб-приложения?
Хотя приложения Electron растут и их реализация близка к веб-приложениям, они все же имеют некоторые недостатки. Во-первых, приложения Electron поставляются с собственным двоичным кодом Chromium. Большинство из нас знает, сколько оперативной памяти требуется для запуска Chrome, теперь возьмите это число и умножьте его на каждое приложение Electron, запущенное пользователем. Если вам интересно, откройте несколько приложений Electron на своем компьютере и проверьте свой Activity Monitor, чтобы увидеть, как это накопление оперативной памяти в действии! Обильное использование ОЗУ не только неэффективно, но многие приложения Electron требуют дополнительных интерфейсов кода, специфичных для Electron, с NodeJS и не обязательно идентичны соответствующему веб-приложению. Electron также требует дополнительных сложностей из-за необходимости управлять поддержкой старых версий и конвейеров обновления программного обеспечения.
[Вход в настольные PWA]. Представьте себе мир, в котором вы можете использовать внешний вид электронного приложения, не требуя длительных установок, обновлений программного обеспечения, и все это при доставке одного веб-приложения. Кажется, что Chrome устанавливает стандарт для этого поведения в настольных PWA. Когда вы посещаете веб-страницу в Chrome и приложение соответствует всем критериям, разработчик может предложить пользователю установить приложение на свой рабочий стол. Приглашение выглядит примерно так:
Это приглашение может отображаться по усмотрению разработчиков только после того, как браузер запускает событие окна ‘beforeinstallprompt’. После установки это приложение обычно становится значком приложения на рабочем столе пользователя.
После запуска этого недавно установленного приложения вы получаете новое минимальное окно браузера, которое выглядит и ощущается как настоящее настольное приложение.
Пример моей игровой площадки
Снимки выше - это простое доказательство концепции, которую я собрал, чтобы показать вам, как начать работу с настольными PWA. Чтобы установить его, убедитесь, что вы включили флаг функции PWA на рабочем столе и активны на моем сайте не менее 30 секунд. Важно отметить, что при тестировании настольных PWA существует несколько требований. Если вы хотите загрузить мой репозиторий, следуйте Контрольному списку Desktop PWA, но вот краткое изложение:
- Должен обслуживаться по HTTPS
- У вас должен быть установлен Service Worker как минимум с одним обработчиком выборки
- Должен отображаться действительный файл manifest.json
- Страницы должны быть адаптивными
Дополнительные примеры
Если вы в настоящее время используете MacOS, многие приложения не предполагают, что у вас включен флаг функции Desktop PWA, и поэтому не предлагают вам установить. С правильным включением флага в Chrome и грамотным кодированием в консоли Chrome Devtools вы можете взять существующие PWA и запросить их установку. Вот несколько существующих PWA, которые мне удалось установить на свой рабочий стол.
Starbucks
Starbucks вложила значительные средства в создание отличной PWA. Хотя я не часто бываю, настольная версия действительно впечатляет.
Карты Гугл
Это приложение действительно круто. Очень легкий и выполняет свою работу. Отзывчивый и быстрый. Уловка для получения карт Google состоит в том, чтобы принудительно загрузить мобильный сайт.
Твиттер
Twitter действительно устанавливает отличные базовые параметры для Twitter PWA на мобильных устройствах, установленная версия для настольных компьютеров является отличным дополнением к их реализации.
Дальнейшее развитие
Учитывая всю шумиху вокруг настольных PWA, разумно понимать, что стандарты все еще находятся в зачаточном состоянии. Недавно команда Chromium взяла на себя обязательства по внедрению собственных API, таких как API с возможностью записи файлов, Wake Lock, Async Cookies и т. Д. Вносятся разработки и изменения, в том числе:
Глубокие ссылки: открытие ссылок в Chrome для запуска установленного приложения, а не в Chrome.
Значок значка. Аналогичен значку уведомления мобильного приложения над значком приложения.
Сочетания клавиш: возможность прослушивать использование встроенных сочетаний клавиш внутри установленного приложения.
После созревания я вижу, что многие из сегодняшних приложений Electron находят серьезного конкурента в виде настольных PWA.
