Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neo-ciber94/offline-svelte-todo-app
A todo app with offline first support in svelte5
https://github.com/neo-ciber94/offline-svelte-todo-app
docker offline-first sql-js sqlite svelte svelte5 wasm
Last synced: 8 days ago
JSON representation
A todo app with offline first support in svelte5
- Host: GitHub
- URL: https://github.com/neo-ciber94/offline-svelte-todo-app
- Owner: Neo-Ciber94
- Created: 2024-08-05T01:16:34.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-01T15:55:42.000Z (3 months ago)
- Last Synced: 2024-10-12T07:15:45.345Z (about 1 month ago)
- Topics: docker, offline-first, sql-js, sqlite, svelte, svelte5, wasm
- Language: TypeScript
- Homepage: https://offline-svelte-todo-app.onrender.com
- Size: 1.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Offline-First Todo App
A simple offline-first todo app made with Svelte 5 and Sqlite.
## How it works?
On the server we use a `sqlite` database to store the todos, on the client we also use `sql.js` which is a version of
sqlite compiled to `WASM`.
All the routes are prerendered and all the static files are cache and serve from a `service worker` when offline.
We also run a node server within the same app, I patched the `@sveltejs/adapter-node` so it can generate a fallback page that is used for dynamic routes.
- While the user have connection (online) each time a todo is added, updated or deleted, we make a call to the backend to create/update/delete that todo,
and also update the local database.
- When the user have not connection (offline) we only write in the local database and also keep track of the added/updated/delete (currently in `localStorage`),
after the user recover the connection we make a request to the backend with all the records that where affected while offline to synchronize with the backend.
- Each time the page refresh if the user is online we get all the records from the backend and recreate the local database.
```mermaid
graph TD;
subgraph Server
DB[(SQLite Database)]
NodeServer[Node.js Server]
AdapterPatch[Svelte Adapter Node Patched]
ServiceWorker[Service Worker]
end
subgraph Client
LocalDB[(sql.js WASM)]
localStorage[(localStorage)]
end
subgraph ConnectionStatus
Online[Online]
Offline[Offline]
end
subgraph TodoActions
AddTodo[Add Todo]
UpdateTodo[Update Todo]
DeleteTodo[Delete Todo]
RefreshPage[Refresh Page]
end
TodoActions -->|if Online| Online
TodoActions -->|if Offline| Offline
Online -->|Sync with backend| NodeServer --> DB
Online -->|Update local DB| LocalDB
Online -->|Sync offline changes| NodeServer
Online -->|Sync offline changes| LocalDB
Online -->|Refresh Page| NodeServer -->|Fetch all records| LocalDB
Offline -->|Update local DB| LocalDB
Offline -->|Track changes| localStorage
NodeServer --> AdapterPatch
AdapterPatch -->|Generate fallback page| NodeServer
ServiceWorker -->|Cache static files| Client
NodeServer -->|Communicate with Client| Client
```
## Screenshots
