Merge pull request #313 from status-im/unpkg-example

D4nte · web-flow · commit 0db30efc5b32 · 2021-10-13T10:19:21.000+11:00
diff --git a/.cspell.json b/.cspell.json
@@ -40,6 +40,7 @@
     "ipfs",
     "iwant",
     "jdev",
+    "jswaku",
     "keccak",
     "lastpub",
     "libauth",
diff --git a/README.md b/README.md
@@ -32,11 +32,42 @@ Install `js-waku` package:
 npm install js-waku
 ```
 
-### Start a waku node
+### Import js-waku
 
-```ts
+To use js-waku in your application, you can:
+
+use `import`:
+
+```js
 import { Waku } from 'js-waku';
 
+const waku = await Waku.create();
+```
+
+use `require`:
+
+```js
+const jsWaku = require('js-waku');
+
+jsWaku.Waku.create().then(waku => {
+  // ...
+});
+```
+
+Or directly import it in a `<script>` tag:
+
+```html
+<script src='https://unpkg.com/js-waku@0.14.0-rc.0/build/umd/js-waku.min.bundle.js'></script>
+<script>
+  jswaku.Waku.create().then(waku => {
+    // ...
+  }
+</script>
+```
+
+### Start a waku node
+
+```ts
 const waku = await Waku.create({ bootstrap: true });
 ```
 
diff --git a/examples/examples.md b/examples/examples.md
@@ -6,3 +6,4 @@ Here is the list of the code examples and the features they demonstrate:
 - [Ethereum Private Message Web App](eth-pm): Private Messaging, React/TypeScript, Light Push, Signature with Web3, Asymmetric Encryption.
 - [Minimal ReactJS Chat App](min-react-js-chat): Group chat, React/JavaScript, Relay, Protobuf using `protons`.
 - [Minimal ReactJS Waku Store App](store-reactjs-chat): Waku Store, React/JavaScript, Protobuf using `protons`.
+- [Pure Javascript Using Minified Library](unpkg-js-store): Stop retrieving results from Waku Store on condition, Use minified bundle from Unpkg.com, JavaScript. 
diff --git a/examples/unpkg-js-store/README.md b/examples/unpkg-js-store/README.md
@@ -0,0 +1,11 @@
+# Pure Javascript Using Minified Library
+
+**Demonstrates**:
+
+- Waku Store: Using a condition to stop retrieving results from Waku Store.
+- Pure Javascript/HTML.
+- Use minified bundle of js from unpkg.com, no import, no package manager.
+
+This example uses Waku Store to retrieve the latest ping relay message (used for keep alive purposes) and displays its timestamp.
+
+To test the example, simply download the `index.html` file from this folder and open it in a browser.
diff --git a/examples/unpkg-js-store/index.html b/examples/unpkg-js-store/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang='en'>
+
+<head>
+  <meta charset='UTF-8' />
+  <meta content='width=device-width, initial-scale=1.0' name='viewport' />
+  <title>JS-Waku unpkg example</title>
+</head>
+
+<body>
+
+<div><h1>Timestamp of latest relay ping</h1></div>
+<div id='timestamp'></div>
+
+<script
+  src='https://unpkg.com/js-waku@0.14.0-rc.0/build/umd/js-waku.min.bundle.js'></script>
+<script>
+  /**
+   * This example demonstrates how to use the js-waku minified bundle
+   * available on unpkg.com.
+   *
+   * It is a simple scripts that uses Waku Store to retrieve ping relay messages
+   * and displays the timestamp of the most recent ping relay message.
+   *
+   * More explanations are provided in this guide (TODO).
+   */
+  const timestampDiv = document.getElementById('timestamp');
+
+  try {
+    timestampDiv.innerHTML = '<p>Starting waku.</p>';
+    jswaku.Waku.create({ bootstrap: true }).catch(e => {
+        timestampDiv.innerHTML = 'Failed to create Waku: ' + e.toString();
+      }
+    ).then(waku => {
+      timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
+      waku.waitForConnectedPeer()
+        .catch((e) => {
+          timestampDiv.innerHTML = 'Failed to connect to peers' + e.toString();
+        })
+        .then(() => {
+          timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
+
+          const callback = (wakuMessages) => {
+            // Messages are ordered with oldest first
+            // even with page direction `backward`
+            const latestFirst = wakuMessages.reverse();
+            const latestMessage = latestFirst[0];
+            if (latestMessage) {
+              timestampDiv.innerHTML = latestMessage.timestamp;
+            } else {
+              timestampDiv.innerHTML = '<p>No ping message available</p>';
+            }
+
+            // When returning true, `queryHistory` stops retrieving pages
+            // In our case, we only want one message, hence one page.
+            return true;
+          };
+
+          const startTime = new Date();
+          // Only retrieve a week of messages
+          startTime.setTime(Date.now() - 7 * 24 * 60 * 60 * 1000);
+
+          waku.store
+            .queryHistory(['/relay-ping/1/ping/null'], {
+              callback,
+              pageDirection: 'backward',
+              pageSize: 1,
+              timeFilter: {
+                startTime,
+                endTime: new Date()
+              }
+            })
+            .catch((e) => {
+              timestampDiv.innerHTML = 'Failed to retrieve messages' + e.toString();
+            });
+        });
+    });
+  } catch (e) {
+    timestampDiv.innerHTML = 'Failed to start application' + e.toString();
+  }
+</script>
+</body>
+
+</html>
