Как кнопка веб-браузера Spotify взаимодействует с приложением Spotify?

Проверьте эту кнопку воспроизведения, полностью написанную, используя javascript: определить кнопку воспроизведения.

Обратите внимание, что при нажатии воспроизведения Spotify начнет воспроизведение музыки. Хорошо, я полагаю, что это сделано через некоторую ссылку на конкретный протокол (например, spotify://play), хотя я мог ошибаться. Но сумасшедшая часть заключается в том, что если вы перестанете играть музыку в Spotify, кнопка будет обновлена ​​в браузере, чтобы показать, что музыка перестала играть! Как это работает?

Вы можете посмотреть источник здесь.

Ответы

Ответ 1

Рабочий стол запускает сервер на *.spotilocal.com на вашем компьютере, а затем в Интернете встроенный проигрыватель (пример) выберет имя субдомена (пример: fdxubmxkqp.spotilocal.com).

Затем он запрашивает локальный серверный API, примеры:

https://fdxubmxkqp.spotilocal.com:4370/service/version.json
https://fdxubmxkqp.spotilocal.com:4370/simplecsrf/token.json

И он просто возвращает некоторый JSON:

{
"version": 9, 
"client_version": "1.0.10.107.gd0dfca3a"
}

Смотрите этот снимок экрана для получения дополнительной информации, или вы можете получить ту же информацию, перейдя в news.spotify.com и с помощью сетевого инспектора с spotilocal в качестве фильтра.

enter image description here

Ответ 2

(Обратите внимание: это не так, как они это делают, но это по-прежнему действительный ответ для кого-то, кто хочет реализовать что-то подобное)

Использование обработчиков содержимого пользовательского протокола

Он регистрирует обработчик содержимого пользовательского протокола. Вы можете регистрировать протоколы через свой браузер для любого протокола "web-*", чтобы ваш сайт обрабатывал этот протокол, но вы также можете иметь приложения, когда они устанавливают протокол регистрации. (Так работает Spotify). См. Эту статью здесь:

Регистрация приложения в протоколе URL

Ваши браузеры могут быть настроены для распознавания определенных обработчиков.

Я не уверен, как работает каждый браузер, я считаю, что он работает на уровне реестра для Internet Explorer в соответствии с приведенной выше статьей.

В любом случае, в Chrome и Firefox существует функция window.navigator.registerProtocolHandler для регистрации ваших протоколов.

Смотрите здесь: https://developer.mozilla.org/en-US/docs/DOM/navigator.registerProtocolHandler

Кроме того, ознакомьтесь с этой краткой статьей. (Это очень редко по информации)

Chrome 13, наконец, включает navigator.registerProtocolHandler. Этот API позволяет веб-приложениям регистрироваться как возможные обработчики для определенных протоколов. Например, пользователи могут выбрать ваше приложение для обработки ссылок "mailto".

Зарегистрируйте схему протокола, например:

navigator.registerProtocolHandler(
    'web+mystuff', 'http://example.com/rph?q=%s', 'My App');

В случае, если я не сделал это ясным в своем ответе, я представил информацию о том, как веб-приложения могут регистрировать свой собственный протокол, а также как настольные приложения могут регистрировать новый протокол. (Любое веб-приложение должно иметь префикс web-*, чтобы избежать проблем с безопасностью)

Ответ 3

Пунктирная кнопка воспроизведения длинных опросов (через HTTPS) приложение-аппликация, запущенная на локальном хосте, для обновления состояния.