Edge установить как приложение
Обновлено: 04.07.2024
Прогрессивные веб-приложения (PWAs) — это веб-приложения, которые постепенно улучшаются. Прогрессивные усовершенствования включают такие функции, как установка, поддержка в автономном режиме и push-уведомления. Вы также можете упаковал PWA для магазинов приложений, таких как Microsoft Store, Google Play и Mac App Store. The Microsoft Store — это коммерческий магазин приложений, встроенный в Windows 10.
В этом обзоре PWA основы создайте простое веб-приложение и расширйте его как PWA. Готовый проект работает в современных браузерах.
С помощью PWABuilder можно создать новый PWA, улучшить существующие PWA или PWA для магазинов приложений.
Предварительные условия
- Используйте Visual Studio Code для редактирования PWA кода.
- Используйте Node.js в качестве локального веб-сервера.
Создание базового веб-приложения
Чтобы создать пустое веб-приложение, выполните действия в Node Express App Generatorи назовите ваше MySamplePwa приложение.
В запросе запустите следующие команды.
Команды создают пустое веб-приложение и устанавливают любые зависимости.
Теперь у вас есть простое функциональное веб-приложение. Чтобы запустить веб-приложение, запустите следующую команду.
Начало создания PWA
Шаг 2 . Создание манифеста веб-приложений
Манифест веб-приложения — это файл JSON, содержащий метаданные о вашем приложении, такие как имя, описание, значки и другие.
Добавление манифеста приложения в веб-приложение:
В Visual Studio Code выберите папку File > Open, а затем выберите каталог, созданный MySamplePwa ранее.
Выберите, Ctrl + N чтобы создать новый файл, и ввести в следующий фрагмент кода.
Сохраните файл как /MySamplePwa/public/manifest.json .
Добавьте изображение значка приложения 512x512 с icon512.jpg именем /MySamplePwa/public/images . Пример изображения можно использовать для тестирования.
В Visual Studio Code откройте и добавьте в тег следующий фрагмент /public/index.html <head> кода.
Шаг 3 . Добавление сотрудника службы
Сотрудники службы являются ключевой технологией pwAs, позволяющей использовать сценарии, ранее ограниченные для родных приложений, таких как поддержка в автономном режиме, расширенный кэшинг и выполнение фоновых задач.
Сотрудники служб являются специализированными веб-работниками, которые перехватывают сетевые запросы из вашего веб-приложения. Сотрудники службы могут выполнять задачи, даже если PWA не запущен, в том числе:
- Обслуживание запрашиваемой ресурсы из кэша.
- Отправка push-уведомлений.
- Выполнение задач фонового получения.
- Значки с плохими изображениями.
Сотрудники служб определяются в специальном файле JavaScript, описанного в API Using Service Workers and Service Worker.
Чтобы создать сотрудника службы в проекте, используйте рецепт сотрудника сетевой службы Cache-first от PWA Builder.
Скопируйте исходные pwabuilder-sw-register.js иpwabuilder-sw.js в public папку в проекте веб-приложения.
В Visual Studio Code откройте и добавьте в тег следующий фрагмент /public/index.html <head> кода.
Теперь в вашем веб-приложении есть сотрудник службы, использующий стратегию кэш-первого. Новый сотрудник службы извлекает ресурсы из кэша сначала и из сети только по мере необходимости. Кэшные ресурсы включают изображения, JavaScript, CSS и HTML.
Подтвердите, что сотрудник службы выполняется следующим образом:
В Microsoft Edge выберите F12 открыть DevTools. Выберите приложение, а затем сотрудников службы, чтобы просмотреть сотрудников службы. Если сотрудник службы не отображается, обновите страницу.
Просмотр кэша сотрудника службы путем расширения кэша служба хранилища и выберите pwabuilder-precache. Все ресурсы, кэшные работником службы, должны отображаться. Ресурсы, кэшные работником службы, включают значок приложения, манифест приложения, CSS и файлы JavaScript.
Попробуйте PWA как автономное приложение. В DevTools выберите Сеть, а затем измените состояние с Online на автономный.
Обновление приложения. Он должен отображать автономный механизм обслуживания ресурсов приложения из кэша.
Дальнейшие действия
Чтобы создать надежную, реальную PWA, рассмотрим следующие веб-практики:
Убедитесь, что PWA работает, проверяя его в разных браузерах и средах.
Использует гибкие макеты и гибкие изображения. Адаптивный дизайн включает в себя следующие элементы, которые адаптируют UX к устройству пользователя:
Использует средства эмуляции устройств из браузера для локального тестирования или создания сеанса удаленной отладки на Windows Или Android для тестирования непосредственно на целевом устройстве.
Маршруты каждой страницы вашего сайта на уникальный URL-адрес, чтобы существующие пользователи могли помочь вам привлечь еще более широкую аудиторию с помощью обмена социальными медиа.
После установки работает независимо от состояния подключения пользователей и предоставляет настраиваемую страницу в автономном режиме, а не с помощью автономной страницы браузера по умолчанию.
Средства качества кода, такие как подкладка Webhint, используются для оптимизации эффективности, надежности, безопасности и доступности приложения.
Компания Microsoft 15 января 2020 года выпустила браузер Microsoft Edge для Windows, MacOS и для мобильных операционных систем. А в октябре 2020 года, разрабатываемую версию Microsoft Edge Dev для Linux, которая обновляется каждую неделю.
Вот что пишут о браузере Microsoft Edge его разработчики:
Я не фанат Google Chrome и других браузеров основанных на платформе Chromium. Предпочитаю Palemoon, форк Firefox, но потребляющий намного меньше ресурсов компьютера, чем его старший брат.
Но я всё-таки решился на установку Microsoft Edge Dev из простого любопытства.
Браузер шустрый, быстрее Google Chrome, легко настраиваемый за счёт расширений Chrome и потребляет меньше ресурсов.
Но меня заинтересовала одна фишка в Настройках Microsoft Edge, а именно предложение создать из любой веб-страницы веб-приложение в два клика.
Созданное приложение встраивается в систему, его значок запуска автоматически отображается на рабочем столе и системном Меню и открывается, как любое приложение в новом окне. А также значок запуска может быть добавлен на панель быстрого запуска
Примечание. Хотелось бы отметить, что значки запуска созданных приложений автоматически создаются из фавикона (favicon) веб-сайта, который отображается на каждой вкладке:
Итак, нерейдём к созданию приложения в Microsoft Edge.
1. Откройте станицу в Microsoft Edge, которую хотите преобразовать в приложение.
2. Войдите в Настройки - Приложения - Установить этот сайт как приложение.
3. После чего откроется окно подтверждения - Установить приложение, где пользователь может изменить название данного приложения на своё усмотрение и нажать Установить.
Вот и всё. Приложение создано. Запустить его можно как из системного Меню приложений, так и с рабочего стола, а также добавить на панель быстрого запуска.
Я сделал небольшой эксперимент. Открыл канал YouTube в браузере и одновременно приложение YouTube, чтобы посмотреть на потребление ресурсов в Системном мониторе. И вот что показывает сисмонитор.
Удаление созданных веб-приложений осуществляется двумя способами.
1. Если вы решили удалить созданное приложение, откройте Настройки браузера - Приложения - Управление приложениями.
Правый клик на приложении, которое хотите удалить и Удалить.
2. Откройте веб-приложение, перейдите в Настройки - Удалить.
Вот так просто создание и удаление веб-приложений в Microsoft Edge.
Установить Microsoft Edge Dev для Linux можно по следующей ссылке:
Как известно, прогрессивные веб-приложения (PWA) - это просто веб-сайты, которые ведут себя как приложения и используются так же, как обычное приложение. Веб-приложения используют Service Worker, Push-уведомления, пользовательский интерфейс Windows 10 и другие функции.
В настоящее время Microsoft тестирует новый экспериментальную функцию под названием «Web Apps Post Install Dialog» (Диалог после установки веб-приложений), который позволит по-новому запускать веб-приложения. После включения функции пользователь увидит новое всплывающее окно при запуске недавно установленных веб-приложений. Всплывающее окно позволит мгновенно закрепить приложение в меню «Пуск» и на панели задач. Также можно создать ярлык на рабочем столе или разрешить запуск приложения при входе в систему.
В настоящее время Microsoft тестирует функцию как в стабильной, так и в Canary сборке Edge, и её можно включить во всех поддерживаемых версиях Windows 10.
Стоит отметить, что для работы этих параметров не требуется кода для конкретной платформы, а существующие приложения совместимы с новым интерфейсом PWA в Windows 10. И, конечно же, одним из основных преимуществ для пользователей является то, что Microsoft постепенно готовится к добавлению новых веб-приложений в Магазин Windows с похожими на собственные приложения возможностями.
Кроме того, Microsoft Edge также получает поддержку наложения элементов управления, цель которого - сделать веб-приложения более похожими на стандартное приложение Windows. Планируется добавить дополнительные функции в строку заголовка веб-приложения, и Microsoft предоставит разработчикам возможность настраивать строку заголовка.
Пользователи уже могут протестировать функцию наложения в Chrome Edge, но она будет работать только тогда, когда будет добавлена разработчиком веб-приложения.
Эти изменения определенно улучшат работу веб-приложений, и вскоре можно будет получать больше качественных приложений из Microsoft Store, поскольку компания планирует увеличить количество доступных приложений в ближайшие месяцы.
С прогрессивными веб-приложениями (Progressive Web Apps) для настольных браузеров пока еще мало кто знаком, но их уже можно встретить на просторах Интернета. Пока они выполняют дублирующие функции собственных приложений некоторых популярных веб-сервисов, например, мессенджеров. Такие веб-программы предназначены для работы на любой платформе при условии, что последние поддерживают PWA.
Примечательно, что эти веб-приложения могут поддерживать и ряд дополнительных функций, таких как автономная работа вне браузера. При этом они могут обеспечивать более высокую производительность по сравнению со стандартными веб-службами. Как это работает на практике я расскажу ниже, а пока вы можете скачать новый браузер с официальной страницы Microsoft.
Всякий раз, когда новый браузер Microsoft Edge обнаруживает доступность на открытой вами веб-страничке прогрессивного веб-приложения, он отображает специальный значок установки в правой части адресной строки браузера — рядом со значком «Избранное». Например, если вы посетите веб-сайт Twitter или Telegram, то вы увидите этот значок и можете активировать его для загрузки PWA в систему. Просто нажмите на сам значок, чтобы отобразить приглашение к инсталляции.
Варианты установки приложения или отмены операции
Другой вариант установки PWA — нажать в браузере кнопку «Меню > Приложения > Установить этот сайт как приложение». При этом отобразится несколько иное окно приглашения с надписью «Установить приложение или отменить процесс». Инсталляция обычно очень быстрая, а Progressive Web Application запускается в собственном окне и сразу готово к использованию.
Одной из основных функций PWA является запуск в собственном окне, а не в виде вкладки в браузере (даже если у вас открыта только одна вкладка, она все равно загружается на вкладке в окне браузера).
Интересно, что прогрессивные веб-приложения хотя и работают на движке Chromium, у них нет соответствующих элементов браузерного интерфейса, таких как вкладки, адресная строка или другие кнопки управления. PWA имеют простое меню, прикрепленное к элементам управления окна, которое вы можете активировать для вызова некоторых функций, например, «Открыть в Microsoft Edge» и «Удалить приложение». Также в нем доступны параметры для печати, поиска, масштабирования, копирования URL-адреса и преобразования.
Удобно, что прогрессивные веб-приложения добавляются в список установленных программ в операционной системе, как и любая другая программа, изначально установленная в системе.
Как запустить приложения?
Для запуска установленных прогрессивных веб-приложений доступно несколько вариантов. Вы найдете список установленных PWA на странице «Управление приложениями» в браузере Edge. Открыть его можно с помощью ввода в адресной строке команды edge://apps/URL.
И последнее, но не менее важное: любые установленные PWA также добавляются в меню «Пуск» операционной системы, откуда они могут запускаться, как и любая другая программа.
Как удалить PWA?
Деинсталляция проста: в адресной строке нового браузера введите edge://apps. Либо сделайте это через меню браузера. Откроется окно «Управление приложениями». Щелкните значок крестика рядом с любым установленным приложением, чтобы удалить его из системы.
Edge откроет окно с запросом на подтверждение — выберите «Удалить», чтобы избавиться от приложения, а также отметьте чекбокс «Также удалить данные из Microsoft Edge». PWA могут быть удалены из приложения «Настройки» операционной системы в разделе «Управление приложениями».
Теперь вы знаете о новых возможностях Microsoft Edge на основе движка Chromium. Как вы относитесь к идее использования Progressive Web Apps?
Читайте также: