SPA shows empty window on "Smart TV" browser
jkleiser opened this issue · comments
I was just curious to see how my SPA behaved on my Samsung smart TV: It just gave me an empty window. This doesn't matter much to me, but I think it could have been nice if my SPA at least could show some message like "This app requires XYZ". To start with, I'd have to figure out which browser feature(s) to test.
I tested my "smart TV" browser using whatsmybrowser.org, and the results were available at https://whatsmybrowser.org/b/5UVF59K. Here's the results:
Operating system Linux
Javascript enabled Yes
Cookies enabled Yes
Flash version Not installed
Java version Not installed
Websockets supported Yes
WebGL supported Yes
Language nn-NO
Browser size 1280 x 623
Screen size 1920 x 1080
Color depth 24 bit
AdBlock enabled No
Your full user agent string is:
Mozilla/5.0 (SMART-TV; Linux; Tizen 2.4.0) AppleWebkit/538.1 (KHTML, like Gecko) SamsungBrowser/1.1 TV Safari/538.1
My SPA does not use Bootstrap or jQuery. I coded the needed CSS myself, not too much.
Do the results listed above tell what this "smart TV" browser is missing?
I will try to find out.
It is WebKit-based Samsung Browser 1.1 and it scores 370 points in HTML5Test, so it should support ES5.
This app https://apprun-classyui-spa.surge.sh/ behaves the same way, just an empty window. I haven't found out if it's possible to see the console output. The source for this app is here: https://github.com/jkleiser/apprun-classyui-spa
The same with IE11 - blank page. Could you please support ES5? Still 6.11% uses IE11.
Here's an app I just made with npx apprun --init --spa --es5:
https://spa-es5.surge.sh/
On my Samsung TV it gives me the same empty window. ;-)
To use AppRun for applications that support IE 11, you will need:
- Polyfills for Promise and string.startsWith , e.g., using https://polyfill.io
<script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.startsWith%2CPromise"></script>
- Use window.onhashchange in main.tsx
if (!window.onpopstate) window.onhashchange = () => app.route(location.hash);
Here is an example project: https://github.com/yysun/apprun-ie11
Not sure if Samsung TV needs more polyfills.
Live Demo: https://yysun.github.io/apprun-ie11
I now added the two lines to support IE 11, as described above. It made no difference to my app at https://spa-es5.surge.sh/ . Sorry. This is not important to me at all.
Your app at https://yysun.github.io/apprun-ie11 gave the same empty window on my TV. ;-)
@yysun Thanks, I can confirm your demo works in IE11. As for onpopstate, it should be supported in IE10+.
@jkleiser You could try including Firebug Lite in your page by putting this inside <head>: <script src="https://cdnjs.cloudflare.com/ajax/libs/firebug-lite/1.4.0/firebug-lite.js#startOpened=true"></script> or debugging the Samsung Smart TV Browser.
@niutech I have now inserted that Firebug Lite script line into my https://spa-es5.surge.sh/. How do I activate it to use it? Is that possible on the Smart TV?
You forgot to append #startOpened=true so it looks like: <script src="https://cdnjs.cloudflare.com/ajax/libs/firebug-lite/1.4.0/firebug-lite.js#startOpened=true"></script>.
@niutech Thanks, it's now appended. However, when I try it at https://spa-es5.surge.sh/, the Firebug Lite seems to close just after it opened. What may be the reason?
It seems that AppRun is replacing the <body> with its contents. Try putting the Firebug Lite <script> just before </body>. However, the best way would be to use the remote debugger for Samsung Browser.
I now moved the Firebug Lite <script> just before the closing </body>. The result is the same.
Sorry, cannot help more. Try using the other way to debug Samsung Browser using my link above.