Nowości w Chrome 79

Pete LePage

Chrome 79 jest już w drodze!

Nazywam się Pete LePage. Zapraszam do obejrzenia nowości dla deweloperów w Chrome 79.

Ikony z możliwością maskowania

Jeśli używasz Androida O lub nowszego i masz zainstalowaną progresywną aplikację internetową, prawdopodobnie zauważysz denerwujące białe kółko wokół ikony.

Na szczęście Chrome 79 obsługuje teraz ikony, które można maskować w przypadku zainstalowanych progresywnych aplikacji internetowych.Musisz zaprojektować ikonę tak, aby mieściła się w bezpiecznym obszarze, czyli w kółku o średnicy równej 80% obszaru roboczego.

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


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

Tiger Oakes opublikował na stronie CSS Tricks świetny artykuł Maskable Icons: Android Adaptive Icons for Your PWA (Maskowalne ikony: adaptacyjne ikony na Androida dla Twojej aplikacji internetowej) ze wszystkimi szczegółami. Zawiera on też świetne narzędzie, które możesz wykorzystać do testowania ikon, aby upewnić się, że będą pasować.

XR w internecie

Teraz możesz tworzyć wciągające treści na smartfony i wyświetlacze montowane na głowie za pomocą interfejsu WebXR Device API.

WebXR umożliwia korzystanie z całego spektrum wciągających doświadczeń. Od rzeczywistości rozszerzonej, która pozwala sprawdzić, jak nowa kanapa będzie wyglądać w Twoim domu, po gry w rzeczywistości wirtualnej i filmy w 360°.

Aby zacząć korzystać z nowego interfejsu API, przeczytaj artykuł Wirtualna rzeczywistość w internecie.

Nowe wersje próbne origin

Testy pochodzenia umożliwiają nam weryfikację funkcji eksperymentalnych i interfejsów API oraz pozwalają Ci przekazać opinię na temat ich użyteczności i skuteczności w przypadku szerszego wdrożenia.

Funkcje eksperymentalne są zwykle dostępne tylko po włączeniu flagi, ale gdy oferujemy testowanie wersji źródłowej danej funkcji, możesz zarejestrować się w tym teście, aby włączyć tę funkcję dla wszystkich użytkowników w Twoim punkcie początkowym.

Włączenie wersji próbnej pochodzenia umożliwia tworzenie wersji demonstracyjnych i prototypów, które użytkownicy testujący wersję beta mogą wypróbować przez cały okres próbny bez konieczności włączania specjalnych flag w Chrome.

Więcej informacji o testach pochodzenia znajdziesz w przewodniku Origin Trials dla programistów stron internetowych. Listę aktywnych testów wersji źródłowej znajdziesz na stronie Testy wersji źródłowej Chrome.

Blokada wybudzania

Jedną z największych wad Prezentacji Google jest to, że jeśli zostawisz otwarty zestaw na jednym slajdzie przez zbyt długi czas, włącza się wygaszacz ekranu. Zanim przejdziesz dalej, musisz odblokować komputer. Yyy.

Dzięki nowemu interfejsowi Wake Lock API strona może żądać zablokowania i zapobiec przyciemnieniu ekranu lub włączeniu wygaszacza ekranu. Tryb ten doskonale sprawdza się w przypadku slajdów, ale jest też przydatny w przypadku witryn z przepisami, gdy chcesz zachować włączony ekran, aby móc śledzić instrukcje.

Aby zażądać blokady aktywacji, wywołaj funkcję navigator.wakeLock.request() i zapisz zwracany przez nią 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 utrzymana, dopóki użytkownik nie opuści strony lub nie wywoła metody release na 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, aby część DOM była renderowana natychmiast. Na przykład przewijanie dużej ilości treści lub interfejs z kartami, na którym 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 przetworzenie pozostałej części strony, co zwiększa wydajność.

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

Zmiana wartości atrybutu rendersubtree na activatable powoduje wyświetlenie treści przez usunięcie atrybutu invisible i wyrenderowanie treści.

Chrome Dev Summit 2019

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

Jake prowadzi też świetny wątek na Twitterze, w którym omawia wszystkie ciekawe wydarzenia, które miały miejsce między wykładami, w tym dotyczące nowego członka naszego zespołu, Surjiko.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 78, kliknij linki poniżej.

Subskrybuj

Jeśli chcesz być na bieżąco z naszych filmów, zasubskrybuj kanał YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy opublikujemy nowy film.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 80 opowiem Ci o nowościach w tej przeglądarce.