Prototype moving the front-end of Endless Key app (Windows) from Electron to pywebview

[wjt]

We have tested a simple pywebview application on Windows in EK Windows app: Test pywebview as the frontend. It works and reduces a lot of size by using the native webview from system.

We can run the pywebview window accessing the kolibri server which runs in another thread.

Also, have to take care some known things:

• The environment variables setup kolibri-electron/src/index.js
• The content source selection kolibri-electron/src/preload.js

[wjt]

We might hope that this would fix #133 – this could be something we could quickly prototype with a simple application that just uses pywebview and accesses key.endlessos.org

[starnight]

Have a simple PyWebview application browsing https://key.endlessos.org

1. Prepare main.py on Windows as:

   
   #!/bin/env python3

import tempfile import webview

PYWEBVIEW_DATA=tempfile.gettempdir() + "/pywebview"

webview.create_window('Hello world', 'https://key.endlessos.org') webview.start(storage_path=PYWEBVIEW_DATA)

2. Install pyinstaller & pywebview: `python -m pip install pywebview pyinstaller`
3. Compile main.py as a single executable file: `python -m PyInstaller -F .\main.py`
4. The built file is `.\dist\main.exe`  [main.zip](https://github.com/endlessm/endless-key-app/files/12000971/main.zip)

![Image](https://github.com/endlessm/endless-key-app/assets/2100946/6166d3ce-f140-4147-9b60-f0061edf56ce)

[wjt]

With this prototype app, can you test on Vanessa's laptop whether #133 is reproducible?

Then take a brief look at how to start up both a webview and the Django backend. Although it would be neater in some ways to run the two parts in one process, I'm not totally convinced that running the webview and the Django service in threads of the same process is wise. Python has a global interpreter lock which prevents it making good use of multiple threads. (In this case it may be a non-issue because the web view is native code (not bound by the GIL) and presumably uses a separate process for rendering anyway.)

[vanessa-chang]

Tried the main.zip, the issue of the read content presentation is not reproduced. (tried the content from 49er & wikihow)

[starnight]

Tried the main.zip, the issue of the read content presentation is not reproduced. (tried the content from 49er & wikihow)

Ya! Thanks! That encourages me to do next step!

[starnight]

I'm not totally convinced that running the webview and the Django service in threads of the same process is wise. Python has a global interpreter lock which prevents it making good use of multiple threads. (In this case it may be a non-issue because the web view is native code (not bound by the GIL) and presumably uses a separate process for rendering anyway.)

The main process is the "Hellow world", and "Microsoft Edge Webview2"s are sub-processes

[starnight]

Have the new endless-key-app branch test-pywebview.

Follow the build steps to prepare the endless-key-app src with PyWebview.

Then, get into the src folder & python.exe main.pyw. It works as following pictures:

This is a quick prototype without Endless USB key feature. Besides, it does not handle closing thread of kolibri server properly. But, the happy path works at least.

[starnight]

I think current test-pywebview branch can call this done. However, when we are going to change Electron to PyWebview, here are some items we have to take care:

• PyWebview uses system native webview library. We have to detect system's native webview is installed, or not. Windows document shows Detect if a suitable WebView2 Runtime is already installed.
• To compatible with original kolibri-electron.exe's home directory and upgradable, the new PyWebview's executable binary name should be same as kolibri-electron.exe.
• Take care more environment variables stuff, but may be just these if Remove the option to use a physical key with the app happens.
• Use callback function when Kolibri backend is ready, instead of waiting by sleep.
• Find the way to close Kolibri backend gently when the web view is closed.
• Build as a single .exe file, or separately files like current version?

[wjt]

• To compatible with original kolibri-electron.exe's home directory and upgradable, the new PyWebview's executable binary name should be same as kolibri-electron.exe.

Why is it necessary for the binary to have the same name?

[starnight]

• To compatible with original kolibri-electron.exe's home directory and upgradable, the new PyWebview's executable binary name should be same as kolibri-electron.exe.

Why is it necessary for the binary to have the same name?

Good question!

All about the HOME directories:

• Current Endless Key app (Windows)'s HOME directory is C:\Users\dev\AppData\Local\Packages\EndlessOSFoundation.EndlessKey_bt8q3zn5k2ahy\.
• The entry point of current Endless Key app (Windows) is kolibri-electron.exe. So, its HOME directory is C:\Users\dev\AppData\Local\Packages\EndlessOSFoundation.EndlessKey_bt8q3zn5k2ahy\LocalCache\Roaming\kolibri-electron\.

• Kolibri process is forked from kolibri-electron.exe and stores the DB files in its HOME directory C:\Users\dev\AppData\Local\Packages\EndlessOSFoundation.EndlessKey_bt8q3zn5k2ahy\LocalCache\Roaming\kolibri-electron\endless-key:

  
  PS C:\Users\dev> ls C:\Users\dev\AppData\Local\Packages\EndlessOSFoundation.EndlessKey_bt8q3zn5k2ahy\LocalCache\Roaming\kolibri-electron\endless-key\
  
  Directory: C:\Users\dev\AppData\Local\Packages\EndlessOSFoundation.EndlessKey_bt8q3zn5k2ahy\LocalCache\Roaming\kolibri-electron\endless-key

Mode LastWriteTime Length Name

---

d----- 8/7/2023 1:41 PM content d----- 8/7/2023 1:41 PM logs d----- 8/7/2023 1:41 PM process_cache d----- 8/7/2023 1:51 PM sessions -a---- 8/7/2023 1:41 PM 8 .data_version -a---- 8/7/2023 1:55 PM 28114944 db.sqlite3 -a---- 8/7/2023 1:51 PM 32768 db.sqlite3-shm -a---- 8/7/2023 1:57 PM 2418472 db.sqlite3-wal -a---- 8/7/2023 1:58 PM 143360 job_storage.sqlite3 -a---- 8/7/2023 1:41 PM 40960 networklocation.sqlite3 -a---- 8/7/2023 1:41 PM 36864 notifications.sqlite3 -a---- 8/7/2023 1:41 PM 9904 options.ini -a---- 8/7/2023 1:41 PM 1468 plugins.json -a---- 8/7/2023 1:41 PM 40960 syncqueue.sqlite3

To make it upgradable and keep the DB files , we have to follow the pattern `Roaming\kolibri-electron\endless-key`

[starnight]

• PyWebview uses system native webview library. We have to detect system's native webview is installed, or not. Windows document shows Detect if a suitable WebView2 Runtime is already installed.

We can make WebView2 as the dependency in appxmanifest.xml. Document win32dependencies:ExternalDependency (Windows 10, Windows 11) shows the example. Then, system will take care Endless Key app's WebView2 dependency automatically.

[starnight]

141 finished this! Ya!