Troubleshooting

Blank page or Invalid SSL connection errors

For websites with HTTPS or SSL, if you are noticing blank pages or errors that mention SSL connection errors, please verify your SSL certificates are set up correctly.

We also suggest you inspect the Javascript console of your website, because if your website loads javascript, css, or image resources from other domains which themselves have SSL misconfiguration, then that can also cause this error to appear on your site.

You may enter your website domain at https://www.ssllabs.com/ssltest/ to verify your SSL certificate configuration.

Note: Even some domains with Grade A may have warnings listed under the grade (see image below).

Issues may include:

  • Certificate expired (fix by re-issuing)
  • Certificate chain incomplete (fix by adding intermediate certs)
  • Certificate or intermediate signed by SHA-1 (fix by re-issuing and/or updating intermediate certs)
  • Certificate signed by Symantec brands including Verisign, Geotrust, RapidSSL, and Thawte (fix by re-issuing and updating intermediate certs)

Changes to website not showing up in app?

Your apps will obey the same cache headers that a browser will, which are set by your web server. It may take a few minutes, but will eventually update properly. This makes updating your apps very easy, as you will just need to update your regular website.

If you are having trouble seeing the changes in your app, please first wait a few minutes, as often browser caches do have a short delay in updating from the server. Please also try refreshing the page to load the new content.

If after some time you have not seen the changes, you may want to inspect the cache headers that your webserver is sending, which are likely telling the app to cache the resource much longer than intended.

Some other strategies include using suffixes on resource files on your website, such as application_782374982.js, where the number gets updated every time you update that file. This forces the browser and your apps to retrieve that new resource file directly from the server.

You may also completely uninstall and reinstall the app to force a clearing of all cached data for your app.

We do have an extra configuration option on Android only to clear the Webview cache every time the app is exited. To enable this feature, you must add "androidClearCache" : true under "general" section in appConfig.json, or in Build & Export section when editing your app. For example:

"general": {
  "androidClearCache": true
}

Finally, we provide a GoNative JavaScript Bridge command to clear cache via javascript: Clear Webview Cache

If the problems persist even after all of these steps, please contact us and we can help get everything working for you.

How do I fix display scaling and prevent zooming?

One of the most glaring UI issues that comes with viewing a website in a mobile app is the scale of the content on the page. When not correctly configured users will have to zoom in to fill out fields, read/watch content or click buttons. To remedy this, ensure that text and UI elements are set to a suitable size, fix the display scaling at 1:1, and prevent zooming by the user. This will result in the smooth user experience expected within a native app.

To fix the display scaling and prevent zooming on your website add the following meta tag to each page:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

How do I prevent text selection in my app?

Preventing selection of text on your web pages when they are being presented within your app will result in a more app-like experience for users. This is particularly true for UI elements such as buttons.

We recommend adding the CSS below to each page. Change body and a to the elements you wish to target.

<style>
 body, a{
   -webkit-touch-callout: none !important;
   -webkit-user-select: none !important;
   -khtml-user-select: none !important;
   -moz-user-select: none !important;
   -ms-user-select: none !important;
   user-select: none !important;
   -webkit-tap-highlight-color: transparent !important;
 }
</style>

How do I enable pinch-to-zoom?

When pinch to zoom is enabled the user can use a pinch gesture to zoom in or out to view the app content.

iOS

For iOS, this can be done in the iOS source code before publishing your app. If we are publishing for you, please simply request this change as part of your publishing instructions.

You must change one file in the source code, to change the viewport from user-scalable=no to user-scalable=yes.

After opening the source code in Xcode, please open LEANUtilities.m file, search for user-scalable=no and modify it to user-scalable=yes.

Android

For Android this is a custom feature. In your appConfig.json set allowZoom to true in the root level of the JSON. You can insert this above the general object.

{
  "allowZoom": true,
  "general": {
    "userAgentRegexes": [],
    "replaceStrings": [],
    "nativeBridgeUrls": [],
    "languages": [],
    "userAgentAdd": "gonative",
    "enableWindowOpen": true,
    "forceScreenOrientation": null,
    "initialUrl": "https://gonative.io",
    "appName": "My App",
    ...

How do I change the title text in the top navigation bar

You can add the following to each page for which you wish to set a title.

<script>
function gonative_library_ready(){
  gonative.navigationTitles.setCurrent({'title':'Your Title'});
}
</script>

For more details refer to Dynamic Titles.

How can I disable Cleartext permission to disallow insecure network traffic?

If you only want to allow encrypted network traffic such as HTTPS on your app and disallow traffic from HTTP which contains unencrypted cleartext, you can open the Import / Export section of your app, edit the network object in appConfig.json's security object and specify "allowInsecure": false. If the security object is missing in your appConfig.json, you can create it as shown in the example below:

"security": {
    "network": {
        "allowInsecure": false
    }
}

How can I keep my app users logged in?

Login behavior within your app will mirror that of your website. In short, we recommend setting a persistent login cookie.

Session cookies, which can be used to keep a user logged in while they navigate from page to page within you website, will expire at the end of the session. This happens when the user logs out of your site manually, but also when the user quits their web browser. 

Persistent cookies can also be used to keep a user logged in while they navigate your site. What's different about persistent cookies is that even if the user quits their web browser, when they go back to your website the cookie will still exist and the user can then be automatically logged in. 

Of course, any invalidation of cookies, or timeouts, on your server side would render these cookies ineffective whether they are session or persistent cookies. 

The behavior of these cookies will work similarly in your apps. If you would like your users to be automatically logged in when they open up the app, even after quitting the app or restarting their device, please use persistent cookies for this purpose.

How can I configure my app to work offline?

Most clients these days are comfortable with their app requiring a network connection. But we also understand the desire for your app to work offline.

Previously, both Android and iOS platforms supported HTML5 Cache Manifest. However, this is now deprecated on iOS and it will only work on Android. 

Service Workers

Service Workers have emerged as the new standard on the web that supports offline functionality. If you implement Service Workers on your website to support offline access the same will work in your GoNative apps. In Android by default and in iOS subject to the following requirements. Service Worker support for WKWebView was only added in iOS 14, and only when using App Bound domains which require customization of your app. 

https://dev.to/ben/will-ios-14-support-service-workers-in-wkwebview-5gn

https://webkit.org/blog/10882/app-bound-domains

You may implement in your iOS source code directly, or we can provide this support on iOS with custom development for a small fee. 

In addition to Service Workers, we do have a premium add-on called Download Manager that works well for downloading specific files to be available offline. Please see our documentation Offline Download Manager.

We also have a solution called OfflineSync that will work only if your app can work 100% offline without any network connectivity whatsoever, such as for a sales catalog, or an in-store kiosk display. Please contact us if interested in OfflineSync.