Девлог #38 – Нечіткий пошук, мобільний UX і надійність PWA

Платформа коротко

Ретроспектива Хвилі 18

Нечіткий пошук

Девлог #37 відклав нечітке зіставлення як подальшу роботу. Після завершення контенту Хвилі 18 ми випустили повний шар нечіткого пошуку поверх наявної інфраструктури інвертованого індексу. Ключовим обмеженням дизайну було залишитися в межах 15 мс затримки p95 на телефоні середнього класу без жодних мережевих звернень.

Алгоритм: Wagner-Fischer DP (час O(m·n), пам'ять O(m))
  вартість: вставка=1, видалення=1, заміна=1
  Транспозиції (розширення Дамерау): +1 за перестановку сусідніх символів

Політика зіставлення:
  Довжина запиту 1–3: лише точний збіг (дуже короткі запити, без нечіткості)
  Довжина запиту 4–6: приймається відстань редагування ≤ 1
  Довжина запиту ≥ 7: приймається відстань редагування ≤ 2

Фільтрація кандидатів (попереднє відсіювання):
  Спільні триграми: кандидат повинен мати ≥ 1 спільну триграму із запитом
  Зменшує кількість викликів DP приблизно на 95% порівняно з наївним підходом усіх пар

Ранжування "Можливо, ви мали на увазі":
  Кандидати сортуються за: (відстань редагування, показник TF-IDF)
  Показується як вбудована підказка: "Показано результати для bernoulli — можливо, ви мали на увазі bernoulli?"

Вплив на розмір індексу:
  Оригінальний інвертований індекс: 28 КБ gzip
  + Триграмний індекс для генерації кандидатів: +22 КБ gzip
  Разом: 50 КБ gzip  (ціль була 54 КБ; на 7% менше бюджету)

Затримка (еквівалент Moto G Power, обмеження CPU 2×):
  Точний запит:  6 мс p95
  Запит з 1 редагуванням: 11 мс p95
  Запит з 2 редагуваннями: 14 мс p95  (в межах цілі 15 мс)
          

Алгоритм Soundex (варіант US NIST):
  1. Зберегти першу літеру
  2. Відобразити решту приголосних: B,F,P,V → 1;  C,G,J,K,Q,S,X,Z → 2;
     D,T → 3;  L → 4;  M,N → 5;  R → 6
  3. Видалити послідовні дублікати; видалити голосні
  4. Обрізати або доповнити до 4 символів

Приклад:
  "bernoulli" → B654
  "bernuly"   → B654   (однаковий код → фонетичний збіг)

Охоплення:
  Фонетичні збіги спрацьовують лише коли відстань Левенштейна перевищує поріг
  Додає ~8% повноти для запитів з помилками порівняно з самим лише Левенштейном
  Частка хибних спрацювань: 0.3% запитів показують непов'язаний результат першим

Об'єднаний конвеєр на кожне натискання клавіші:
  1. Токенізація запиту
  2. Точний пошук за інвертованим індексом (< 1мс)
  3. Кандидати Левенштейна, відфільтровані триграмами (< 8мс)
  4. Резервний Soundex, якщо < 3 результатів (< 3мс)
  5. Об'єднання, оцінка, рендеринг підказок
          

Покращення мобільного UX

Мобільний трафік становить 48% сесій, але історично мав гірший час залучення через елементи керування, розроблені для комп'ютера. Ця хвиля зміцнила тач-взаємодію в усіх 345 симуляціях без зміни логіки будь-якої симуляції.

Проблема: <input type="range"> на мобільному незручний для пальця та ігнорує pointer-lock
Нова реалізація:
  - Власний <div role="slider"> з мінімальною зоною дотику 44px (WCAG 2.5.5)
  - Контракт подій pointerdown → pointermove → pointerup (обробляє мишу + дотик + перо)
  - setPointerCapture() запобігає втраті відстеження під час швидких свайпів
  - Прискорення на основі швидкості: |dx| > 8px/кадр → крок ×2
Міграція: 1 спільний модуль slider.js, без специфічних для симуляцій змін
          

Застосовується до: 3D-симуляцій на Three.js (OrbitControls) та 2D canvas-симуляцій

Симуляції на Three.js (100+ симуляцій):
  OrbitControls вже обробляє pinch; проблема була в CSS touch-action за замовчуванням pan
  Виправлення: елемент canvas отримує touch-action: none; запобігає прокрутці сторінки на canvas симуляції
  Результат: нуль випадкових прокруток сторінки під час обертання 3D-камери на мобільному

2D canvas-симуляції (~80 симуляцій):
  Нова спільна утиліта pinch.js:
    Відстеження евклідової відстані двох дотиків → генерація синтетичної події "wheel" (deltaY = −Δdist)
    Симуляції, що слухають wheel для зуму, працюють автоматично
    Коефіцієнт масштабу = new_dist / old_dist, обмежений [0.2, 10×]

Скидання подвійним дотиком:
  Послідовність TouchEnd < 300мс і < 5px руху → генерує подію "resetView"
  Усі симуляції з кнопкою скидання тепер також реагують на подвійний дотик
          

Старе: бічна панель плаває над canvas → покриває 40% малого екрана
Нове: bottom-sheet (патерн Material Design) при ширині вікна < 640px

Реалізація:
  - position: fixed; bottom: 0;  transition: transform 300мс ease
  - перетягування "ручки": поріг > 60px свайп вгору → відкриває; свайп вниз → згортає
  - Згорнутий стан: 48px "підглядання" (показує перші 2 елементи керування за кількістю або важливістю)
  - Повністю відкрито: 55vh максимальна висота, overflow-y: auto
  - Затемнення фону: приглушує основний контент при відкритті, дотик закриває

Впровадження: 22 симуляції з найбільшою кількістю параметрів перенесено першими
Симуляції-лабораторні стенди (beam-deflection, bridge-truss тощо): спеціальна 2-колонкова сітка при <480px
          

Надійність PWA

Зміни стратегії кешування:
  Навігаційні запити: NetworkFirst (було CacheFirst)
    → Завжди спочатку пробувати мережу; відкат до кешу, якщо офлайн
  Статичні ресурси (JS/CSS/WASM): StaleWhileRevalidate
    → Віддавати кешоване одразу; оновлювати у фоні
  API / CDN Three.js: CacheFirst з TTL 7 днів
    → Three.js r160 (1.2 МБ) ніколи не завантажується повторно без потреби

Офлайн-сторінки резерву:
  75 сторінок категорій тепер попередньо кешовані (було 0)
  Власна offline.html зі списком нещодавно переглянутого з IndexedDB
  Індикатор офлайну в навбарі: "Ви офлайн — показуємо кешований вміст"

Фонова синхронізація:
  Відкладені записи нещодавно переглянутого при офлайні
  Використовує BackgroundSync API (тег синхронізації "rv-write")
  Резерв: beacon на visibilitychange для браузерів без BackgroundSync
  Сховище: IndexedDB, за ключем slug симуляції, максимум 50 записів, витіснення FIFO

Результати аудиту Lighthouse (мобільний, з обмеженням):
  Продуктивність:      94  (+6 від хвилі 17)
  Доступність:    99  (без змін)
  Найкращі практики:  100
  SEO:             100
  PWA:             100  (нове — InstallPrompt + офлайн-резерв)
          

Контрольний список аудиту платформи Хвилі 18

• ✓ Нечіткий пошук Левенштейна (відстань редагування ≤2) випущено
• ✓ Фонетичний резерв soundex (+8% повноти)
• ✓ Повзунки з перетягуванням дотиком (зона 44px, pointerCapture)
• ✓ Pinch-zoom canvas (2D + 3D симуляції)
• ✓ Панелі параметрів bottom-sheet (точка переходу <640px)
• ✓ Стратегія service worker v18 stale-while-revalidate
• ✓ 75 сторінок категорій попередньо кешовані для офлайн-використання
• ✓ Фонова синхронізація для історії нещодавно переглянутого
• ⚠ Підсвічування результатів пошуку в тексті — відкладено до Хвилі 19

Попередній огляд Хвилі 19