Как открыть локальное приложение ПК на интерфейсной веб-странице

HTML

Представьте себе сценарий, когда мы просматриваем веб-страницу и нам нужно загрузить определенный ресурс, на вашем компьютере может часто появляться всплывающее окно с вопросом, нужно ли вам открыть «Xunlei». Когда мы нажимаем «Да», локальное приложение будет активировано для задачи загрузки.

В ответ на этот сценарий возникает вопрос, как веб-страница открывает приложение на стороне ПК?

Эта статья направлена ​​наWindowsсистема иMacOSсистема для обсуждения.

пользовательский протокол

При ежедневной разработке Mint FE из-за частого взаимодействия с приложением разработчики приложений определяют соответствующие протоколы:boohee://, через этот протокол мы можем вызвать приложение Mint.

Благодаря этому сценарию автор вывел идею, можно ли открыть приложение на стороне ПК через аналогичный протокол?

Windows

реестр

Реестр — это важная база данных в Microsoft Windows, в которой хранится информация о параметрах системы и приложений.

Это основная база данных в операционной системе Windows, в которой хранятся различные параметры, которые могут напрямую управлять работой некоторых приложений Windows.

В среде Windows мы можем определить протокол для открытия программного обеспечения через реестр.

Как просмотреть соглашение в реестре?

Система Windows поставляется с редактором реестра, откройте и запустите его с помощью Windows+r, введите «regedit», чтобы открыть редактор реестра.

注册表编辑器

Конфигурация реестра, необходимая для открытия приложения, существуетHEY_CLASSES_ROOTВниз.

HEY_CLASSES_ROOT

HKEY_CLASSES_ROOTКорневой ключ в основном содержит всю информацию, необходимую для запуска приложения, в том числе:

  1. Все расширения и связанная с ними информация между приложениями и документами.
  2. Все имена водителей.
  3. Строки как указатели на фактические файлы, которые они представляют.
  4. Класс идентифицирует CLSID, что очень важно при доступе к информации о подразделе, поскольку информация, которая обращается к подразделу в Windows, заменяется CLSID. Идентификатор здесь уникален в системе Windows XP.
  5. Информация DDE и OLE. Функции DDE и OLE доступны для каждой ассоциации файлов.
  6. Значки, используемые приложениями и документами

Пример: открытый почтальон

postman

导出

Нажмите на папку почтальона, вы увидите, что справа есть определение свойства по умолчанию.URL:postman, экспортируйте реестр, чтобы увидеть следующую конфигурацию:

    Windows Registry Editor Version 5.00
    
    [HKEY_CURRENT_USER\Software\Classes\postman]
    "URL Protocol"=""
    @="URL:postman"
    
    [HKEY_CURRENT_USER\Software\Classes\postman\shell]
    
    [HKEY_CURRENT_USER\Software\Classes\postman\shell\open]
    
    [HKEY_CURRENT_USER\Software\Classes\postman\shell\open\command]
    @="\"C:\\Users\\X\\AppData\\Local\\Postman\\app-6.0.10\\Postman.exe\" \"%1\""

[HKEY_CURRENT_USER\Software\Classes\postman]Почтальон в это название протокола, настройка в основном через[HKEY_CURRENT_USER\Software\Classes\postman\shell\open\command]адрес, указанный в , чтобы найти программное обеспечение и запустить его. Программное обеспечение для запуска в основном зависит от следующих двух конфигураций:

    Windows Registry Editor Version 5.00
    
    [HKEY_CURRENT_USER\Software\Classes\postman]
    "URL Protocol"=""
    @="URL:postman"
    
    [HKEY_CURRENT_USER\Software\Classes\postman\shell\open\command]
    @="\"C:\\Users\\X\\AppData\\Local\\Postman\\app-6.0.10\\Postman.exe\" \"%1\""

Проанализируйте приведенную выше конфигурацию, что это значит:

  • HKEY_CURRENT_USER\Software\Classes\postman: определяет имя функции драйвера.
  • HKEY_CURRENT_USER\Software\Classes\postman\shell\open\command: определяет путь, по которому находится программа

В соответствии с этими двумя конфигурациями интерфейсная веб-страница может пройтиpostman://протокол для открытия локального приложения почтальона.

Показать результаты:

打开postman
  

MacOS

Открытие приложения в MacOS такое же, как и в iOS, вы можете добавить в свое приложениеURL Schemes.

Info.plist

Каждый раз, когда вы создаете новый проект, Xcode автоматически создает файл Info.plist.Основная функция этого файла — предоставить некоторую конфигурацию приложения во время выполнения.

Info.plistФайл находится в папке приложенияContents/В подкаталоге этот файл сохраняет метаданные пакета приложения. Этот файл необходим для того, чтобы операционная система определяла зависимости и другие свойства.

CFBundleURLTypes: URL-адреса, связанные с этим пакетом приложений. Это словарь, определяющий, что обрабатывает этот пакет.URL schemesи как с этим справиться.

Взяв в качестве примера Foxmail, это конфигурация, связанная с приложением:

	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLName</key>
			<string>mailto</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>mailto</string>
			</array>
		</dict>
	</array>

Что определяет определенный в пакете приложенийURL Schemesдляmailto://.

URL Schemes

Ссылка на ссылку:Что такое URL-схемы

Схемы URL состоят из двух слов:

  • URL, мы все ясны,http://www.apple.comэто URL-адрес, мы также называем его ссылкой или веб-адресом;
  • Схемы, которые представляют местоположение в URL-адресе — самое начальное местоположение, т. е.://предыдущий символ. Напримерhttp://www.apple.comэтот URLSchemesдаhttp.

Согласно нашему использованию схем URL-адресов выше, мы можем легко понять, что в iOS, которая в основном основана на локальных приложениях, мы можем использовать специальный URL-адрес для поиска приложения или даже определенного URL-адреса в приложении, точно так же, как поиск веб-страницы , конкретная функция. И чтобы найти это приложение, это должна быть часть схемы URL-адреса этого приложения, которая находится в начале. такие как текстовые сообщения,sms:

Вы можете понять в полном объеме URL-адреса веб-страницы - то есть его веб-сайт - способ понять приложения URL iOS, микро-канал, чтобы взять на себя веб-сайт Apple и iOS, чтобы сделать простое сравнение:

Интернет (яблоко) iOS-приложение (WeChat
Домашняя страница/Открыть приложение www.apple.com weixin://
Подстраницы/специальные функции www.apple.com/mac/ (страница Mac) weixin://dl/moments (круг друзей)

это здесь,http://www.apple.comа такжеweixin://Они все заявляют, чья это территория. затем вhttp://www.apple.comдобавить после/macперейти к подчиненномуhttp://www.apple.comна одной из веб-страниц (страниц Mac); аналогично, наweixin://добавить послеdl/momentsОн вошел в специфическую функцию WeChat — круг друзей.

Как запросить URL-схемы приложения

Откройте Finder => приложение => щелкните правой кнопкой мыши приложение и выберите Показать содержимое пакета => выберитеContentsв папкеInfo.plistдокумент

显示包内容

Info.plist

URL Schemes

Пример: открыть QQ

Откройте Info.plist, запроситеCFBundleURLSchemesполе, содержимое, определенное в этом поле, может использоваться какURL SchemesОткройте приложение.

Возьмите QQ в качестве примера,qq://а такжеtencent://Может вызвать открытие локальных приложений.

mac打开qq

openqq1

openqq2

Пример: открыть локальное приложение

Windows

Взяв в качестве примера NetEase Cloud Music, в соответствии с описанным выше методом мы открыли редактор реестра, чтобы проверить, определен ли протокол для открытия NetEase Cloud Music, и обнаружили, что соответствующий реестр выглядит следующим образом, а протокол для открытия приложения не определено:

nocloud

К счастью, мы можем настроить реестр в Windows и сделать его эффективным, мы можем создать реестр в любом месте.**.regфайл, отредактируйте с помощью Блокнота:

    Windows Registry Editor Version 5.00
    
    [HKEY_CLASSES_ROOT\cloudmusic]
    "URL Protocol"=""
    @=""
    
    [HKEY_CLASSES_ROOT\cloudmusic\shell\open\command]
    @="\"D:\\CloudMusic\\cloudmusic.exe\"\"%1\""

В данном случае автор назвал егоcloudmusic.reg.

Уведомление:

  1. Именование файла не имеет ничего общего с именем протокола, только[HKEY_CLASSES_ROOT]связанные с полями, определенными после;

  2. @="\"D:\\CloudMusic\\cloudmusic.exe\"\"%1\"""%1" в нем является параметром и не может быть удален по желанию.

После сохранения reg-файла дважды щелкните файл, чтобы зарегистрировать его конфигурацию в системе:

cloudreg1

cloudreg2

cloudreg3

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

hascloud

Чтобы убедиться, что приложение можно открыть:

打开网易云音乐

Конфигурация прошла успешно!

Как узнать адрес приложения

Откройте меню, чтобы найти соответствующее приложение, щелкните правой кнопкой мыши и выберите «Открыть расположение файла»:

menu

Найдя файл, щелкните правой кнопкой мыши и выберите «Свойства», чтобы просмотреть расположение системы:

属性

«Целью» в свойствах является системное расположение, в котором находится программное обеспечение, которое можно скопировать в реестр:

地址

MacOS

В системе Windows мы можем определить протокол открытия приложения через реестр, поэтому можно ли его также изменить в MacOS.Info.plistего настроить?

Взяв в качестве примера Teambition, мы добавляем следующую конфигурацию в его файл Info.plist:

    <key>CFBundleURLTypes</key>
    <array>
    	<dict>
    		<key>CFBundleURLName</key>
    		<string>teambition</string>
    		<key>CFBundleURLSchemes</key>
    		<array>
    			<string>teambition</string>
    		</array>
    	</dict>
    </array>

Повторно запустите приложение, сообщение об ошибке выглядит следующим образом:

tb报错

Введите сафариteambition://Попробуйте открыть, подсказка выглядит следующим образом:

tb报错2

Ау, конфигурация не удалась, у нас нет разрешения на изменение приложения в MacOS.

Как узнать, существует ли пользовательский протокол

Справочное руководство:Используйте JS для обнаружения существования пользовательского протокола

Суммировать

Когда на front-end странице нужно открыть локальное приложение, необходимо проверить, есть ли у локального приложения протокол конфигурации.Если он не настроен, то его можно добавить через реестр в среде Windows, но нельзя добавить в среде MacOS. Каждому пользователю необходимо настроить реестр на своем компьютере, что более ограничено.

Справочная документация:

Разработка для MacOS — открывайте приложения для Mac с помощью Safari

MacOS добавляет схему URL в ваше приложение