I have a simple Tizen webapp that works fine in emulator, but not on my Samsung signage TV (SSSP6).
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class='embed-container'>
<iframe width="100%" height="100%" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts allow-popups" src="https://ad-presenter-staging.herokuapp.com/betsonglobal"></iframe>
</div>
</body>
</html>
If I replace the <iframe> with an actual <video> with the same content as what's in src, then it works fine in both emulator and on the TV.
How do I go about debugging this?
It's very possible URL is blocked during access. try updating the config.xml => policy => allow-navigation or Access
with external URL domain you want to access.
If I replace the with an actual with the same content as what's in src, then it works fine in both emulator and on the TV.
=> Does it show any error when is used on TV? The info displayed in region should be helpful to debug.
How do I go about debugging this?
=> If you're able to connect the TV to your PC, you can try launching the webapp in debug mode. After launch, if you check console section in Web Inspector, it should be logging the URLs blocked and the reason for block which should aid in fixing
Related
I want to use the Google Adsense Auto-Ads with my react application. The react application uses SSR and I have added the code that Google provided me to the head section of the template as shown below.
export default ({ markup, css }) => {
return `<!doctype html>
<html lang="en">
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9999999999999999" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
>
<title>Teach Learn Game</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
a{
text-decoration: none;
color: #bb4d00
}
</style>
</head>
<body style="margin:0">
<div id="root">${markup}</div>
<style id="jss-server-side">${css}</style>
<script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>`;
};
When at the site, I have checked the html code using Chrome tools. I can see the line in the code but unfortunately I have been declined by the Google Adsense review saying I need to Fix some things.
The message from Google specifying the issue is:
We couldn’t find the code on your site. This is because the code is either missing or incomplete, or because the URL of your site is incorrect. Learn more.
I have removed the requirement to login which was an earlier problem and I have a proper google account.
I did see another Stack Overflow issue where it was stated that window.adsbygoogle is to be used with React but it seemed that the problem was dealing more with specifying ad units and the implementation of the window.adsbygoogle was in a component class. As I am using Auto Ads I would not expect that would apply but maybe I am mistaken. If so, how would I change the code?
In any case, appreciate if anyone with experience with getting initial acceptance for Google Auto Ads can assist. If you provide code appreciate if you could use functional components as I am not very up on class components and the use of componentDidMount as most of the examples seem to be using.
Link to my site: https://tlgamer.herokuapp.com/
Adsense will look for Adcode in herokuapp.com instead of tlgamer.herokuapp.com that is why message from Google was "We couldn’t find the code on your site.", You can not monetize a subdomain if you do not own the main domain. Switch your SSR app to a top-level domain and re-apply for Adsense.
I have a build a React application and deployed it on Heroku. When I try to load my home page "/" I get no errors and the page loads perfectly. But when I try to navigate to a different page "/RegistrationList" I get the Content Security Policy errors:
I have already searched for a solution online and found that I need to specify a Meta tag in the index.html file inside the public folder of my application. So now this file looks as follows:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
http-equiv="Content-Security-Policy"
content="default-src * 'self' 'unsafe-inline' 'unsafe-eval'"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
...
But at this point I still keep on getting the errors. The strange thing is that the main page ("/") loads perfectly and the second page gives these errors.
Your current CSP within the index.html is useless under a security point of view (you are allowing everything, so this is equivalent as not defining a CSP).
CSP can be defined either in your front-end (index.html) and back-end, and when there is a mismatch, you find all kinds of errors. If you try to remove the CSP meta tag from your index.html and you still get the error, it means the problem is in the server side.
In case of Apache server, this is located in file 'htaccess'. As for Heroku, I don't know exactly where it is. Perhaps this can work:
https://stackoverflow.com/a/57288001/10802411
I have a single page webapp, which is about 300Kb big. It gets bundled with webpack and uses React/Redux.
How do I put a small loading spinner upfront until the page is loaded? I can image
putting the style and css into the static index.html
using an async loader like krux/postscribe
One way would be to insert the loading animation in the index.html
e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="content">
<div id="loader" />
</div>
<script src="build/app.js"></script>
</body>
</html>
Then after the bundle.js is loaded it will render in the content and the loading animation will disappear.
EDIT:
Another method is to use a progressive webapp.
https://developers.google.com/web/updates/2015/10/splashscreen
However this feature might only be available in modern browsers, which is why the first approach should be used as a fallback method.
The benefit however is, that if your app is offline it will still play
the loading animation and can give specific error messages.
I also encountered with this question with one exception: I wanted to display a loading progress bar. I ended up writing a webpack plugin and a custom asset bootloader. Check out my demo project repository.
Here is the result:
I'm using Yeoman and the angular-fullstack generator to bootstrap an angular app. When I do grunt serve or grunt serve:dist everything works as expected.
Now the question is, when I open the index.html file directly in the browser, isn't it supposed to work equally?
So I have a hard time understanding whats tasks grunt is executing here to make it work. Or maybe I am missing something else.
The console tells me:
GET file:///app/8d57a97f.app.css net::ERR_FILE_NOT_FOUND
GET file:///app/47ab0f3e.vendor.js net::ERR_FILE_NOT_FOUND
GET file:///app/01b9b8a8.app.js net::ERR_FILE_NOT_FOUND
The generated index.html looks something like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="app/8d57a97f.app.css"/>
</head>
<body ng-app="myApp">
<!-- some functionality... -->
<script src="app/47ab0f3e.vendor.js"></script>
<script src="app/01b9b8a8.app.js"></script>
</body>
</html>
The reason why I do this:
I try to run the angular app with phonegap on an android device. When I load it to the android mobile, the screen remains blank. So I opened it in the browser and got the same result.
So this is my first attempt to solve this issue.
The problem was the <base href="/"> in the header.
Explanation can be found here (Loading local file in browser referenced css or js).
I am new in JQuery Mobile. I really like it but I have 2 basic questions:
1- Can I test the app OFFLINE in my iPhone?
I know how to see the app when I am with an Internet connection even how to create the icon. But I don't see how to see the app i I don't have an Internet connection.
2- I suppose I can sent the html and css made with jQuery Mobile to Apple as any app. And it will work offline. Is that right?
Is there anyone with experience who have done apps with JQuery Mobile and are working in the app store?
Yes, you can have a jQuery Mobile page completely offline. Download the necessary libraries to your device. For the example I used the following
jquery-1.8.0.min.js
jquery.mobile-1.2.0.min.js
Additionally you need the jQuery Mobile CSS structure file
jquery.mobile.structure-1.2.0.min.css
Then use the theme roller to create your own CSS (or without changes just use the default jQuery CSS) and download it including the icon sets to your device. For the example I used this CSS name
taifun.min.css
The icon sets are stored in the subdirectory /images.
example code
<!DOCTYPE html>
<html>
<head>
<title>Offline</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="taifun.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="content">
<h1>I'm a jQuery Mobile offline page</h1>
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
</ul>
</div><!--/content -->
</body>
</html>
screenshot HTC Desire
#Brice Favre is right - testing 'offline' could be achieved by hosting your app on a LAN and accessing it using your iPhone through Wifi.
If you 'host' the app using e.g. PhoneGap, and include all the libaries (jQuery, jQuery Mobile) and CSS as part of your application, then your app will function just fine without an Internet connection - many apps work this way. See this PhoneGap tutorial.