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

Beta Testing
1

Summary

[ Try it | GitHub pull request | Implementation progress ]

Update: The web app pull request has been merged into the main Joplin repository. A beta version can be accessed at https://app.joplincloud.com/.

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).

screenshot: Joplin mobile running in both Chrome and Firefox
screenshot: Joplin mobile running in both Chrome and Firefox1920×856 131 KB

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).
  • More recent builds of the web client can be accessed at https://joplin.github.io/web-app/. In the near future, it should also be available at app.joplincloud.com.

  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. ↩︎

15 Likes
2

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?

3
  • 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,

4

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
5

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
6

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

7

Great approach!
How can I connect my own notes to it? Running Joplin portable (for reasons) on all my PCs, synching to my Nextcloud

8

I haven't tested Nextcloud sync with a copy of the web client. However, getting it to work might be similar to the setup for a self-built and hosted copy of Joplin Server.

Enabling access to Joplin Server involves allowing cross-origin access to the web client's domain. Enabling cross-origin access for Nextcloud WebDAV is tracked by this GitHub issue. Owncloud seems to have merged a change that allows users to customize which domains can use its WebDAV API.

For comparison: Joplin Server setup

Joplin Server Setup

With Joplin Server, it's necessary to update the list of domains allowed to connect. In particular, this involves updating corsAllowedDomains:

Adding a new domain to this list should cause the server to add an Access-Control-Allow-Origin: <<origin name here>> header to responses to requests from that domain. This then allows scripts on that domain to receive the response.

2 Likes
9

Perhaps I’m missing this step. But where can I find to get the web client work with Joplin server or whatever…

Then I will try with a copy of my data…

10

How do I connect the web client to my data??

11

Dropbox sync

Dropbox sync should work on all browsers that support the web client.

File system sync

File system sync should work on browsers that support the showDirectoryPicker API.

Joplin Server

Due to CORS restrictions, Joplin Server both requires a patch to work with the web client. See the above for details.

In the near future, this pull request should make it possible for a web client hosted with the domain api.joplincloud.com to connect to a Joplin Server instance.

Nextcloud/WebDAV

Like Joplin Server, Nextcloud and WebDAV servers need to be configured to serve extra HTTP headers. See this upstream Nextcloud issue for details and possible workarounds.

Note: I have not tested the web client with Nextcloud/WebDAV.

2 Likes
12

Thanks. If I get that right, the client connects to my data. Thought I have to host the client own my on systems. Like Joplin Server in Docker ...
Don`t get me wrong, but I feel not very comfortable sending my data to unknown destinations...

1 Like
13

  • Data should be stored offline: Currently, the web client stores data locally on the machine accessing it[1]. Sync should work mostly as it does on mobile and desktop.

    • Edit: This assumes that the server & related infrastructure is secure. At present, loading the web client while connected to the internet uses the latest version of the code from GitHub pages.

  • Possible change — use the cached version of the web app by default: At present, a copy of the web client is stored locally[2]. This local copy is currently only used when offline or if the server seems to be down. However, it could instead default to the offline copy and provide a GUI for installing updates.

    I could see this change having a few benefits and drawbacks:

    • Benefits:
      • If this is implemented, a user would get an "update available" notification (like on desktop). The user would then have the option to review the GitHub pages deployment before installing the update.
      • Users would still have access to locally installed copies of the web client, even if Joplin stops hosting it.
    • Drawbacks:
      • More code to write and maintain: This would require additional logic that checks for and prompts a user to install an update.
      • Edit: As stated below, this still requires trust in the version of the app first fetched from the server.

    Would it make sense to make the web app prefer an offline copy of itself?

Edit: Reformatted & added summaries.

  1. This is done with the Origin Private File System API and @sqlite.org/sqlite-wasm. ↩︎

  2. Relevant code. ↩︎

14

Thanks for the info.
But I have to trust in the info you have given above. Can not check, where data is stored. Again, I do not have reason not to trust you guys, but...

15

Yes definitely.
Not a developer. But wouldn`t it make sense to create a docker container? The everybody can host it on its own server.

16

Not for now. At the moment this is experimental and we don't want to go too far in terms of support and solutions we provide.

Indeed all data is stored locally on your browser. We'll try to make that clear and maybe provide a way to verify that no data is exfiltrated.

17

@laurent:
Yes please provide ways to verify that no data is exfiltrated. I highly appreciate data protection spossibilities with joplin as selfhosting.

In my oppinion it should be no difference if you maintain a docker image for the webclient or maintain the hosting. But perhaps I`m wrong:)

18

Can't really promise anything here though, we'll see. But also there's nothing different about this web app or the desktop or mobile apps. We could be exfiltrating data with any of these, but of course we don't and that can be independently verified by anybody. For the web client too - you can monitor the requests and see that we don't upload any data, other than what you ask the app to do (eg. there will be sync requests if you sync).

4 Likes