Web client: Running Joplin Mobile in a web browser with react-native-web

Summary

[ Try it | GitHub pull request | Implementation progress ]

A work-in-progress version of Joplin Mobile can now be used from within a web browser! At present, this web client works best in Chrome, but should also work in recent versions of Firefox and Safari (see the "status" section below).

Also see the relevant GitHub pull request.

Status

Working:

  • Stores data locally in the browser using the Origin Private File System and sqlite-wasm.
  • Dropbox sync
  • File system sync (Desktop Google Chrome only)
  • PWA installation (tested with Safari+iOS, Chrome+Android, and Chrome+Linux)
  • Installing plugins from the file system
  • Editing notes with the mobile markdown editor
  • Rendering basic markdown formatting (headers, bold, italic, tables, etc.).
  • Attaching images and files to notes
  • JEX export
  • Internal links
  • Editing notebooks on long press
  • KaTeX rendering
  • Downloading plugins from the plugin repository
  • Geolocation (disabled by default)

Partially working:

  • Inserting and editing drawings
    • The "edit drawing" button's icon is incorrect.
  • Joplin Server sync
    • Works only if hosted from the same domain as the web client.
    • Can't sync encrypted shared notebooks.
  • Firefox support
    • The initial setup is very slow. This seems to be related to setting up the database for the first time.
  • Camera
    • Only works on mobile devices -- shows a file chooser on desktop.

Not working:

  • Joplin Cloud sync
  • Sync encrypted shared notebooks.
    • Uses a variant of RSA that doesn't seem to be supported by the web crypto.subtle API. See this commit for an untested implementation incompatible with desktop/mobile.
  • OneDrive sync

Other things to do:

  • Fix accessibility issues!
    • Floating action buttons aren't pressable with a screen reader.
    • Android Talkback's tap-to-focus doesn't work, though it does seem to work with iOS VoiceOver.
    • Difficult to move the accessibility focus to the main website on a touchscreen device.
  • Handle the case where multiple copies of the web client are open at the same time.
    • Only allow sync to happen in one copy of the client at a time. Without this, multiple parallel sync tasks could try to upload changes and update the database at the same time (I don't think the sync logic is designed to handle this).
    • Reload notes when updated by another client.
    • Reload settings when updated by another client.
    • Prevent multiple copies of the web client that use the same database[1] from being opened at the same time.
  • Update database queries to work with @sqlite.org/sqlite-wasm.
  • Limit the size of the database — see this MDN article for the maximum allowed storage size by browser.
    • Compress notes before storing in the database?
    • Set the default resource download mode to "manual"? Done.
    • Allow users to sync only a subset of all notebooks?
  • Support the new encryption methods discussed here.
    • The crypto.subtle API might support the needed encryption/decryption/key generation algorithms.
  • Request persistent storage.
  • Decrease size of JavaScript bundle by moving plugin assets and webview JavaScript to separate files.

Demo

A deployed version a the pull request that adds web support to Joplin mobile can be found here:

Notes:

  • Due to the large JavaScript bundle size and number of initial database migrations, the first start might be very slow (see the "Status" section above).
  • personalizedrefrigerator.github.io/joplin/web-client/ is not a permanent URL — the web client will eventually be moved to a different domain name/URL.

  1. Technically, it's web clients that share the same ServiceWorker or can communicate with one another on a BroadcastChannel. This should be equivalent to web clients that would write to the same database file. ↩︎

12 Likes

Amazing! Thanks for the hard work.

So I can use the address Joplin for my own notes? Can I add my Dropbox to sync with my vault? The data will be stored on the PC running my web browser?

  • The web client's data is stored locally on the computer running the web browser. (This is done with the Origin Private File System API).
  • Dropbox sync should work. Note, however, that I've only tested it with a small number of notes and resources. There might be synchronization bugs!

I would advise against this for now, mostly because the web client isn't very stable. In particular,

Thanks for this important work. It's a godsend to those who use work computers that do not accepted user installed software. Looking forward to the maturing of the web client!

2 Likes

Really nice work with a lot of potential in my opinion!

What if we combine Joplin Server with the Joplin Web Client? Example: you log in to Joplin Server with your credentials, and then you can jump straight into the Web Client to edit your notes directly—no app needed.

1 Like

Just putting out there that Joplin audience is quite weary of SaaS features, so tight integration between web client and server might meet some backlash.
Link to open web client from JC login page should be fine though