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

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

https://habr.com/ru/articles/1023144/

#pwa #вебразработка #html #css #javascript #фронтенд #frontend #localstorage #service_worker #заметки

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

Вместо предисловия: проблема, которая бесила меня годами У каждого из нас есть «чёрная дыра», куда уходят полезные ссылки. Кто-то сохраняет их в «Избранном» браузера, кто-то пишет сам себе в Telegram,...

Хабр

Анатомия чистильщика ссылок: как не сломать веб в Manifest V3

Каждый день мы делимся ссылками в мессенджерах, копируем их из браузера или кликаем по ним. И почти всегда к реальному адресу прилипает хвост из UTM-меток, fbclid , gclid и прочего мусора, которым маркетологи и платформы помечают наш трафик. Создать расширение, которое отрезает этот хвост с помощью регулярного выражения — задача на 10 минут. Но сделать так, чтобы это расширение не сломало работу сайтов, не убило поисковики и не вызвало бесконечные циклы переадресации в современных реалиях Manifest V3 — уже интереснее. Недавно я завершил работу над расширением ZeroTail и хочу поделиться несколькими неочевидными подводными камнями, с которыми столкнулся при реализации авто-очистки URL.

https://habr.com/ru/articles/1019334/

#javascript #расширения #manifest v3 #utmметки #service_worker #chrome_extension

Turbo Native와 Workbox를 활용한 오프라인 우선 전략

Turbo Native 하이브리드 앱에서 오프라인 사용자 경험을 보장하려면 서비스 워커 라이브러리인 Workbox를 활용한 오프라인 우선 전략이 필수적이다.

🔗 원문 보기

Turbo Native와 Workbox를 활용한 오프라인 우선 전략

Turbo Native 하이브리드 앱에서 오프라인 사용자 경험을 보장하려면 서비스 워커 라이브러리인 Workbox를 활용한 오프라인 우선 전략이 필수적이다.

Ruby-News | 루비 AI 뉴스

WebAssembly 기반의 Ruby on Rails: 브라우저 내 풀스택 아키텍처 구현 가이드

WebAssembly 기술을 활용하여 서버 없이 브라우저 탭 내에서 Ruby on Rails의 백엔드, 데이터베이스, 파일 스토리지를 완전히 구동할 수 있습니다.

🔗 원문 보기

WebAssembly 기반의 Ruby on Rails: 브라우저 내 풀스택 아키텍처 구현 가이드

WebAssembly 기술을 활용하여 서버 없이 브라우저 탭 내에서 Ruby on Rails의 백엔드, 데이터베이스, 파일 스토리지를 완전히 구동할 수 있습니다.

Ruby-News | 루비 AI 뉴스

Push-Notifications в PWA и браузере: полная реализация без сторонних сервисов

Полная реализация push-уведомлений в PWA без сторонних сервисов Разбираем архитектуру: Service Worker, Push API, VAPID ключи и Notifications API. Показываем, как настроить PWA для работы на всех платформах, включая iOS. В статье: • Теория всех компонентов системы • Готовый код Service Worker и клиентской части • Backend на Express с отправкой уведомлений • Настройка PWA для iOS 16.4+ • Детекция платформы и предложение установки Все работает из коробки! 🎯

https://habr.com/ru/articles/945870/

#PWA #push_уведомления #push_notifications #push #notifications #service_worker #ios #VAPID #Push_API #Notifications_API

Push-Notifications в PWA и браузере: полная реализация без сторонних сервисов

Service Worker + Push API + VAPID ключи + Notifications API = полноценные push-уведомления в браузере. Никаких внешних сервисов, полный контроль над функциональностью. В отличие от нативных...

Хабр

SW: stale-while-revalidate на практике + гист

Идея простая: В статье разбирается стратегия кэширования stale-while-revalidate в Service Worker — подход, позволяющий мгновенно отдавать пользователю закэшированный контент и параллельно обновлять его в фоне. Рассмотрены сценарии применения (статика, API), потенциальные риски (устаревший HTML, квоты хранилища), а также приведён готовый рабочий пример с регистрацией, SW-кодом, офлайн-страницей и настройкой серверных заголовков. Материал сопровождается ссылкой на архив с исходниками и практическими советами по отладке, оптимизации и интеграции SWR в реальные проекты.

https://habr.com/ru/articles/938060/

#service_worker #swr #stalewhilerevalidate

SW: stale-while-revalidate на практике + гист

Service Worker на практике: стратегия stale-while-revalidate (+ готовый гист) Что делает stale-while-revalidate (SWR) Идея простая: Сразу отдать то, что уже лежит в кэше (stale). Параллельно сходить в...

Хабр

[Перевод] Пишем одностраничное приложение с помощью htmx

JS-библиотеку htmx воспринимают как средство, которое спасает интернет от одностраничных приложений. Всё дело в том, что React поглотил разработчиков своей сложностью (так говорят), а htmx предлагает столь желанное спасение.

https://habr.com/ru/companies/ruvds/articles/849854/

#ruvds_перевод #spa #mpa #одностраничное_приложение #javascript #html #htmx #service_worker

Пишем одностраничное приложение с помощью htmx

JS-библиотеку htmx воспринимают как средство, которое спасает интернет от одностраничных приложений. Всё дело в том, что React поглотил разработчиков своей сложностью (так говорят), а htmx предлагает...

Хабр

Эмуляция бэкенда: как разрабатывать изолированный фронтенд с помощью Mock Service Worker

Всем привет! Сегодня я хочу рассказать о Mock Service Worker — технологии, которая позволяет эмулировать поведение бэкенда в ситуациях, когда по каким-то причинам невозможно использовать реальный бэкенд для полноценной разработки фронтенда. Тем более, что совсем недавно вышла новая мажорная версия библиотеки msw , и в ней достаточно много важных обновлений.

https://habr.com/ru/articles/780200/

#service_worker #mocks #mock #mock_service_worker #mock_server #api_mocking #моки #эмуляция_бэкенда #e2eтесты

Эмуляция бэкенда: как разрабатывать изолированный фронтенд с помощью Mock Service Worker

Всем привет! Сегодня я хочу рассказать о Mock Service Worker — технологии, которая позволяет эмулировать поведение бэкенда в ситуациях, когда по каким-то причинам невозможно использовать реальный...

Хабр