apprun
apprun copied to clipboard
yysun
SPA shows empty window on "Smart TV" browser
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?
The test results did not show which version of JavaScript the smart TV supports. ES3, ES5, or ES6.
On Thu, Jan 16, 2020 at 3:50 PM Jon Kleiser [email protected] wrote:
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?
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/yysun/apprun/issues/84?email_source=notifications&email_token=AABJUM6NSMVYMBJT2C5RDC3Q6DCAVA5CNFSM4KH2NACKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4IGYJXBQ, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABJUM4YM72OHCHKOFJANBDQ6DCAVANCNFSM4KH2NACA .
It is WebKit-based Samsung Browser 1.1 and it scores 370 points in HTML5Test, so it should support ES5.
Is there a way to see the console output of the Samsung Browser?
On Mon, May 4, 2020 at 2:55 PM niu tech [email protected] wrote:
It is WebKit-based Samsung Browser 1.1 and it scores 370 points in HTML5Test http://html5test.com/s/620f2d325441bab9.html, so it should support ES5.
— You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/yysun/apprun/issues/84#issuecomment-623642951, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABJUM3DVMQSSWMMI5EZQY3RP4FTZANCNFSM4KH2NACA .
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
Someone told me they made IE11 by adding 3-4 polyfills. They found what’s needed from the console output. I will take a look myself to see what are they in IE11.
On Tue, May 5, 2020 at 12:34 PM niu tech [email protected] wrote:
The same with IE11 - blank page. Could you please support ES5? Still 6.11% https://netmarketshare.com/browser-market-share.aspx?id=browsersDesktopVersions uses IE11.
— You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/yysun/apprun/issues/84#issuecomment-624162018, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABJUM7WCR7ZVKSUZSY6ZM3RQA5ZBANCNFSM4KH2NACA .
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.
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.