У меня проблема с работой переведённого сайта в apk-файл

Question

Так вот, я сделал из этого сайта приложение-apk через конвертер (https://www.webintoapp.com/author/dashboard?cmd=app_homepage&appid=208952). Но не могу никак сделать, чтобы приложение (например, на телефоне) находило местоположение устройства и подставляло город в js-коде, который уже вставит информацию в виджеты на странице приложения.

Вот HTML, CSS и JS коды:

HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Погодное веб-приложение</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="card">
        <div class="search">
            <input type="text" placeholder="Введите город">
            <button><img src="images/search.png" alt=""></button>
            <p class="location"></p>
        </div>
        <div class="weather">
            <img id = "change-image" src="images/sun.png" alt="" width=40%>
            <h1 class="temp">⠀</h1>
            <h2 class="city">⠀</h2>
            <div class="details">
                <div class="line">
                    <img src="images/humidity.png" alt="">
                    <div>
                        <p class="humidity">⠀</p>
                    </div>
                </div>
                <div class="line">
                    <img src="images/wind.png" alt="">
                    <div>
                        <p class="wind">⠀</p>
                    </div>
                </div>
                <div class="line">
                    <img src="images/pressure.png" alt="">
                    <div>
                        <p class="pressure">⠀</p>
                    </div>
                </div>
            </div>
            <div class="feels_like">
                <img src="images/feels.png" alt="">
            </div>
            <div>
                <p class="feels">⠀</p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS:

    * {
  margin: 0;
  padding: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  box-sizing: border-box;
}

body {
  background: gray;
}

.card {
  width: 100%;
  max-width: 500px;
  background: linear-gradient(blue, purple);
  color: white;
  margin: 100px auto 0;
  padding: 40px 35px;
  text-align: center;
  border-radius: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search input {
  border: 0;
  outline: 0;
  background: white;
  color: black;
  padding: 10px 35px;
  flex: 1;
  margin-right: 16px;
  height: 50px;
  font-size: 18px;
  border-radius: 35px;
}

.search button {
  border: 0;
  outline: 0;
  border-radius: 50%;
  background-color: aliceblue;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.search button img {
  width: 45px;
}

.weather {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.weather h1 {
  font-size: 50px;
  font-weight: 300;
  margin-top: -10px;
}

.details {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
}

.line {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: left;
  flex-basis: 33%;
  margin-bottom: 20px;
}

.line img {
  width: 60px;
  margin-top: 50px;
  margin-left: 5px;
  margin-right: 5px;
  padding-right: 10px;
}

.feels_like {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.feels_like img {
  margin-top: 50px;
  width: 70px;
}
.feels {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

JS:

const apiKey = "{тут рабочий apiKey}";
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
const getCityName = document.querySelector(".search input")
const clickButton = document.querySelector(".search button");
const weatherImage = document.getElementById("change-image");


async function callWeather(city){
    console.log(getCityName)
    const responce = await fetch(apiUrl +city+ `&appid=${apiKey}`);
    let data = await responce.json();
    console.log(data);
    if (data.message != 'city not found'){
        document.querySelector(".city").innerHTML = data.name;
    }
    else {
        document.querySelector(".city").innerHTML = "Ошибка ввода названия города";
    }
    document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°C";
    document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
    document.querySelector(".wind").innerHTML = data.wind.speed + "км/ч";
    document.querySelector(".pressure").innerHTML = data.main.pressure + "мл. рт. ст.";
    document.querySelector(".feels").innerHTML = data.main.feels_like + "°C";

    if (data.weather[0].main == "Snow"){
        weatherImage.src = "images/snow.png";
    }
    else if (data.weather[0].main == "Drizzle"){
        weatherImage.src = "images/fog.png"
    }
    else if (data.weather[0].main == "Mist"){
        weatherImage.src = "images/fog.png"
    }
    else if (data.weather[0].main == "Fog"){
        weatherImage.src = "images/fog.png"
    }
    else if (data.weather[0].main == "Clear"){
        weatherImage.src = "images/sun.png"
    }
    else if (data.weather[0].main == "Clouds"){
        weatherImage.src = "images/clouds.png"
    }
    else if (data.weather[0].main == "Rain"){
        weatherImage.src = "images/rain.png"
    }}

clickButton.addEventListener("click", function() {
    setInterval(function() {
        callWeather(getCityName.value);
    }, 1000);
});

function getDeviceLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      function (position) {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        const apiUrl = `https://api.openweathermap.org/data/2.5/weather?units=metric&lat=${latitude}&lon=${longitude}&appid=${apiKey}`;

        fetch(apiUrl)
          .then((response) => response.json())
          .then((data) => {
            const city = data.name;
            document.querySelector(".search input").value = city;
            document.querySelector(".location").textContent = `⠀${city}`;
            callWeather(city);
          })
          .catch((error) => {
            console.log(error);
          });
      },
      function (error) {
        console.log(error);
      }
    );
  } else {
    console.log("Geolocation is not supported by this browser.");
  }
}

window.addEventListener("load", getDeviceLocation);

Причём, этот код работает с местоположением правильно на сайте (не как apk-файл), а как apk-файл - нет.

БЛОГ НА HUSL

У меня проблема с работой переведённого сайта в apk-файл

Ответы (0 шт):