...

понедельник, 31 августа 2020 г.

Прокачиваем адресную строку браузера

С некоторых пор адресная строка не только отображает адрес текущей страницы но и позволяет открыть страницу поиска в разных поисковых системах. Но далеко не все сайты добавили OpenSearch чтобы можно было легко добавить внутренний поиск по сайту.

В первой части я расскажу как самостоятельно добавить поиск по сайту и другие сервисы. А во второй части расскажу какой сервис кроме поиска при помощи OpenSearch подсказок может организовать сайт.


OpenSearch — набор технологий, позволяющих веб-сайтам и поисковым системам публиковать результаты поиска в форматах, удобных для распространения и сбора.

Прокачиваем адресную строку при помощи ключа %s

Ключ %s в URL заменяется браузерами FireFox и Chrome на введённую фразу после краткого имени URL закладки либо поисковой системы соответственно.


FireFox

Firefox позволяет использование этого ключа в URL закладки. Этот ключ в URL будет заменён на фразу введённую после краткого имени закладки.


Добавляем вручную

Для ручного добавления закладки нужно открыть все закладки (Ctrl+Shift+B). Нажать кнопку управление и пункт "Новая закладка...". В этом случае сразу будут доступны все поля свойств закладки но заполнять их придётся в ручную.


Добавляем автоматически

Если на странице уже есть ссылка с параметром %s(примеры ниже) то её можно добавить через контекстное меню вызванное на ней. Закладке будет автоматически заданно имя из названия ссылки или её атрибута title. В первый раз не будет доступно поле краткое имя.

Для того чтобы иметь возможность ввести краткое имя закладки нужно её через контекстное меню по ссылке добавить второй раз. На второй раз будут доступны уже все поля редактирования свойств закладки в том числе и поле краткое имя.


Chrome

В Chrome URL с ключом %s можно добавить и задать краткое имя на странице управления поисковыми системами.


Добавляем Wayback Machine

Активная ссылка для закладки: Открыть страницу в Wayback Machine
Адрес: "https://web.archive.org/web/%s"
Краткое имя: "-"
Пример: "- https://example.com"

Wayback Machine очень помогает когда попадается сайт недоступный по HTTPS. Я добавляю '- ' перед адресом страницы и она открывается из архива. Если страницы сайта не будет в архиве то Wayback Machine предложит её сохранить.

Активная ссылка для закладки: Сохранить страницу в Wayback Machine
Адрес: "https://web.archive.org/save/%s"
Краткое имя: "-s"
Пример: "-s https://example.com"

Эта команда поможет сразу создать свежую копию страницы сайта.


Добавляем Хабр

Активная ссылка для закладки: Поиск по хабру
Адрес: "https://habr.com/search/?q=%s"
Краткое имя: "-хабр"
Пример: "-хабр Прокачиваем адресную строку"

К сожалению поле поиска по сайту с отключёнными скриптами не открывается. Но мы легко можем сделать поиск из адресной строки.

Активная ссылка для закладки: Открыть статью по номеру
Адрес: "https://habr.com/p/%s"
Краткое имя: -p
Пример: "-p 489638"

Иногда читая статью или комментарии на планшете хочется написать развёрнутый ответ. Это не удобно делать на планшете поэтому необходимо открыть эту же статью на ноутбуке или стационарном ПК. Для того чтобы не искать её можно открыть по номеру.

Активная ссылка: Открыть профиль
Адрес: "https://habr.com/ru/users/%s"
Краткое имя: "-u"
Пример: "-u ivan386"

Без скриптов на Хабре меню пользователя не доступно. Открыв свой профиль я могу получить доступ к 4м его пунктам просто введя в адресной строке "-u ivan386". Соответственно также легко я могу перейти и на профили других пользователей Хабра используя их ник.


Другие сайты

Аналогично можно поступить и с другими сайтами. Только надо помнить что за место %s передаётся URI кодированная строка и пробелы в ней будут заменены на знак +.


Прокачиваем адресную строку пользователей при помощи OpenSearch

OpenSearch полезен для создателей сайтов. Он позволяет указать браузеру шаблон URL поискового запроса и подсказок. И даёт возможность пользователю добавить парой кликов поиск по сайту из адресной строки.

С помощью OpenSearch не обязательно делать только поиск. Благодаря сервису подсказок можно сделать навигацию в адресной строке и отображать заголовки новостей и новых статей.


Особенности Firefox

В Firefox задавая краткое имя для OpenSearch поиска желательно использовать символ @ в начале. После ввода его в адресной строке FireFox отобразит OpenSearch поиска по сайту в списке под адресной строкой. Его можно будет выбрать или ввести вручную краткое имя и нажать пробел после чего будут работать подсказки.

Также OpenSearch поиск по сайту будет доступен в виде кнопки в адресной строке если пользователь будет вводить поисковой запрос сразу. Но в таком случае подсказки уже не будут работать если пользователь не задал этот поиск по умолчанию. И для открытия поиска по сайту нужно будет нажать эту кнопку.


Добавляем Википедию

На Википедии можно протестировать как работает стандартный поиск по сайту с подсказками.

Добавляем:


  1. Откройте википедию
  2. Нажмите три точки в конце адресной строки
  3. Нажмите пункт "Добавить поисковую систему"
  4. Найдите на странице поиск в настройках список "Поиск одним щелчком"
  5. В списке найдите только что добавленную систему "Википедия (ru)"
  6. Сделайте двойной щелчок мышью на поле справа от названия в столбце "Краткое имя"
  7. Введите: @wiki

Тестируем:


  1. В адресной строке вводим символ @
  2. В появившемся списке можно выбрать @wiki либо ввести с клавиатуры и нажать пробел.
  3. Далее начинаем писать поисковой запрос например Open и должен отобразится список подсказок с сайта Википедии.
  4. После ввода OpenSearch или выбора нужного пункта нажимаем Enter и должна открыться статья или страница поиска по Википедии с заданным нами запросом.

Демонстрация не стандартного OpenSearch

В этом примере я хочу показать как можно использовать поиск в адресной строке для навигации и отображения новой информации на сайте.

Добавляем:


  1. Откройте opensearch-demo
  2. Нажмите три точки в конце адресной строки
  3. Нажмите пункт "Добавить поисковую систему"
  4. Найдите на странице поиск в настройках список "Поиск одним щелчком"
  5. В списке найдите только что добавленную систему "Демонстрация"
  6. Сделайте двойной щелчок мышью на поле справа от названия в столбце "Краткое имя"
  7. Введите: @demo

Тестируем:


  1. В адресной строке вводим символ @
  2. В появившемся списке можно выбрать @demo либо ввести с клавиатуры и нажать пробел.
  3. Далее пишем - и должен отобразится список команд.
  4. Выбираем статьи и после нажатия пробела должен появится список статей.
  5. Теперь можно выбрать одну из статей и нажать Enter чтобы она открылась или нажать два раза Esc чтобы в адресной строке снова отобразился адрес текущей страницы.

Как это сделать

Для того чтобы браузер узнал о наличии OpenSearch у сайта на странице в <head> нужно добавить тег:

<link rel="search"
        href="https://example.com/opensearchdescription.xml"
        type="application/opensearchdescription+xml"
        title="Search" />

В самом файле opensearchdescription.xml:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">

  <!-- название поиска -->
  <ShortName>Search</ShortName>

  <!-- ссылка на изображение для кнопки поиска (не обязательное поле) -->
  <Image type="image/png">https://example.com/websearch.png</Image>

  <!-- шаблон URL поискового запроса -->
  <!-- Firefox требует наличия Url с типом "text/html" -->
  <Url  method="get" type="text/html"
       template="https://example.com/?q={searchTerms}"/>

  <!-- шаблон URL подсказок (не обязательное поле) -->
  <Url  method="get" type="application/x-suggestions+json" 
     rel="suggestions"
     template="https://example.com/suggest?q={searchTerms}" />

</OpenSearchDescription>

Соответственно браузер будет обращаться по указанным URL а {searchTerms} будет браузером заменятся на поисковую фразу введённую пользователем. Важно помнить что браузер заменяет пробелы знаком '+' и URI кодирует введённый запрос.

По URL адресу подсказок сайт должен отдавать JSON файл такого вида:

["{searchTerms}",[
"Первая подсказка",
"Вторая подсказка"
]]

Здесь вместо {searchTerms} должен быть оригинальный запрос пользователя.

Пример:
В адресной строке: "@wiki XML Encryption"
Ответ сервера JSON:

["XML Encryption", ["XML Encryption"]]

Используем OpenSearch не стандартно

Кроме собственно поиска в подсказках можно реализовать сервисы для сайта.


Как это мог бы реализовать Хабр

Было бы удобно не открывая новой страницы проверить не появились ли на сайте новые статьи, новости или комментарии.

Например:

Краткое имя: @habr


  1. Список команд
    Команда: @habr -
    Пример подсказок:

    статьи
новости
комментарии

    Вводить каждую команду вручную не удобно да и лишние запросы к серверу поэтому по запросу может отображаться список доступных команд разделов сайта. В случае команды выбираем нужную и нажимаем пробел. В случае если это страница сайта(статья например) то выбираем и нажимаем сразу Enter.


  2. Статьи
    Команда: @habr статьи
    Пример подсказок:

    Прогрессивная загрузка XML страниц
XML сайты в результатах поиска
Межпланетная файловая система — Простой блог в IPFS при помощи XSLT
Качаем 16GB торрент через планшет с 4GB свободного места

    В подсказках могут отображаться заголовки свежих статей. У меня под адресной строкой показывает максимум 9 строк из подсказок. Две из них можно использовать для навигации по списку дальше и назад.


  3. Новости
    Команда: @habr новости
    Пример подсказок:

    Учёного засосало в квантовый анигилятор чёрной дыры после открытия микроволновки
Институт высоких технологий по переливанию из пустого в порожнее открыл свои двери
Продана первая копия игры кликера "Я миллионер" за $1000000

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


  4. Комментарии
    Команда: @habr комментарии
    Пример подсказок:

    Что не так с Хабром

    В подсказках могут отображаться список заголовков статей со свежими комментариями. Но тут у Хабра может возникнуть проблема так как FireFox похоже не передаёт куки в OpenSearch. Но её можно решить задавая дополнительный идентификатор пользователю в URL подсказок при добавлении.


Если какой то пункт привлёк то выбираем и нажимаем Enter. Если ничего не привлекло то два раза Esc и продолжаем читать открытую статью.


Заключение

В интернете становится всё меньше и меньше поисковиков которые самостоятельно индексируют весь интернет. Пользователи и сайты в конечном итоге могут остаться под управлением одного монополиста который сможет диктовать правила шантажируя сайты исключением из индекса.

OpenSearch это первый шаг к распределённому поиску который позволит пользователям искать по сайту напрямую обращаясь к нему из адресной строки.


Ссылки

Спецификация OpenSearch на GitHub
Справка по OpenSearch на MDN

Let's block ads! (Why?)

на
Ярлыки: ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)