Setting up a Webapp

This guide explains how you can set up a webapp to be used along with RapidWebView SDK.

The webapp needs to use Webpack, a Javascript bundler. Webpack analyses all modules in your app, creates a dependency graph, compiles them together in an optimized way in one or more bundle files which your index.html can reference. By utilising a feature called code-splitting, webpack splits your code into smaller chunks which can be loaded on demand or in parallel.

In the process of building an app using webpack, we generate a manifest which is a source map of all compiled assets (Javascript, CSS, Images, Fonts, etc.).

At its core, RapidWebView SDK reads this manifest and caches in Android local directory so that it can be referenced later by the Webview interceptor.

In this guide we will show an example webapp written using NextJS framework. The guide can be applied to ReactJS, VueJS and other Javascript frameworks as well.

Manifest Format

RapidWebView requires the manifest to be formatted like below.{ "version": "1.0", "asset_urls": [ "https://example.com/static/assets/1.js", "https://example.com/static/assets/2.js", "https://example.com/static/assets/1.css" ] }• version is a string field which is compared with the local cache version by the SDK. On version mismatch, RapidWebView clears the local cache & downloads the new assets.
• asset_urls is an array of assets that are to be cached by the SDK.

Setting up webpack to generate Asset Manifest

We will be using webdeveric/next-assets-manifest to generate manifest.json for our NextJS 12 app.npm i -D next-assets-manifest

Making the required changes in next.config.jsconst withAssetsManifest = require('next-assets-manifest'); // Loading packageJson to fetch app version const packageJson = require('./package.json'); // Setting public path where the assets are hosted PUBLIC_PATH = 'https://rapid-web-view.netlify.app/_next/'; module.exports = withAssetsManifest({ assetsManifest: { output: 'static/assets-manifest.json', transform(assets, manifest) { const items = Object(null) const processedAssets = []; Object.keys(assets).forEach(key => { if (!assets[key].includes("json")) { processedAssets.push((`${PUBLIC_PATH}${assets[key]}`)); } }) items['version'] = packageJson.version items['asset_urls'] = processedAssets; return items; }, }); • You can read about asset-manifest configuration options here.
• assetManifest.output is setting the path where the manifest json will be written. For next-js static/ directory is publically accessible and hence we've used it to host our asset manifest. You can choose to host and serve the manifest according to your use-case.
• assetManifest.transform is a callback which allows us to format the manifest json in required format.

Running npm run build generates the final app bundle and corresponding manifest which is then deployed on a server. If you followed the guide above, the asset manifest should be accessible by the SDK at domain/_next/static/assets-manifest.json

Sample NextJS App with webpack configuration: Github

This guide is written for NextJS. A considerable amount of changes can be required to the manifest building process if you are using a different framework. We will try to document the process for popular JS framework in future. If you want to write a guide for a framework of your choice, send an email.