Overview

Both the vyking-apparel (see Virtual Try-On Custom HTML Element) and the model-viewer (see 3D Viewer Custom HTML Element) are HTMLElements hosted on a web page. These can, therefore, be rendered in a WKWebView on iOS or a WebView in Android. This document gives a brief overview of an iOS and an Android app demonstrating this functionality.

Examples on Github

Platform	Github page
Android	https://github.com/VykingDev/android_WebViewDemo
iOS	https://github.com/VykingDev/iOS_VKWebViewDemo
Associated Web pages	https://github.com/VykingDev/VykingExamples

Description

The two example apps show both the model-viewer and the vyking-apparel elements being hosted in their own webview. The button on the bottom right can be used to switch between the two alternatives. The button on the bottom left cycles through a set of shoe models defined in the shoeList array.

The two constants vykingApparelUrl and modelViewerUrl define the example pages demonstrating the VTO experience and the 3D model viewer, respectively. Once the pages have been loaded into the webview evaluateJavaScript calls can be made to configure and change the elements attributes. This configuration can be done either by the loaded page itself, by the app or a mixture of both. These examples provide the config-key and config url from the app and can also switch the model being rendered by changing the appropriate element attribute.

The example web pages used demonstrate the use of a service worker to cache the web pages, the modeld.bin file and the example offsets.json files that specify the models to load. Care must be taken with regard to modeld.bin file as this has an expiry date and must be updated before this date is reached if the VTO experience not to be interrupted. Examples of the pages without using a service worker can be found in the 'vanilla' directory parallel to the 'with-service-worker' directory.

The example web pages include a modeld.bin file that will work on an HTTP server hosted on, localhost, 127.0.0.1 or a private IP address.