SQLite WASM with OPFS: Database in the Browser

Introduction

Medium

What if the browser was the server?

이 글은 기존 SaaS 모델에서 서버가 아닌 브라우저가 백엔드 역할을 하는 새로운 아키텍처를 제안한다. WebAssembly(WASM)와 Origin Private File System(OPFS)을 활용해 사용자의 브라우저 내에서 데이터베이스와 백엔드 로직을 실행함으로써 네트워크 지연과 서버 의존성을 줄인다. Go 언어로 작성된 백엔드를 WASM으로 컴파일해 SQLite 데이터베이스를 브라우저 내 OPFS에 저장하는 프로토타입을 구현했다. 이 접근법은 실시간 협업이 필요 없는 개인용 앱에 적합하며, Notion 같은 실제 서비스도 유사한 방식을 사용한다. 다만 데이터가 브라우저에 종속되므로 데이터 내보내기/가져오기 기능이 필요하다.

https://arthurcornil.com/blog/ship-it-to-the-user/

#wasm #opfs #sqlite #browserbackend #webassembly

Arthur Cornil

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

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

🔗 원문 보기

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

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

Ruby-News | 루비 AI 뉴스
Origin private file system - Web APIs | MDN

"The origin private file system (OPFS) is a storage endpoint provided as part of the File System API, which is private to the origin of the page and not visible to the user like the regular file system. It provides access to a special kind of file that is highly optimized for performance and offers in-place write access to its content."

https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system

#dev #files #opfs #web #webdev
Origin private file system - Web APIs | MDN

The origin private file system (OPFS) is a storage endpoint provided as part of the File System API, which is private to the origin of the page and not visible to the user like the regular file system. It provides access to a special kind of file that is highly optimized for performance and offers in-place write access to its content.

MDN Web Docs

ブラウザの「Origin Private File System(OPFS)」を使ってローカルでのデータ読み書き(ローカルにデータ保持)
https://qiita.com/youtoy/items/37a26c1ad0a2e16e5970?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #JavaScript #opfs #OriginPrivateFileSystem #オリジンプライベートファイルシステム

ブラウザの「Origin Private File System(OPFS)」を使ってローカルでのデータ読み書き(ローカルにデータ保持) - Qiita

はじめに この記事は、「OPFS(Origin Private File System/オリジンプライベートファイルシステム)という、ブラウザのローカルにデータを保存する仕組みに関する内容です。 以下に、MDN での OPFS に関するページや説明を少し掲載します。 ●オ...

Qiita

Nice trick to still run #sqlite #wasm in browser with #opfs enabled if you can't set #coep / #coop on server

https://toot.cafe/@tomayac/114128600602436482

#http #webserver #serviceworkers

Thomas Steiner :chrome: (@[email protected])

📢 New blog post! Setting the COOP and COEP headers on static hosting like GitHub Pages: https://blog.tomayac.com/2025/03/08/setting-coop-coep-headers-on-static-hosting-like-github-pages/. Make your site cross-origin isolated with this one weird trick 🃏!

Toot Café

Who here knows enough #webplatfrom and #webapi to know if relative links exists with the Origin Private File System (#OPFS)?

thanks much for RT and dig to find people knowing...

なにこれすごい #opfs #pwa #javascript
これでこそ Origin Private File System + PWA だ。 QT:
iPadに18禁ゲームをインストールする(ためのWebアプリを作る)
https://zenn.dev/kichikuou/articles/ef05c46e42fd67
iPadに18禁ゲームをインストールする(ためのWebアプリを作る)

Zenn

The #wasm build of #sqlite opens up great new possibilities in the #browser, especially when coupled with the Origin Private File System (#opfs). I've used it to implement importing huge #csv or #jsonl #datasets right in the browser. Import, validate, search, edit, close the browser and continue tomorrow, stream the database (with on-the-fly compression!) to the server when ready – it's all possible!

Another interesting use case I came across today: use it in #golang to get rid of #cgo!

[1/2]

I’ll be in Milan, Italy 🇮🇹 for #Codemotion tomorrow and (half of) the day after to talk about #SQLite, #WebAssembly (#Wasm), and the Origin Private File System (#OPFS). My talk is tomorrow, 16:30 🕟: https://conferences.codemotion.com/milan2023-live/agenda/. If you’re at the conference, be sure to say “ciao” 🤌!
Codemotion Conference Milan 2023 | Agenda

Codemotion Milan 2023