CODEWITHSUNDEEP
polymerweb-componentpolymer-2.x
Rainier Wolfcastle
Rainier Wolfcastle

Reputation: 636

How to serve different web component to IE 11

I've configured my "polymer build" (v 2.0) to transpile an ES5 version just for IE 11, but now I need to serve only that version for IE 11 users and the ES6 version for all other browsers. What's the best way to achieve this?

Ideally, I'd like to use just one import in whichever client pages use my custom element and have some logic on the server to dish out the appropriate version, but being a newbie to web components, I don't want roll my own solution (which will probably be nasty) if there's a "right way" of doing it (so far I haven't found it, but I'll keep searching).

Thanks.

Upvotes: 0

Views: 350

Answers (1)

Nicolai Schmid
Nicolai Schmid

Reputation: 1092

You should use a webserver, which is capable of detecting the browsers features.

The Polymer Team itself has released a library for nodeJS, which reads in your polymer.json file and looks in your builds directory and serves the correct build according to the features the browser of the client supports. The server itself supports H2 Push aswell, which is a nice feature.

https://github.com/Polymer/prpl-server-node

This is my builds configuration in polymer.json. It generates a different build for each capability. I cross checked, what versions of browsers support these technologies and added a build for each neccecary combination.

"builds": [{
  "name": "none",
  "browserCapabilities": [],
  "addServiceWorker": true,
  "bundle": true,
  "swPrecacheConfig": "sw-precache-config.js",
  "insertPrefetchLinks": true,
  "js": {
    "minify": true,
    "compile": true
  },
  "css": {"minify": true},
  "html": {"minify": true}
},
{
  "name": "noes6",
  "browserCapabilities": ["push", "serviceworker"],
  "addServiceWorker": true,
  "addPushManifest": true,
  "swPrecacheConfig": "sw-precache-config.js",
  "insertPrefetchLinks": true,
  "js": {
    "minify": true,
    "compile": true
  },
  "css": {"minify": true},
  "html": {"minify": true}
},
{
  "name": "nopush",
  "browserCapabilities": ["es2015", "serviceworker"],
  "addServiceWorker": true,
  "swPrecacheConfig": "sw-precache-config.js",
  "insertPrefetchLinks": true,
  "bundle": true,
  "js": {"minify": true},
  "css": {"minify": true},
  "html": {"minify": true}
},
{
  "name": "all",
  "browserCapabilities": ["es2015", "push", "serviceworker"],
  "addServiceWorker": true,
  "addPushManifest": true,
  "swPrecacheConfig": "sw-precache-config.js",
  "js": {"minify": true},
  "css": {"minify": true},
  "html": {"minify": true}
}]

And a simple express server, which utilizes the prpl-server library for differential serving (bare in mind, that this is ES6 Syntax):

const prpl = require('prpl-server');
const express = require('express');
const config = require('./build/polymer.json');

const app = express();

app.get('/*', prpl.makeHandler('./build/', config));

app.listen(process.env.PORT || 80);

Upvotes: 1

Related Questions