What error trigger the Oops, couldn't load error in kik web app - kik

I am trying to integrate my app into kik, but for a specific action I fall in an error page that says:
Oops, couldn't load. Please try again later.
This panel looks like a kik panel with my app logo at the top
But everything is OK, If I try my app in Chrome with Kik plugin it works well. In fact my app creates an iframe and load it then we use postMessage to communicate between parent and iframe. I put some logs and it seems that everything is OK. Iframe is loaded and send message to parent with postmessage. But when I am in kik, the 'couldn't load' message appears and stops my app.
Does someone know what cause this panel to appear?

I had the exact same problem.
The problem is the combination of loading an iframe after doing browser history manipulation. Since there is no back button in Kik you can just do the page updates without updating the browser history and this will solve your problem.
I use this line to detect Kik and, if detected, ignore browser history updates:
if (!kik.enabled) {
//We are not running in Kik so we can do browser history manipulation here
}

Websites in the Kik browser must be single-page applications. The error screen shows up when the website either fails to load or tries to navigate elsewhere.
Is your website doing any navigation? Also, is there a place where we could take a look at the code?

Related

How to Fix This Problem ? Create a web app Next + React using. But face this problem

Server Error
ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Welcome to the world of server-side rendering (SSR), which is used by Next. I encourage you to search more on the web about it.
In short, Next will render your webpage on the server-side and send it to the client. During this process, all the browser APIs are not available, including but not limited to window, document, etc, because SSR does not use a browser.
In case you have part of the codes which have to use browser APIs, wrap it in a if condition. This code will then only be executed on the client-side. E.g.
if (window) {
// just an example
window.location.reload();
}

I can access my heroku app live but my friends see only white blank page?

please check my app - https://real-estate-web-app.herokuapp.com
the app is accessible in chrome only I open the app with another browser it shows me a white blank page.
and please share the solution.
I tried all online solutions but no help
I want to share the app with the client and my friends for testing.
I was able to open up the app in both Chrome and Firefox, loading just fine. Only thing I noticed was something odd with the Google Map API's, message about it receiving too many calls to the API. Also I believe by default Heroku has a "sleep" type setting, so the page doesn't stay loaded if the URL hasn't been visited recently; basically it pings the server and tells it to wake back up and then process the request and load the app. This may result in like a 10-15 second load time the first time hitting the page.

Ionic content shows up only after clicking on SideMenu

I have an ionic App which was working fine but now It is showing little weird behaviour, When I run the app it does not show the data at first but when I click on side menu once or twice then it loads and shows the data. I have an nodejs api from which the data comes to my app and the same api has been put in aws api gateway, I noticed this behaviour since I implemented aws sdk for binding data in my APP.
What can be the root cause for the same?
I can share the code but I am not sure where the issue is whether in controllers or views?
I solved it using Ionic Loader as the reponse was taking long time. My side menu was not getting initialized with the same time as other views hence views were not rendering without sidemenu being rendered, The idea is to show a loader on every response and hide it when it's a success, so it will render the views successfully.
Hope it helps.

Ionic / Cordova with embedded video takes over web view

In a simple Ionic app I have a plain web view with some embedded videos. These embedded videos are included with an oEmbed iframe. Video works fine, but almost every video provider has a link to watch the video on the provider's page. For example Youtube always has a button 'watch on Youtube'.
When my users (accidentally) click that link, the whole Cordova web view is taken over by the linked URL. Instead of my app it shows the Youtube video. Then the user never gets to go back to my app, except by closing and opening the app.
I've tried to:
Prevent navigation by watching $locationChangeStart, that doesn't work as it doesn't fire for external URLs (like Youtube's).
Prevent navigation by using window.onbeforeupload, but that doesn't suffice as it doesn't guarantee the user navigates away and it presents an ugly confirmation popup.
Any other ideas on how to prevent navigation to external URLs from an Ionic/Cordova app would be highly appreciated.
You should provide more info, how do you insert the videos? some code?
I don't use videos, but I had a similar problem with google maps, if the user clicks the legal link, the page nativate to the google legal page and the user can't go back.
To fix this, I installed inAppBrowser plugin and used this code to open the legal page inside the inAppBrowser window
$('#map_canvas').on('click', 'a', function(e){
e.preventDefault();//you prevent the default click
window.open($(this).attr('href'), '_blank');//you open the link on the inAppBrowser window
});
So you should inspect the video to see if you can do something like this, preventing the link click and opening it on the inAppBrowser plugin
You will have this problems using externa players, a possibel solution would be to host the videos on your server and use some jquery/angular video player.
insert
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
in your index.html. So when you open a link,it'll use your device browser.You can come back from the device browser to your application with android back button.
You should probably give your url's like this
var ref = window.open('https://www.******.com/', '_system', 'location=yes');

canvas app being directed to weird URL

My canvas app has all started showing a 404 error from my website. I have not had any success in trouble shooting how the app is being redirected a website page rather than showing the original splash screen to install the app. Any ideas on troubleshooting this?
the app address is: http://www.facebook.com/#!/AyopaSoftware?sk=app_155882081129524
You need to fully configure the application that hosts that tab, including the canvas url.

Resources