I'm trying to create a hybrid app using Polymer 2.0. I've used polymer-2-application and polymer-2-starter-kit sample and it was working when it is tested on safari browser.
But when I run it on iOS simulator the Polymer element did not display.
Here's my sample index.html
<!DOCTYPE html> <html> <head> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> <link rel="stylesheet" type="text/css" href="css/index.css"> <meta name="description" content="TestPolymer-2 description"> <link rel="manifest" href="/manifest.json"> <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script> <link rel="import" href="src/test-element/test-element.html"> <title>Hello World</title> </head> <body> <div class="app"> <test-element></test-element> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
The problem is the Polymer 2 HTML Imports don't work on iOS < 10.3. To make it work you need a Polyfill .
See the Polymer 2 support chart.
Also, Polymer 2 uses ES6, which is only supported on iOS 10+, to use it on iOS 9 you have to compile your application to ES5 .
But with iOS 10 having 86%, I would recommend to just ditch iOS 9 and only support iOS 10 in your app.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.