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 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 – okrąg o szerokości 80% powierzchni 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 wykorzystania rzeczywistości rozszerzonej do sprawdzenia, jak może wyglądać nowa kanapa w domu przed zakupem, po gry w rzeczywistości wirtualnej i filmy 360°.

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

Nowe wersje próbne origin

Wersje próbne origin dają nam możliwość zweryfikowania funkcji eksperymentalnych i interfejsów API oraz przekazanie opinii na temat ich przydatności i skuteczności w szerszym wdrożeniu.

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 testowaniu origin znajdziesz w przewodniku po testowania origin dla programistów stron internetowych. Listę aktywnych testów wersji źródłowej znajdziesz na stronie Testy wersji źródłowej Chrome.

Blokada wybudzenia

Najbardziej denerwuje mnie w Prezentacjach Google, że jeśli zostawisz otwartą prezentację na jednym slajdzie na zbyt długo, włączy się wygaszacz ekranu. Zanim przejdziesz dalej, musisz odblokować komputer. Yyy.

Jednak w nowym interfejsie Wake Lock API strona może poprosić o zablokowanie, uniemożliwiając przyciemnienie ekranu lub włączenie się 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 uśpienia, musisz wywołać metodę 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 zostanie zachowana, dopóki użytkownik nie opuści strony lub nie wywoła 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, 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 przetwarzanie reszty strony, co zwiększy wydajność.

Gdy rendersubtree ma wartość invisible, treść 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 znajdziesz wszystkie ciekawe rzeczy, które wydarzyły się między wykładami, w tym najnowszy członek naszego zespołu – Surjiko.

Więcej informacji

To tylko niektóre z najważniejszych informacji. 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 deweloperó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.