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

personalizedrefriger · 2024-06-24T21:45:56.815Z

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 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
- It might be necessary to add an Access-Control-Allow-Origin header with the web client's domain header to responses.
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.
- Joplin uses double quotes in some places where it should use single quotes. (Related issue in another project).
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:

app.joplincloud.com

Joplin

Joplin Mobile (Web) -- Access your notes from a web browser!

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.
- Previously, the web client was hosted at https://personalizedrefrigerator.github.io/joplin/web-client/. A version of the web client can still be accessed at this URL.

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

foto16 · 2024-06-25T00:28:31.457Z

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?

personalizedrefriger · 2024-06-25T06:14:27.728Z

foto16:

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!

foto16:

So I can use the address Joplin for my own notes?

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

~~At present, having the web client open in multiple tabs at the same time could cause data corruption.~~
- ~~Currently, it's possible for multiple tabs to try to sync at the same time.~~
- Edit: This has been addressed. The web client now prevents multiple copies of itself from being open at the same time.
The web client is auto-built from this work-in-progress pull request. New changes are being made to it frequently and these could potentially introduce sync and/or startup bugs.
Web browsers can clear locally-stored data for websites when the computer is low on memory. The web client requests persistent storage, which should prevent its data from being auto-cleared. However, I haven't tested whether the web client's data is preserved when a computer is low on memory.

foto16 · 2024-06-25T13:57:28.578Z

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!

tobias0409 · 2024-07-04T16:27:20.010Z

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.

graphit0 · 2024-07-04T18:58:25.175Z

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

534346346347636 · 2024-07-22T11:55:45.973Z

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

personalizedrefriger · 2024-07-22T12:21:43.334Z

534346346347636:

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

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:

github.com

laurent22/joplin/blob/85e57a3953d7788cd28a1bca61fffc5b743b0b12/packages/server/src/app.ts#L133


      
          
          	const envVariables = parseEnv(fullEnv, defaultEnvVariables[env]);
          
          	const app = new Koa();
          
          	// Note: the order of middlewares is important. For example, ownerHandler
          	// loads the user, which is then used by notificationHandler. And finally
          	// routeHandler uses data from both previous middlewares. It would be good to
          	// layout these dependencies in code but not clear how to do this.
          	const corsAllowedDomains = [
          		'https://joplinapp.org',
          	];
          
          	if (env === Env.Dev) {
          		corsAllowedDomains.push('http://localhost:8077');
          	}
          
          	function acceptOrigin(origin: string): boolean {
          		const hostname = (new URL(origin)).hostname;
          		const userContentDomain = envVariables.USER_CONTENT_BASE_URL ? (new URL(envVariables.USER_CONTENT_BASE_URL)).hostname : '';

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.

534346346347636 · 2024-07-22T13:00:33.514Z

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…

534346346347636 · 2024-07-24T19:32:55.273Z

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

personalizedrefriger · 2024-07-24T19:55:43.189Z

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.

534346346347636 · 2024-07-24T20:10:12.015Z

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

personalizedrefriger · 2024-07-24T20:50:19.111Z

534346346347636:

Don`t get me wrong, but I feel not very comfortable sending my data to unknown destinations...

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.

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

534346346347636 · 2024-07-24T20:55:50.595Z

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

534346346347636 · 2024-07-24T21:56:55.067Z

personalizedrefriger:

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

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.

laurent · 2024-07-24T22:14:27.636Z

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.

534346346347636 · 2024-07-25T14:30:43.172Z

@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:)

laurent · 2024-07-25T18:09:27.008Z

534346346347636:

Yes please provide ways to verify that no data is exfiltrated

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

wirre-Drohne · 2024-10-18T13:43:06.122Z

TL;DR: I want to work with the web client despite its beta/demo status because I can’t install the Joplin Desktop app on my work laptop. I wonder whether I would just open https://app.joplincloud.com/ and start inserting (pasting) my notes.

Hello! I've been using Joplin (mostly Desktop, sometimes Android app) for a few years now, for some private use cases. I'd love to use it for work as well. Local storage on my work laptop would be fine, I wouldn't mind exporting a JEX archive every night to save everything and to take precaution for the fact that it’s beta/demo. So the web client is exactly what I need.

I would start with fifteen or twenty notes from another application (markdown format), so I could set everything up by pasting each note into a new note in the web client. In the mornings, I'd just open https://app.joplincloud.com/ again, and if for some reason my browser (Firefox) has messed up the permanent storage of my notes, I could import the JEX archive from the previous night. Right?

The fact that I open the same address as anyone else who tries the beta/demo version (https://app.joplincloud.com/) doesn’t mean that anyone can access or overwrite what I have written – since the address opens only the client, which then pulls the notes from the local storage of my browser, except when I open it on a new machine for the first time and it shows the five standard welcome notes. Correct? Thanks everyone!!

personalizedrefriger · 2024-10-18T15:58:46.680Z

wirre-Drohne:

TL;DR: I want to work with the web client despite its beta/demo status because I can’t install the Joplin Desktop app on my work laptop. I wonder whether I would just open https://app.joplincloud.com/ and start inserting (pasting) my notes.

That should be fine, but I would suggest creating regular backups.

Notes:

I've been using the web app regularly for the last few months. The most significant issue I've experienced is likely this (now fixed) sync issue: automatic attachment download was temporarily broken.
If you want to avoid issues related to changes to app.joplincloud.com, you can:
- Disconnect the computer from the internet before loading app.joplincloud.com. This loads a locally saved copy of app.joplincloud.com instead of fetching it from the internet.
- Self-host a copy of the web app. This is the GitHub actions script used to deploy the web app.

wirre-Drohne:

if for some reason my browser (Firefox) has messed up the permanent storage of my notes, I could import the JEX archive from the previous night. Right?

Yes, that should be true (though I've only tested import with small JEX archives). It should also be possible to import the JEX archives from the Joplin desktop app.

Note: I would suggest using Chrome or Safari instead of Firefox (database access in Firefox is very slow).

wirre-Drohne:

The fact that I open the same address as anyone else who tries the beta/demo version (https://app.joplincloud.com/) doesn’t mean that anyone can access or overwrite what I have written – since the address opens only the client, which then pulls the notes from the local storage of my browser, except when I open it on a new machine for the first time and it shows the five standard welcome notes. Correct?

From "Where is my data stored?" in the web app FAQ:

Like Joplin Mobile, Joplin Web is local-first. Notes and attachments are stored locally on your computer, but can optionally be synced with one of the supported sync targets. As a result, Joplin Web can be used offline.