Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Detect browser compatibility #15657

Closed
DartBot opened this issue Dec 16, 2013 · 5 comments
Closed

Detect browser compatibility #15657

DartBot opened this issue Dec 16, 2013 · 5 comments
Labels
area-core-library SDK core library issues (core, async, ...); use area-vm or area-web for platform specific libraries. closed-obsolete Closed as the reported issue is no longer relevant library-html type-enhancement A request for a change that isn't a bug

Comments

@DartBot
Copy link

DartBot commented Dec 16, 2013

This issue was originally filed by @filiph

Feature request: I would like to have dart2js detect browser compatibility on runtime and in case the browser isn't up to the task of running the compiled code, a callback is called.

Maybe something like this (a total shot in the dark here):

<script type="text/javascript" src="compiled.js" data-incompatiblecallback="incompatibleAlert" defer></script>
<script>
  var incompatibleAlert = function(e) {
    // Show explanation. Hide UI.
    document.getElementById('#incompatible').display = 'block';
    document.getElementById('#ui').display = 'none';
  }
</script>

This would be extremely useful out in the wild when I don't want users with incompatible browsers to stare blankly at a 'Loading' screen for long minutes before realizing that, in fact, the app won't load on their current browser at all.

Right now, my DIY alternative for this is to do this via CSS (a div is CSS-animated so it shows after some time, and hopefully, we load the Dart code to remove that div before that happens). But that's an ugly hack.

Maybe you have something more clever for this kind of situation up the sleeve already? Do tell!
@floitschG
Copy link
Contributor

Removed Type-Defect label.
Added Type-Enhancement, Area-Dart2JS, Triaged labels.

@peter-ahe-google
Copy link
Contributor

This might be a reasonable work-around:

<script>
(function() {
"use strict";
self.onerror = function(message, url, line) {
  // Show explanation. Hide UI.
  var incompatible = document.querySelector('#incompatible');
  incompatible.style.display = 'block';
  document.querySelector('#ui').style.display = 'none';
  incompatible.appendChild(
      document.createTextNode(" " + url + ":" + line + ": " + message));
}
function onMessage(e) {
  if (e.data !== 'Dart is running') return;
  // Uninstall onerror and "message" listener when Dart reports it is ready.
  self.onerror = void 0;
  self.removeEventListener("message", onMessage);
  e.preventDefault();
}
self.addEventListener("message", onMessage);
})()
</script>

In Dart:

main() {
  // Build UI.
  ...
  // When UI is up and running.
  window.postMessage('Dart is running.', '*');
}

Note: It is important that the above script tag is before the Dart script tag (unlike the snippet from Filip). Here is a complete HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>dart2js test</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>dart2js test</h1>
  <div id="ui">UI<br></div>
  <div id="incompatible" style="display:none">Incompatible:</div>
<script>
(function() {
"use strict";
self.onerror = function(message, url, line) {
  // Show explanation. Hide UI.
  var incompatible = document.querySelector('#incompatible');
  incompatible.style.display = 'block';
  document.querySelector('#ui').style.display = 'none';
  incompatible.appendChild(
      document.createTextNode(" " + url + ":" + line + ": " + message));
}
function onMessage(e) {
  if (e.data !== 'Dart is running') return;
  // Uninstall onerror and "message" listener when Dart reports it is ready.
  self.onerror = void 0;
  self.removeEventListener("message", onMessage);
  e.preventDefault();
}
self.addEventListener("message", onMessage);
})()
</script>
<script type="application/javascript" src="out.js"></script>
  </body>
</html>

@DartBot
Copy link
Author

DartBot commented Dec 17, 2013

This comment was originally written by @filiph

That is brilliant, Peter, thank you!

I still think, for the sake of developer experience, there should be at least some helper for this (or maybe it should be included in a wizard?). That's a lot of boilerplate for something that will be needed by a large portion of web apps.

Also, I see you're using document.querySelector there, which afaik isn't supported by IE7-. (I know, that is fortunately a minority of browsers out there – but not a negligible part of the subset of browsers this code is for.) Wouldn't getElementById be safer?

@peter-ahe-google
Copy link
Contributor

Filip, I think you're right about using getElementById, I was just confused because you had used ids that started with #.

I think this code could be included in http://pub.dartlang.org/packages/browser, or its own package.

@floitschG
Copy link
Contributor

Reassigning to library.

cc @jmesserly.
Removed Area-Dart2JS label.
Added Area-Library label.

@DartBot DartBot added Type-Enhancement area-core-library SDK core library issues (core, async, ...); use area-vm or area-web for platform specific libraries. labels May 20, 2014
@kevmoo kevmoo added type-enhancement A request for a change that isn't a bug and removed priority-unassigned labels Feb 29, 2016
@matanlurey matanlurey added the closed-obsolete Closed as the reported issue is no longer relevant label Jun 19, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area-core-library SDK core library issues (core, async, ...); use area-vm or area-web for platform specific libraries. closed-obsolete Closed as the reported issue is no longer relevant library-html type-enhancement A request for a change that isn't a bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@kevmoo @matanlurey @lrhn @peter-ahe-google @floitschG @DartBot