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 z możliwością maskowania w przypadku zainstalowanych progresywnych aplikacji internetowych.Musisz zaprojektować ikonę tak, aby mieściła się w bezpiecznym obszarze, czyli kręgu 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 doświadczenia na smartfonach i wyświetlaczach montowanych 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 wirtualnej rzeczywistości i filmy w 360°.

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

Nowe wersje próbne origin

Testy wersji źródłowej 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 otwartą prezentację 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 jest idealny do korzystania z Prezentacji, ale przydaje się też w przypadku witryn z przepisami, w których możesz chcieć zostawić włączony ekran, gdy wykonujesz 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 reszty strony, co zwiększy 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 najnowszy członek 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 nasz kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

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