From 360c8aab20b39e1d4c9e1a3f566834d8086b2ae2 Mon Sep 17 00:00:00 2001 From: Haseeb Qureshie Date: Tue, 7 Jan 2025 09:46:37 +0100 Subject: [PATCH 1/7] added application/octet-stream section --- .../docs/11-guides/File-System-support.md | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md index d45da27a..20dcb0e2 100644 --- a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md +++ b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md @@ -69,6 +69,31 @@ Files in the WebDevice are accessed relative to the current page's URL. For exam > [!note] Note > It's important to note that this behavior depends on the current page's URL, as it uses a relative path. For more predictable results, it's recommended to use absolute paths when possible. +### Using `application/octet-stream` for WebDevice directories + +To handle files from WebDevices properly, set default_type `application/octet-stream`. This ensures that files are treated as binary data. **Only apply this to WebDevice directories**, or it may cause issues like broken images or malfunctioning scripts. + +**Nginx configuration example**: + +```nginx +http { + # Set default type to application/octet-stream for WebDevice directories + default_type application/octet-stream; + + server { + listen 8080; + server_name localhost; + + gzip on; + gzip_types application/javascript application/wasm text/plain application/octet-stream; + + # Other configurations go here (see full basic server guide for details) + } +} +``` + +For a full server setup and additional details, check our [basic server guide](/docs/guides/nginx). + ## IDBDevice IDBDevice provides a persistent, read-write filesystem using the browser's IndexedDB. It's ideal for storing data that should persist between sessions. From a913b5a9be47e726ca9b285cb572b52d358466e5 Mon Sep 17 00:00:00 2001 From: Haseeb Qureshie Date: Mon, 13 Jan 2025 16:33:43 +0100 Subject: [PATCH 2/7] changed nginx example, added more text --- .../docs/11-guides/File-System-support.md | 49 ++++++++++++++++--- 1 file changed, 43 insertions(+), 6 deletions(-) diff --git a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md index 20dcb0e2..5ebfecc3 100644 --- a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md +++ b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md @@ -71,27 +71,64 @@ Files in the WebDevice are accessed relative to the current page's URL. For exam ### Using `application/octet-stream` for WebDevice directories -To handle files from WebDevices properly, set default_type `application/octet-stream`. This ensures that files are treated as binary data. **Only apply this to WebDevice directories**, or it may cause issues like broken images or malfunctioning scripts. +To handle files from WebDevices properly, set default_type `application/octet-stream`. This ensures that files are treated as binary data. **Only apply this to WebDevice directories**, or it may cause issues with image loading and JavaScript execution. + +**Creating the Webdevice:** + +```js +const webDevice = await CheerpX.WebDevice.create("/webdevice"); +``` **Nginx configuration example**: ```nginx +worker_processes 1; +error_log nginx_main_error.log info; +pid nginx_user.pid; +daemon off; + +events { + worker_connections 1024; +} + http { - # Set default type to application/octet-stream for WebDevice directories - default_type application/octet-stream; + default_type application/octet-stream; + access_log nginx_access.log; + error_log nginx_error.log info; + + sendfile on; server { - listen 8080; - server_name localhost; + listen 8080; + server_name localhost; gzip on; gzip_types application/javascript application/wasm text/plain application/octet-stream; - # Other configurations go here (see full basic server guide for details) + charset utf-8; + + location / { + root .; + index index.html index.htm; + add_header 'Cross-Origin-Opener-Policy' 'same-origin' always; + add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always; + } + + location /webdevice/ { + root .; + autoindex on; + types { } + default_type application/octet-stream; + add_header 'Cross-Origin-Opener-Policy' 'same-origin' always; + add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always; + } + } } ``` +To verify it's working, simply navigate to `http://localhost:8080/webdevice/` in your browser. + For a full server setup and additional details, check our [basic server guide](/docs/guides/nginx). ## IDBDevice From 1677139febcab1c9ecd036b146719038a350cc71 Mon Sep 17 00:00:00 2001 From: Haseeb Qureshie Date: Mon, 13 Jan 2025 16:41:55 +0100 Subject: [PATCH 3/7] Added comment --- sites/cheerpx/src/content/docs/11-guides/File-System-support.md | 1 + 1 file changed, 1 insertion(+) diff --git a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md index 5ebfecc3..103ab261 100644 --- a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md +++ b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md @@ -76,6 +76,7 @@ To handle files from WebDevices properly, set default_type `application/octet-st **Creating the Webdevice:** ```js +// The path must match the nginx location block (e.g., /webdevice in the nginx configuration) const webDevice = await CheerpX.WebDevice.create("/webdevice"); ``` From 40992e404ddc87e2d5feb09b295c58427e385b16 Mon Sep 17 00:00:00 2001 From: Haseeb Qureshie Date: Wed, 15 Jan 2025 18:22:27 +0100 Subject: [PATCH 4/7] changed nginx example --- .../src/content/docs/11-guides/File-System-support.md | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md index 103ab261..8c664649 100644 --- a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md +++ b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md @@ -99,6 +99,9 @@ http { sendfile on; + add_header 'Cross-Origin-Opener-Policy' 'same-origin' always; + add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always; + server { listen 8080; server_name localhost; @@ -111,8 +114,6 @@ http { location / { root .; index index.html index.htm; - add_header 'Cross-Origin-Opener-Policy' 'same-origin' always; - add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always; } location /webdevice/ { @@ -120,16 +121,11 @@ http { autoindex on; types { } default_type application/octet-stream; - add_header 'Cross-Origin-Opener-Policy' 'same-origin' always; - add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always; } - } } ``` -To verify it's working, simply navigate to `http://localhost:8080/webdevice/` in your browser. - For a full server setup and additional details, check our [basic server guide](/docs/guides/nginx). ## IDBDevice From 3160b3817db45eba95a8f443a801f3075e8a6af4 Mon Sep 17 00:00:00 2001 From: Haseeb Qureshie Date: Wed, 15 Jan 2025 18:24:01 +0100 Subject: [PATCH 5/7] prettier --- sites/cheerpx/src/content/docs/11-guides/File-System-support.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md index 8c664649..57c4c86d 100644 --- a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md +++ b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md @@ -100,7 +100,7 @@ http { sendfile on; add_header 'Cross-Origin-Opener-Policy' 'same-origin' always; - add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always; + add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always; server { listen 8080; From b627850883a2cfdd868f7078c6903368fb8643a4 Mon Sep 17 00:00:00 2001 From: Haseeb Qureshie Date: Thu, 16 Jan 2025 12:17:03 +0100 Subject: [PATCH 6/7] Changed text --- .../src/content/docs/11-guides/File-System-support.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md index 57c4c86d..d481b1d0 100644 --- a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md +++ b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md @@ -71,7 +71,9 @@ Files in the WebDevice are accessed relative to the current page's URL. For exam ### Using `application/octet-stream` for WebDevice directories -To handle files from WebDevices properly, set default_type `application/octet-stream`. This ensures that files are treated as binary data. **Only apply this to WebDevice directories**, or it may cause issues with image loading and JavaScript execution. +`application/octet-stream` is a MIME type used to indicate that a file is binary data. It tells the server and client to treat the file as raw bytes, rather than interpreting it as text or any specific format. This is important for files like images or videos, ensuring they are delivered correctly without being changed. + +In CheerpX, **you must use this MIME type for WebDevice directories** to handle files properly as binary data, preventing issues with images, scripts, and other non-text files. **Creating the Webdevice:** @@ -99,15 +101,15 @@ http { sendfile on; - add_header 'Cross-Origin-Opener-Policy' 'same-origin' always; - add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always; + add_header 'Cross-Origin-Opener-Policy' 'same-origin' always; + add_header 'Cross-Origin-Embedder-Policy' 'require-corp' always; server { listen 8080; server_name localhost; gzip on; - gzip_types application/javascript application/wasm text/plain application/octet-stream; + gzip_types application/javascript application/wasm text/plain; charset utf-8; @@ -116,6 +118,7 @@ http { index index.html index.htm; } + # Create the WebDevice for handling files in the /webdevice directory location /webdevice/ { root .; autoindex on; From 874f2bcc4010a1e2837036fbb6b1561b8803c502 Mon Sep 17 00:00:00 2001 From: Haseeb Qureshie Date: Thu, 16 Jan 2025 12:31:04 +0100 Subject: [PATCH 7/7] Changed text --- .../cheerpx/src/content/docs/11-guides/File-System-support.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md index d481b1d0..04f74018 100644 --- a/sites/cheerpx/src/content/docs/11-guides/File-System-support.md +++ b/sites/cheerpx/src/content/docs/11-guides/File-System-support.md @@ -71,9 +71,9 @@ Files in the WebDevice are accessed relative to the current page's URL. For exam ### Using `application/octet-stream` for WebDevice directories -`application/octet-stream` is a MIME type used to indicate that a file is binary data. It tells the server and client to treat the file as raw bytes, rather than interpreting it as text or any specific format. This is important for files like images or videos, ensuring they are delivered correctly without being changed. +`application/octet-stream` is a MIME type used to indicate that a file is binary data, instructing the server and client to treat the file as raw bytes instead of interpreting it as text or any other format. -In CheerpX, **you must use this MIME type for WebDevice directories** to handle files properly as binary data, preventing issues with images, scripts, and other non-text files. +In CheerpX, **make sure to apply the `application/octet-stream` MIME type** to WebDevice directories to handle files correctly as binary data, preventing issues with images, scripts, and other non-text files. **Creating the Webdevice:**