Вместо предисловия: проблема, которая бесила меня годами

У каждого из нас есть «чёрная дыра», куда уходят полезные ссылки. Кто-то сохраняет их в «Избранном» браузера, кто-то пишет сам себе в Telegram, кто-то держит десяток вкладок открытыми «на потом». У меня была та же проблема. Я пробовал Notion, Evernote, Google Keep, Obsidian - всё это мощные инструменты, но для простого «сохранить ссылку и не забыть» они часто избыточны.

Так родилась идея KylikLink - минималистичного PWA-приложения для заметок и ссылок, которое работает без интернета и не требует регистрации.

Почему KylikLink?

Название составное: Kylik (от слова «кулик» - птица, которая вьёт гнездо и собирает в него всё самое нужное) + Link (связь, звено, элемент). Получается «гнездо для важного». Мне хотелось, чтобы название отражало суть: вы собираете в приложение всё, что не хотите потерять.

Технический стек: как это устроено

Приложение - это чистый фронтенд, никакого бэкенда. Всё работает в браузере.

Компонент

Что используется

HTML/CSS/JS

Ванильный JavaScript, без фреймворков

PWA

Service Worker + Manifest

Хранение данных

localStorage (заметки и корзина)

Оффлайн-режим

Service Worker кэширует все файлы

Перенос заметок между устройствами

Ручной экспорт/импорт через JSON

Перевод

Встроенный переключатель RU/ENG

Почему PWA, а не нативное приложение?

PWA позволяет установить приложение на телефон через браузер без публикации в App Store и Google Play. При этом оно:

  • работает оффлайн

  • имеет собственную иконку на рабочем столе

  • открывается в полноэкранном режиме

  • не требует одобрения модераторов

Для небольшого утилитарного приложения это идеальный вариант.

Что умеет KylikLink (версия 1.0)

Функция

Описание

Заметки и ссылки

Поддерживает любой текст, ссылки кликабельны

Закрепление

Важные заметки всегда сверху

Редактирование

Можно исправить или дополнить

Поиск

Мгновенная фильтрация по всем заметкам

Корзина

Удалённые заметки хранятся 30 дней с возможностью восстановления

Экспорт/Импорт

Перенос заметок между устройствами через JSON

Оффлайн-режим

Работает без интернета после первого открытия

Установка на телефон

Через браузер - как нативное приложение

Перевод RU/ENG

Интерфейс переключается, заметки остаются на своём языке

Как работает оффлайн-режим

Service Worker при первом открытии кэширует все файлы приложения (index.html, стили, иконки, manifest.json). При последующих открытиях (даже без интернета) браузер отдаёт файлы из кэша. Заметки хранятся в localStorage, который не требует подключения к сети.

// Пример из sw.js
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Как переносить заметки между устройствами

Данные хранятся только локально - ни в облаке, ни на сервере. Это сделано специально для приватности. Чтобы перенести заметки с одного телефона на другой, нужно:

  1. На первом устройстве нажать «Экспорт» - данные скопируются в буфер обмена.

  2. Отправить их себе в Telegram / WhatsApp / по почте.

  3. На втором устройстве нажать «Импорт» и вставить текст.

Заметки объединятся - старые останутся, новые добавятся.

Какие сложности возникли

1. Сохранение заметок при обновлении

При изменении STORAGE_KEY заметки могли «теряться» (оставались в старом ключе и приложение их не видело). Решение - добавить автоматический перенос из старых версий:

const OLD_STORAGE_KEYS = ['kyliklink_v1'];
for (let oldKey of OLD_STORAGE_KEYS) {
  const oldData = localStorage.getItem(oldKey);
  if (oldData) {
    entries = JSON.parse(oldData);
    persist(); // сохраняем в новом ключе
    break;
  }
}

2. Корзина с автоматической очисткой

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

3. PWA-обновления

Service Worker обновляется только при изменении sw.js. Пришлось добавить механизм принудительной активации нового SW:

self.addEventListener('install', event => {
  self.skipWaiting();
});
self.addEventListener('activate', event => {
  event.waitUntil(caches.keys().then(keys => Promise.all(
    keys.filter(key => key !== CACHE_NAME).map(key => caches.delete(key))
  )));
  return self.clients.claim();
});

Что в планах (версия 2.0)

  • PIN-код на отдельные заметки - любая заметка может быть защищена PIN-кодом. 

  • Напоминания - push-уведомления о важных заметках в нужное время.

  • Чеклисты - заметки в виде списка дел с галочками.

  • Голосовые заметки - запись голосом вместо текста.

Заключение

KylikLink - это пример того, как простое PWA-приложение может решать реальную задачу без сложной инфраструктуры, серверов и регистраций. Оно работает оффлайн, устанавливается на телефон и не отправляет ваши данные в облако.

Если вы тоже устали терять ссылки в «Избранном» и сообщениях самому себе - попробуйте.

👉 https://kyliklink.ru

Полезные ссылки

Приложение создано одним человеком в свободное время. Если найдутся баги или идеи - пишите в комментарии.