Menu
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>
358
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.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
