Как обслуживать разные веб-компоненты в IE 11

Я настроил свою «полимерную сборку» (v 2.0) для переноса версии ES5 только для IE 11, но теперь мне нужно обслуживать только эту версию для пользователей IE 11 и версию ES6 для всех остальных браузеров. Каков наилучший способ добиться этого?

В идеале я хотел бы использовать только один импорт в зависимости от того, какие клиентские страницы используют мой пользовательский элемент и имеют некоторую логику на сервере для выдачи соответствующей версии, но, будучи новичком в веб-компонентах, я не хочу развертывать свое собственное решение (что, вероятно, будет неприятно), если есть «правильный способ» сделать это (пока я его не нашел, но я продолжу поиск).

Спасибо.


web-component polymer polymer-2.x
person Rainier Wolfcastle    schedule 23.06.2017    source источник
comment
это полностью зависит от того, что будет использовать ваш сервер... например, полимерная подача делает это на уровне сервера, например. он по-разному отправляет один и тот же файл в старый браузер ... но вы также можете создавать и динамически создавать разные html (импортируя форму по другому пути), поэтому вопрос в том, какой будет ваша серверная среда?   -  person daKmoR    schedule 23.06.2017
comment
Моя серверная среда определенно не полимерная :-) Думаю, мы будем использовать Node или Apache. Я надеялся, что существует какая-то независимая от платформы передовая практика для обслуживания вещей в разных браузерах (какая-то простая логика в самом элементе, которая затем перенаправляет на ES5 или ES6, все делается из одного оператора импорта в HTML. Возможно, я слишком много мечтать.   -  person Rainier Wolfcastle    schedule 27.06.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны использовать веб-сервер, который способен обнаруживать функции браузера.

Сама команда Polymer выпустила библиотеку для nodeJS, которая считывает ваш файл polymer.json, просматривает каталог ваших сборок и выдает правильную сборку в соответствии с функциями, поддерживаемыми браузером клиента. Сам сервер также поддерживает H2 Push, что является хорошей функцией.

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

Это моя конфигурация сборки в polymer.json. Он создает разные сборки для каждой возможности. Я перепроверил, какие версии браузеров поддерживают эти технологии и добавил сборку для каждой необходимой комбинации.

"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}
}]

И простой экспресс-сервер, который использует библиотеку prpl-server для дифференциального обслуживания (имейте в виду, что это синтаксис ES6):

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);
person Nicolai Schmid    schedule 04.07.2017