Nowości w Chrome 79

Pete LePage

Wdrażamy Chrome 79!

Jestem Pete LePage. Przyjrzyjmy się, co nowego dla programistów w Chrome 79.

Ikony z możliwością maskowania

Jeśli masz Androida O lub nowszego i zainstalowaną progresywną aplikację internetową, to pewnie widzisz irytujące białe kółko wokół ikony.

Na szczęście Chrome 79 obsługuje teraz ikony z możliwością maskowania w zainstalowanych progresywnych aplikacjach internetowych.Musisz zaprojektować ikonę tak, aby mieściła się w bezpiecznej strefie – po prostu okrąg o średnicy 80% powierzchni obszaru roboczego.

Następnie w manifeście aplikacji internetowej dodaj do ikony nową właściwość purpose i ustaw jej wartość na maskable.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes ma wspaniały post na temat CSS Tricks: Maskable Icons: Android Adaptive Icons for Your PWA, który zawiera wszystkie szczegóły. Znajdziesz tam też świetne narzędzie, za pomocą którego możesz sprawdzić, czy ikony pasują do siebie.

Web XR

Dzięki interfejsowi WebXR Device API możesz teraz tworzyć realistyczne wrażenia na smartfonach i wyświetlaczach umieszczanych na głowie.

WebXR zapewnia całą gamę doświadczeń immersyjnych. Od wykorzystania rzeczywistości rozszerzonej, aby jeszcze przed zakupem sprawdzić, jak nowa kanapa może wyglądać w Twoim domu, po gry w rzeczywistości wirtualnej czy filmy 360°.

Aby zacząć korzystać z nowego interfejsu API, przeczytaj artykuł Rzeczywistość wirtualna pojawia się w internecie.

Nowe testy origin

Testowanie origin pozwala nam weryfikować eksperymentalne funkcje i interfejsy API oraz przekazywać opinie na temat ich użyteczności i skuteczności przy szerszym wdrażaniu.

Funkcje eksperymentalne są zwykle dostępne tylko po oznaczeniu flagą, ale gdy zaoferujemy daną funkcję w wersji próbnej origin, możesz zarejestrować się w wersji próbnej origin, aby włączyć ją dla wszystkich użytkowników w pierwotnej lokalizacji.

Zgoda na testowanie origin pozwala tworzyć wersje demonstracyjne i prototypy, które użytkownicy testujący wersję beta mogą wypróbować przez cały czas trwania tego testu bez konieczności odwracania specjalnych flag w Chrome.

Więcej informacji na temat testowania origin znajdziesz w przewodniku po testowania wersji origin dla deweloperów witryn. Listę aktywnych wersji próbnych źródła możesz wyświetlić i zarejestrować się na stronie Wersje próbne źródła Chrome.

Blokada wybudzania

Jedną z największych obaw dla zwierząt jest to, że jeśli na zbyt długo pozostawisz taras otwarty na jednym slajdzie, włączy się wygaszacz ekranu. Zanim przejdziesz dalej, musisz odblokować komputer. Wrrr...

Jednak nowy interfejs Wake Lock API może blokować stronę i zapobiegać przyciemnieniu ekranu lub włączeniu wygaszacza. Idealnie sprawdza się w Prezentacjach, ale przydaje się też na przykład w witrynach z przepisami, gdzie warto mieć włączony ekran podczas wykonywania instrukcji.

Aby poprosić o blokadę uśpienia, musisz wywołać navigator.wakeLock.request() i zapisać zwracany obiekt WakeLockSentinel.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Blokada jest zachowana, dopóki użytkownik nie opuści strony lub nie wywołasz funkcji release w zapisanym wcześniej obiekcie WakeLockSentinel.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Więcej informacji znajdziesz na stronie web.dev/wakelock.

rendersubtree atrybut

Czasami nie chcesz, by część DOM została od razu wyrenderowana. Dotyczy to na przykład przewijania z dużą ilością treści lub interfejsu z kartami, gdzie w danym momencie widoczna jest tylko część treści.

Nowy atrybut rendersubtree informuje przeglądarkę, że może pominąć renderowanie tego poddrzewa. Dzięki temu przeglądarka może poświęcić więcej czasu na przetwarzanie pozostałej części strony, co zwiększy wydajność.

Gdy rendersubtree ma wartość invisible, treść elementu nie jest rysowana ani testowana pod kątem trafienia, co umożliwia optymalizację renderowania.

Zmiana z rendersubtree na activatable spowoduje, że treść stanie się widoczna, usuwając atrybut invisible i renderując ją.

Chrome Dev Summit 2019

Jeśli nie udało Ci się wziąć udziału w konferencji Chrome Dev Summit, wszystkie rozmowy znajdziesz na naszym kanale w YouTube.

Jake prowadzi świetny wątek na Twitterze, w którym przedstawia wszystkie zabawne rzeczy, w tym najnowszego członka naszego zespołu – Surjiko.

Więcej informacji

Obejmuje to tylko niektóre z najważniejszych momentów. Poniżej znajdziesz dodatkowe informacje o zmianach w Chrome 78.

Zasubskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał dla deweloperów Chrome w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 80, zajmę się tym, co nowego w Chrome.