| <!doctype html> |
| <html lang="en-us"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> |
| <title>sqlite3 WASM Demo Page Index</title> |
| </head> |
| <body> |
| <style> |
| body { |
| display: flex; |
| flex-direction: column; |
| flex-wrap: wrap; |
| } |
| textarea { |
| font-family: monospace; |
| } |
| header { |
| font-size: 130%; |
| font-weight: bold; |
| background: #044a64; |
| color: white; |
| padding: 0.5em; |
| border-radius: 0.25em; |
| } |
| .hidden, .initially-hidden { |
| position: absolute !important; |
| opacity: 0 !important; |
| pointer-events: none !important; |
| display: none !important; |
| } |
| .warning { color: firebrick; } |
| </style> |
| <header id='titlebar'><span>sqlite3 WASM demo pages</span></header> |
| <hr> |
| <div>Below is the list of demo pages for the sqlite3 WASM |
| builds. The intent is that <em>this</em> page be run |
| using the functional equivalent of:</div> |
| <blockquote><pre><a href='https://sqlite.org/althttpd'>althttpd</a> -enable-sab -page index.html</pre></blockquote> |
| <div>and the individual pages be started in their own tab. |
| Warnings and Caveats: |
| <ul class='warning'> |
| <li>All of these pages must be served via an HTTP |
| server. Browsers do not support loading WASM files via |
| file:// URLs.</li> |
| <li>Any OPFS-related pages or tests require: |
| <ul> |
| <li>An OPFS-capable browser released after February |
| 2023. Some tests will work with Chromium-based browsers |
| going back to around v102.</li> |
| <li>That the web server emit the so-called |
| <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy'>COOP</a> |
| and |
| <a href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy'>COEP</a> |
| headers. <a href='https://sqlite.org/althttpd'>althttpd</a> requires the |
| <code>-enable-sab</code> flag for that. |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| <div>The tests and demos... |
| <ul id='test-list'> |
| <li>Core-most tests |
| <ul> |
| <li><a href='tester1.html'>tester1</a>: Core unit and |
| regression tests for the various APIs and surrounding |
| utility code.</li> |
| <li><a href='tester1-worker.html'>tester1-worker</a>: same thing |
| but running in a Worker.</li> |
| <li><a href='tester1-esm.html'>tester1-esm</a>: same as |
| <code>tester1</code> but loads sqlite3 in the main thread via |
| an ES6 module. |
| </li> |
| <li><a href='tester1-worker.html?esm'>tester1-worker?esm</a>: |
| same as <code>tester1-esm</code> but loads a Worker Module which |
| then loads the sqlite3 API via an ES6 module. Note that |
| not all browsers permit loading modules in Worker |
| threads. |
| </li> |
| </ul> |
| </li> |
| <li>Higher-level apps and demos... |
| <ul> |
| <li><a href='demo-123.html'>demo-123</a> provides a |
| no-nonsense example of adding sqlite3 support to a web |
| page in the UI thread.</li> |
| <li><a href='demo-123-worker.html'>demo-123-worker</a> is |
| the same as <code>demo-123</code> but loads and runs |
| sqlite3 from a Worker thread.</li> |
| <li><a href='demo-jsstorage.html'>demo-jsstorage</a>: very basic |
| demo of using the key-value VFS for storing a persistent db |
| in JS <code>localStorage</code> or <code>sessionStorage</code>.</li> |
| <li><a href='demo-worker1.html'>demo-worker1</a>: |
| Worker-based wrapper of the OO API #1. Its Promise-based |
| wrapper is significantly easier to use, however.</li> |
| <li><a href='demo-worker1-promiser.html'>demo-worker1-promiser</a>: |
| a demo of the Promise-based wrapper of the Worker1 API.</li> |
| <!--li><a href='demo-worker1-promiser-esm.html'>demo-worker1-promiser-esm</a>: |
| same as the previous demo except loads the promiser from an ESM module.</li--> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| <style> |
| #test-list { font-size: 120%; } |
| </style> |
| <script>//Assign a distinct target tab name for each test page... |
| document.querySelectorAll('a').forEach(function(e){ |
| e.target = e.href; |
| }); |
| </script> |
| </body> |
| </html> |