Webview

The NeoDay app will show the webview with native navigation controls for the back button or close button when needed.

When creating webpages that will be shown inside a webview within the NeoDay app, make sure that:

• The webpage does not contain links that would normally be opened inside another tab in the browser.
• The webpage does not contain links to other webpages like home, that would normally require a tap on the back button of a browser to go back to this external link
• The webpage can contain links to other webpages when the webpage has it’s own navigation controls.

To determine if page is being shown in webview, you will see a query parameter in the url:

With this, client can then set different styles, on how we want to represent the page in a webview

?screen=webview

Communicating with the Neoday app

There will be cases that we need to communicate with NeoDay app.

Add this script into your js file

import WebviewCallBridge from 'https://js.neoday.com/v1/webview-call-bridge.min.js';

const callBridge = new WebviewCallBridge();

List events that you can call

callBridge.post('clientLoaded', null);

Remove any navigational links

With the use of ?screen=webview url query. We can identify that the page is being shown in a webview and we must remove any navigational links that will redirect to other external links. Here are some items that we need to take into consideration and remove accordingly:

• Header/Navigation bar
• Footer
• Cookie links

Disable Pinch to zoom

We also need to disable the ability to zoom on pinch. Add this meta tag in your html file

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'>