history.js VS jsbi

I am trying to implement History.js for my ajax site so that I can use forward and back buttons and even bookmarks. However the example @ https://github.com/browserstate/History.js/ has me a bit confused as into how to implement it. Does anyone have a simple tutorial or example on how to use this. An example we can use to start the example is a navigation link such as

I've read all the posts about history.js on stackoverflow including, this, this and this and at looked the source code but as a newcomer to javascript/jquery I'm having trouble figuring out how to actually implement to have html 5 history support and fallback to support html4 browsers such as ie8/9. As I can appreciate the UX benefits from presenting consistent URL's as much as possible, how this solves deep linking and allows for bookmarking I want to implement but I get a bit lost when trying to actually use this on my site.

The problem is well-known — Chrome and Firefox treat that popstate event differently. While Firefox doesn't fire it up on the first load, Chrome does. I would like to have Firefox-style and not fire the event up on load since it just updates the results with exactly the same ones on load. Is there a workaround except using History.js? The reason I don't feel like using it is — it needs way too many JS libraries by itself and, since I need it to be implemented in a CMS with already too much JS, I would like to minimize JS I am putting in it.

import 'dotenv/config'; import * as erc20abi from './abi.json'; import Web3, { Contract, WebSocketProvider } from 'web3'; /* Workaround for JSON.stringify() event logs with BigInt values. We need to stringify event logs for more readable logging in CloudWatch. https://github.com/GoogleChromeLabs/jsbi/issues/30 */ (BigInt.prototype as any).toJSON = function () { return this.toString(); }; /** * Starts the smart contract event listener. * Websocket Provider config: https://docs.web3js.org/api/web3-providers-ws/class/WebSocketProvider * @param chain - Name of the blockchain network for logging purposes. * @param wssEndpoint - Websocket endpoint for the blockchain network. * @param contractAddress - Smart contract address. */ const startEventListener = async (chain: string, wssEndpoint: string, contractAddress: string) => { const provider = new WebSocketProvider( wssEndpoint, {}, { autoReconnect: true, delay: 10000, // Default: 5000 ms maxAttempts: 10, // Default: 5 }, ); provider.on('connect', () => { console.log(`Connected to ${chain} websocket provider`); }); provider.on('disconnect', error => { console.error(`Closed ${chain} webSocket connection`, error); }); const web3 = new Web3(provider); /* Smart contract event listeners Listening to events: - Transfer - Approval */ const contract = new web3.eth.Contract(erc20abi, contractAddress); await subscribeToEvent(chain, contract, 'Transfer'); await subscribeToEvent(chain, contract, 'Approval'); }; /** * Subscribes to a smart contract event. * @param chain - Name of the blockchain network for logging purposes. * @param contract - Smart contract address. * @param eventName - Name of the event to subscribe to. */ const subscribeToEvent = async (chain: string, contract: Contract, eventName: string) => { const subscription = await contract.events[eventName](); subscription.on('connected', subscriptionId => { console.log(`${chain} USDT '${eventName}' SubID:`, subscriptionId); }); subscription.on('data', event => { console.log(`${chain} USDT '${eventName}'`, JSON.stringify({ event })); // cannot json.stringify BigInt... }); subscription.on('changed', event => { // Remove event from local database }); subscription.on('error', error => { console.error(`${chain} USDT '${eventName}' error:`, error); }); }; /* Start smart contract event listeners Chains: - Ethereum */ startEventListener('Ethereum', process.env.ETH_WSS_ENDPOINT!, process.env.ETH_SMART_CONTRACT_ADDRESS!);

Have you considered something like https://github.com/GoogleChromeLabs/jsbi ? That's a pure-JS implementation of BigInt (though it may have some caveats for usage - check the repo for details).

I looked at the repository: https://github.com/GoogleChromeLabs/jsbi