Jak to zrobić: ukrywanie elementów strony w aplikacji

Czasem strona zawiera elementy, które mają sens w przeglądarce, ale nie powinny być wyświetlane w aplikacji. Typowe przykłady to banery proszące o pobranie aplikacji, banery cookies, które mylą recenzentów Apple, przyciski płatności podczas App Review albo nawigacja strony, którą zastępuje menu aplikacji.

Jeśli chcesz dodać zachowanie specyficzne dla aplikacji bezpośrednio na swojej stronie, możesz też wykrywać, czy odwiedzający korzysta z aplikacji. Przeczytaj nasz poradnik o rozróżnianiu użytkowników strony i aplikacji.

Poniższe sekcje omawiają różne ustawienia, które możesz dostosować w „Dostosowywaniu strony”. Ustawienia dostosowywania strony dla Twojej aplikacji otworzysz tutaj.

Selektory ukrywanych elementów

Użyj selektorów ukrywania elementów, gdy konkretne elementy nigdy nie powinny być widoczne w aplikacji. Wpisz selektory CSS dla elementów, które chcesz ukryć. Aplikacja ukryje wszystkie pasujące elementy, gdy Twoja strona jest wyświetlana w aplikacji.

To dobre rozwiązanie dla promptów pobrania aplikacji, zduplikowanej nawigacji strony lub innych elementów, które są przydatne na stronie, ale zbędne w aplikacji.

CSS do wstrzyknięcia

Zwykle selektory ukrywania elementów są lepsze, bo działają szybciej (bez migotania przed zastosowaniem CSS), ale możesz też użyć CSS do wstrzyknięcia, gdy samo ukrywanie nie wystarcza i chcesz dostosować styl strony w aplikacji. CSS jest wstrzykiwany do wyświetlanej strony i nie musisz opakowywać go w tag style.

.website-only-banner {
    display: none !important;
}

JavaScript do wstrzyknięcia

Użyj JavaScript do wstrzyknięcia, gdy ukrywanie lub zmiana elementów wymaga logiki albo nie możesz znaleźć dobrego selektora CSS. JavaScript uruchamia się raz na każde wczytanie strony po zdarzeniu DOMContentLoaded i nie musisz opakowywać go w tag script.

Oto przykład, który używa pętli do ukrywania dynamicznie ładowanych przycisków logowania społecznościowego, których Apple nie dopuszcza:

setInterval(() => {
  if (window.location.href.toLowerCase().includes("login")) {
    document.querySelectorAll("button").forEach(btn => {
      const text = btn.textContent.toLowerCase().trim();
      if (
        text.includes("sign in with google") ||
        text.includes("continue with google") ||
        text.includes("sign in with microsoft") ||
        text.includes("continue with microsoft") ||
        text.includes("sign in with facebook") ||
        text.includes("continue with facebook")
      ) {
        btn.style.display = "none";
      }
    });
  }
}, 200);

Prompt dla stron zbudowanych przez AI

Jeśli Twoja strona została zbudowana narzędziem AI, możesz wykorzystać je też do pomocy w ukrywaniu elementów. Na przykład, jeśli potrzebujesz prostego sposobu na ukrycie w aplikacji wszystkich elementów związanych z płatnościami, możesz podać taki prompt:

Potrzebujemy prostego sposobu na ukrycie ze strony wszystkich elementów związanych z płatnościami. W tym celu nadaj wszystkim elementom UI związanym z płatnościami klasę HTML „payment”. Jeśli element nadrzędny ma klasę payment, jego elementy potomne nie muszą już mieć tej klasy, ponieważ zostaną ukryte automatycznie, gdy ukryty zostanie element nadrzędny. Nie implementuj żadnej logiki ukrywania — to dzieje się poza stroną.

Następnie dodaj selektor CSS .payment do selektorów ukrywania elementów i wszystko związane z płatnościami nie będzie już wyświetlane w aplikacji.