LiveView support for IE 11

Phoenix Forum Questions / Help
1

Hello everyone,

I need to support IE 11 with LiveView. I have been adding some polyfills…

After installing with npm, I have added those lines in assets/js/app.js

// POLYFILL

import 'core-js/stable';

import "babel-polyfill";

// Polyfill for IE11 and MS Edge 12-18
import "mdn-polyfills/CustomEvent"
import "mdn-polyfills/String.prototype.startsWith"
import "mdn-polyfills/Array.from"
import "mdn-polyfills/NodeList.prototype.forEach"
import "mdn-polyfills/Element.prototype.closest"
import "mdn-polyfills/Element.prototype.matches"
import "child-replace-with-polyfill"
import "url-search-params-polyfill"
import "formdata-polyfill"
import "classlist-polyfill"
import "shim-keyboard-event-key"

… but could not make it work yet. The page is stuck, but working in any decent browser.

Does anybody knows which polyfills I miss?

PS: I have seen this page, but no solution working for me yet.

I am running Phoenix 1.5.9 with LiveView 0.15.5, with Elixir 1.11.3 and OTP 23.

Thanks for taking time

1 Like
2

Hi, read section Browser Support in case you missed it

5 Likes
3

Thank You, couldn’t find the reference :slight_smile:

1 Like
4

I have added all polyfills to make liveview work with IE 11, but I have a really weird situation.

I have added a send hello message to liveview. It is not run with IE11, but run correctly with Edge.

  @impl true
  def mount(_params, _session, socket) do
    Logger.info("MOUNT")
    send(self(), {:hello, "world"})
    {:ok, assign(socket, query: "", results: %{})}
  end
  ...
  @impl true
  def handle_info({:hello, message}, socket) do
    Logger.info("HELLO #{inspect message}")
    {:noreply, socket}
  end

In the log, I can see those messages.

# WITH Edge
[info] GET /
[debug] Processing with Phoenix.LiveView.Plug.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] MOUNT
[info] HELLO "world"
[info] Sent 200 in 850µs
[info] MOUNT
[info] HELLO "world"

# WITH IE11
[info] GET /
[debug] Processing with Phoenix.LiveView.Plug.index/2
  Parameters: %{"q" => "test"}
  Pipelines: [:browser]
[info] MOUNT
[info] Sent 200 in 3ms

How is that even possible that liveview does not execute the send hello world when using IE11?

I cannot understand how the browser can affect the liveview process.

I have made a small repo to show the case…

Thank You for taking time

5

I didn’t look at the code yet, I’ll look at it later, but you can try, it won’t make it any worse anyway.
This is for IE11

1. Press the [Ctrl], [Shift] and [Del] Key together. A Popup-Window opens. **"Delete browser history"**.
2. Remove all checks except the selection **"Temporary Internet files and website files"**.
3. Click on the Button **"Delete"** to empty the browser cache. In comparsion to other browsers there is no option to select the time period. You'll delete all cache data.
4. Reload the page.
1 Like
6

I got it working after some painful tests :slight_smile:

In fact, IE11 was unable to open the live socket… this was visible in the web tools of IE11.

I added polyfills as mentionned in the page linked.

And I added this to webpack.config.js

    // For IE11
    target: ["web", "es5"]

This way the bundle is readable by IE11.

Thank You very much for the help.

5 Likes
7

It might be worth submitting a PR to the README explaining this!

4 Likes