Кратко

В этой статье пошагово показано, как собрать простой RSS‑ридер на SvelteKit: установка проекта, проверка валидности фида через API‑роут, сохранение подписок в localStorage и отображение записей. Подходит для разработчиков веб‑приложений, желающих быстро прототипировать агрегатор контента.

Важно: пример рассчитан на простую клиентскую реализацию и хранение подписок в локальном хранилище браузера. Для продакшн‑решений рассмотрите серверное хранилище и безопасность CORS/входящих ссылок.

Зачем читать эту инструкцию

• Быстро получить рабочий RSS‑ридер на SvelteKit.
• Понять, как парсить RSS с помощью rss‑parser и показывать список записей.
• Узнать, как сохранять подписки в localStorage и строить маршруты в SvelteKit.

Основные варианты использования

• Агрегация блогов и новостных сайтов.
• Персональная лента для офлайн‑чтения.
• Мини‑панель для обучения или демонстраций.

Установка SvelteKit проекта

Код проекта доступен в репозитории (MIT). Для локальной разработки нужен Node.js и npm или yarn.

В терминале запустите:

npm create svelte  
# or  
yarn create svelte  

Запустится create‑svelte CLI на базе Vite. Выберите имя проекта и шаблон приложения «Skeleton project». Отключите TypeScript, если хотите простую JavaScript‑реализацию. Затем перейдите в папку проекта и установите зависимости:

npm install  
# or  
yarn  

Установите два пакета: rss‑parser для парсинга XML и moment для форматирования дат:

npm install rss-parser  
npm install moment  
# or  
yarn add rss-parser  
yarn add moment  

Запустите дев‑сервер:

npm run dev  
# or  
yarn dev  

Очистите содержимое App.css и измените структуру проекта так, как показано ниже. Создайте недостающие директории и файлы:

Нужная структура в каталоге src:

• src/lib/addToLocalStorage.js
• src/routes/+layout.js
• src/routes/+layout.svelte
• src/routes/+page.svelte
• src/routes/+server.js
• src/routes/feed/[title]/+page.server.js
• src/routes/feed/[title]/+page.svelte

Если команда mkdir ‘[title]’ выдаёт ошибку в вашей оболочке, используйте кавычки, как показано выше.

API‑роут для проверки валидного RSS

В файле routes/+server.js импортируйте json из SvelteKit и Parser из rss‑parser:

import { json } from "@sveltejs/kit";  
import Parser from "rss-parser";  

Затем экспортируйте асинхронную функцию GET, которая принимает объект с url. Она извлекает параметр url из строки запроса, парсит фид и возвращает сериализованный результат:

export async function GET({url}) {  
    const rssLink = url.searchParams.get('url');  
    const parser = new Parser();  
    let feed = await parser.parseURL(rssLink);  
    return json(feed);  
}  

Этот маршрут выполняет серверный запрос к RSS‑ссылке и возвращает разобранный JSON‑фид. В среде разработки он работает как прокси для парсинга XML.

Домашняя страница и проверка фида

По умолчанию файл routes/+page.svelte — это главная страница. В script‑блоке импортируем функцию addToLocalStorage и объявляем переменные:

В разметке добавьте поле ввода и логику ожидания результата парсинга:

  
    
RSS Reader
  
    
Add a new feed:
  
     {  
            if (url.length > 0) {  
                setTimeout(() => {  
                    ready = true;  
                }, 250);  
            } else {  
                ready = false;  
            }  
        }}  
    />  
  

Когда ready истинно, выполняется fetch к API‑роуту и рендерится результат:

{#if ready}  
    {#await fetch(`/?url=${url}`).then((res) => res.json())}  
        
Gathering information... Please wait
  
    {:then data}  
        {#if data.message === 'Internal Error'}  
            
Something went wrong...Check your URL and try again
  
        {:else}  
            
  
                {#if data.image}  
                      
                {/if}  
                
{data.title}
  
                
{data.description || ''}
  
                {console.log(data) || ''}  
            
  
            {  
                addToLocalStorage(data.title, url);  
                location.reload();  
                }}>Add to My Feeds  
        {/if}  
    {/await}  
{/if}  

Базовые стили для страницы:

Настройка layout

В файле +layout.js отключаем prerender и ssr (в данном примере рендерим на клиенте):

export const prerender = false;  
export const ssr = false;  

В +layout.svelte читаем сохранённые подписки из localStorage и показываем навбар с ссылками:

Сохранение валидного URL в localStorage

Функция addToLocalStorage сохраняет массив подписок в localStorage, добавляя новую запись:

export default function addToLocalStorage (title, url) {  
    let feedInLocalStorage = JSON.parse(localStorage.getItem("feeds")) || [];  
  
    localStorage.setItem(  
        "feeds",  
        JSON.stringify([...feedInLocalStorage, {title:title, url:url}])  
    );  
}  

Это простой способ кэшировать подписки у пользователя. Для нескольких устройств или совместного доступа используйте серверную БД.

Рендер списка записей конкретного фида

Файл feed/[title]/+page.server.js получает параметр url и возвращает данные фида:

import Parser from "rss-parser";  
  
export async function load({url}){  
    const rssLink = url.searchParams.get('url');  
    const parser = new Parser();  
    let feed = await parser.parseURL(rssLink);  
    return {...feed};  
}  

В feed/[title]/+page.svelte импортируем moment и используем проп data, чтобы показать элементы:

  

{#if data.items}  
    {#each data.items as item}  
        {@const number = data.items.indexOf(item)}  

        
  
            {number + 1}.   
             {@html item.title}  

            
  
                {item.author || item.creator || ""}  
                {moment(item.isoDate).fromNow()}  
            
  

            
{item.contentSnippet || ""}
  
        
  
    {/each}  
{:else}  
    
Something went wrong...
  
{/if}  

Пример стилей для читаемости:

Поздравляем — у вас есть простой RSS‑ридер на SvelteKit.

Когда RSS подходит, а когда нет

• Подходит: агрегация множества сайтов, офлайн‑чтение, простые уведомления о новых постах.
• Не подходит: интерактивные приложения с реальным временем (чаты), высоко персонализированные ленты с машинным обучением, приложения с требованием строгой безопасности для подписки/авторизации.

Альтернативные подходы

• Серверный агрегатор: сохранять фиды на сервере и отдавать клиенту готовый JSON — лучше для кросс‑устройственного доступа и SLI/SLO.
• Использовать WebSub/Push для получения мгновенных обновлений от поддерживающих серверов.
• Использовать сторонние сервисы‑агрегаторы (Feedly API, Inoreader) для снижения операционных затрат.

Ментальные модели и эвристики

• «Parser as proxy»: выполнять парсинг на сервере (или серверless) — избегайте прямых CORS‑запросов к внешним RSS с клиента.
• «Local first»: сохраняйте подписки локально для быстрого доступа; синхронизируйте с сервером при необходимости.
• «Fail fast»: при неверном URL показывайте понятную ошибку и подсказку, как проверить RSS (валидатор, открытие URL в браузере).

Роли и чеклисты

Разработчик:

• Установить Node.js, создать проект SvelteKit.
• Подключить rss-parser и moment.
• Реализовать routes/+server.js и проверку URL.

Тестировщик:

• Проверить парсинг разных видов фидов (RSS 2.0, Atom).
• Проверить обработку отсутствующих полей (author, isoDate, image).
• Проверить работу localStorage в разных браузерах.

Продукт/UX:

• Добавить подсказки по ошибкам.
• Подумать о лимитах количества подписок и пагинации.

Критерии приёмки

• Пользователь может добавить RSS‑ссылку и получить базовую метаинформацию (title, description, image).
• Добавление сохраняется в localStorage и отображается в навбаре.
• По клику открывается страница с последними записями фида.
• Неблокирующие ошибки: при невалидном URL показывается понятное сообщение.

Набор тестов и сценариев приёмки

1. Добавление валидного RSS: открыть главный экран, вставить корректную RSS‑ссылку, дождаться появления метаинформации, нажать «Add to My Feeds» — элемент появляется в навбаре.
2. Неверная ссылка: вставить url без RSS — приложение показывает ошибку и не сохраняет запись.
3. Пустой feed: фид без items — показать сообщение о пустых записях.
4. LocalStorage кросс‑браузерность: сохранить подписки, закрыть вкладку, открыть снова — подписки остаются.

Безопасность и конфиденциальность

• RSS‑ленты обычно открыты, но ссылки внутри записей могут вести на сторонние ресурсы. Открывайте внешние ссылки в новой вкладке и добавляйте rel=”noopener noreferrer” для безопасности.
• Если храните пользовательские подписки на сервере, обеспечьте контроль доступа и защиту данных (шифрование на хранении при необходимости).
• Для GDPR: если вы синхронизируете подписки на сервере, получите согласие пользователя на хранение персональных данных.

Когда этот подход не подойдёт

• Если требуется подписываться на приватные фиды, требующие авторизации — потребуется серверная логика для хранения доступа.
• Для большого числа фидов и высокой частоты обновлений выгоднее серверный пулер и очередь задач.

Краткая методология разработки (минималистичный SOP)

1. Создать skeleton‑проект SvelteKit.
2. Добавить rss‑parser и moment.
3. Реализовать routes/+server.js для парсинга.
4. Разметить главный экран с проверкой URL.
5. Реализовать сохранение в localStorage и навбар.
6. Создать динамические маршруты feed/[title] для просмотра записей.
7. Тестировать на разных онлайн‑фидах и добавить обработку ошибок.

Мини‑чеклист оптимизации и следующих шагов

• Добавить пагинацию и lazy‑loading для длинных лент.
• Добавить отметки «прочитано/непрочитано» и хранить статус.
• Перевести даты на пользователский часовой пояс.
• Рассмотреть серверную кеш‑политику и SRI для внешних ресурсов.

Однострочный глоссарий

• RSS: формат ленты для распространения обновлений контента.
• Atom: альтернативный формат ленты.
• rss‑parser: npm‑пакет для парсинга RSS/Atom в JavaScript.
• localStorage: клиентское хранилище ключ‑значение в браузере.

Итог

Вы получили рабочую инструкцию по созданию простого RSS‑ридера на SvelteKit с примерами кода, критериями приёмки и рекомендациями по безопасности и масштабированию. Для продакшн‑решений подумайте о серверной стороне, авторизации и устойчивом хранении подписок.

extras: