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?

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

    <script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
                "three": "./js/three/build/three.module.js"
            }
        }
    </script>

    <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.setPixelRatio(window.devicePixelRatio);
          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);
          scene.add(box);
    
          tick();
    
          function tick() {
            box.rotation.y += 0.01;
            renderer.render(scene, camera);
                requestAnimationFrame(tick);
          }
        }
      </script>
</head>

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

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?