Как я сделал PWA-приложение для заметок и ссылок за вечер (и почему оно работает без интернета)

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

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

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

Почему KylikLink?

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

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

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

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

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

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

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

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

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

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

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

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

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 ^[1]

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

• Документация PWA ^[2]

• Service Worker API ^[3]

• localStorage vs IndexedDB ^[4]

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