오랜만에 patch들을 pull 받고 빌드하는 시간 동안 Chromium에서 SPA(Single Page App)를 위한 API가 어떤 것들이 있을까 라는 생각으로 feature들을 살펴보던 도중 흥미로운 기능이 현재 막 개발되고 있어서 글을 쓴다.

2021.03.11 기준으로 아직 한창 개발되고 있는 feature이다. Android Webview와 깊은 연관이 있는 만큼 나중에 완성되면 Google IO 같은 데서 한번 말하지 않을까 라는 생각이 든다. (아닐 수도 있다. ㅎㅎ..)

아직은 비표준인 것 같다. 아마 표준이 되지 않을까 생각된다. WICS Proposal

runtime flag 에 따르면 프로토타입은 나온것 같으니 한번 사용해보도록 한다.

Untitled

TL;TR

function changeBodyBackground() {
  document.body.style = "background: blue";
}

function handleTransition() {
  document.documentTransition.prepare({
    rootTransition: "reveal-left",
    duration: 300
  }).then(() => {
    changeBodyBackground();
    document.documentTransition.start().then(() => console.log("transition finished"));
  });
}

트렌지션을 시도하기 전 그 화면을 texure로 렌더링해놓는다. 이 작업을 prepare라고 한다. 이 작업은 비동기적으로 실행되며 GPU 자원을 사용할 수 있다. 그런 뒤 Transition을 하면 렌더링해놓은 텍스쳐 뒤로/앞으로 DOM을 렌더링한다. 그런 뒤 요청한 방식대로 그 이미지를 제거한다. (like reveal-right)

문서의 motivation쪽을 보니 transition에 부족한점이 많아서 SPA를 혹은 MPA를 위해 시작했다고 한다.