Как я сделал 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.jsself.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

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

• Документация PWA

• Service Worker API

• localStorage vs IndexedDB

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