Importmap does not work on iOS

I want to run an app created with three.js 1.49 on iOS. I tried the following sample, but nothing is displayed in Chrome (and Safari) on iOS, but in Chrome on Windows, it is displayed correctly.
How can I fix this?

    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />

    <script async src=""></script>
    <script type="importmap">
            "imports": {
                "three": "./js/three/build/three.module.js"

    <script type="module">
        import * as THREE from 'three';
        window.addEventListener('DOMContentLoaded', init);
        function init() {
          const width = 960;
          const height = 540;
          const renderer = new THREE.WebGLRenderer({
            canvas: document.querySelector('#canvas')
          renderer.setSize(width, height);
          const scene = new THREE.Scene();
          const camera = new THREE.PerspectiveCamera(45, width / height);
          camera.position.set(0, 0, +1000);
          const geometry = new THREE.BoxGeometry(400, 400, 400);
          const material = new THREE.MeshNormalMaterial();
          const box = new THREE.Mesh(geometry, material);
          function tick() {
            box.rotation.y += 0.01;
            renderer.render(scene, camera);

    <canvas id="canvas" class="viewer"></canvas>

Do you have any console warnings? My feeling is that DOMContentLoaded is firing before the async call to load module-shims.js is finished for some reason on ios, can you console log document.readyState inside your init function to test this?