こんにちは。このワークショップにようこそ、インスタントとシムレスのウェブアップを作ります。私の名前はシュミア。Googleのウェブエコシステムコンサルタンです。そして、ハディアンです。Googleのウェブエコシステムコンサルタンです。今日のワークショップの司会は、コードラップと一緒に行ってみます。ウェブアプリケーションで、プロって、クロムを描いて使える役割を場合は、インスタントと、トランディションもシムレスのために入るコードラップと一緒に行ってみます。私はハディアンにも話せます。いちがうつもり、インスタントとシムレスにスタンボートラップで行ったり、シムレスやファイゼアーは大事です。おそらく。そのパワーアップは、インスタントとシムレスのために使用者の存在を受けに行うために、エネルギーをフィルーに取り入れました。コロナウィが本当に多くのアクセイトのフィルーツを使用者の使用性、プロフォーマンス、賞助やフィゾールに移行する。コロナウィの使用性は、あそこで、実際にエスペクトの別に存在することが大事です。このコートラップについて説明する三つの新しいアピアを説明します。プレイレンドリング、バッグフォードキャッシュ、プライバットプリフェッシュプロクシーを説明します。このアピアはフィルムのウェブサイトによって、コロバイトのコーナーを調整することができます。特にコーナーのプロフォーマンスを調整することができます。そして、このアピアについて、Root shared element transitionsを調整することができます。ブレード画面を打取するようで、マーバー的なアプトのオーバーナーがデバイスで流行されていきけれども、実際にたくさんのアピアを調整する のが大事にはおかけます。また、立具中央の來說、やって見たこと ominityらのものは実際の形になります。今回の權力経験によって自動車という among the most famous ITTF appsが給募されている話ができます。このアピアのアピアの復習について科学响に遅 Sri Jasach Whiteこのアピアは未来のステージであるそのため、今日の場合はバッグ、リミュータション、未来の場合はアピアの場合は未来の場合も変わるそのため、バッグとリポットのフィットバッグをサブメイトすることをご覧いただけますでは、インスタンドとシンボルスのシュニアを始めましょうでは、コードアップに入りましょうサンプルウェブアップは次のJSを組み立てますこれらのプロジェクトフレームワークはNPA、マルトページアプリケーションパートとSPA、デモパーボスのシングルページアプリケーションパートですフィルエンダリングとNPAページアプリケーションのバッグファードキャッシュを組み立てますそして、SPAページアプリケーションのシアドエレメントの製品を組み立てますまず、ブラウザーを使うAPI、Chromeバージョンを1on1に使う、JavaScript、HTML、CSS、JavaScriptそして、Chrome DevToolsを使う次に、Chrome Flagsを使うブラウザーを開け、Chrome Slash Flagsを使うと、アドレスパーを使う2 Flagsを使う1はプリレンジでそして、2はシアドエレメントの製品の製品の製品の製品のそのAPIがフラッグを製作しているフラッグがフラッグを製作しているフラッグを製作しているフラッグを製作しているフラッグを製作するフラッグを製作するそして、ソースコードを下載ソースコードをゲットアップにホストしているGitChromeコマントを下載しているブランチネームを特定することでBをパッタリングするブランチネームはスプラッグを製作することでソースコードを下載NPMのインストールコマントNPMのランデブコマントを下載することでアップに開始することでローカルサーバーを開始することでNPMのランデブコマントを終了することでサーバーがランデブを見ることができますサーバーがスタートした今、新のアイアンデスのフィーチャーズを使用することで名前は3. LoadRenderingand running a web pagebefore the user actually navigates to it主要な目的にはprerendering がideally achieve near-instant navigationこのコードを伺ってprerendering will apply for same origin URLYou can read this Web.dev articleWeb.dev.slas.speculative-pre-renderingthat explains about pre-rendering in great detail.To achieve the near instant experience,a pre-rendered page is created when the browser acts on a hint to pre-render a URL.The content is loaded into a pre-rendering browsing context.A new type of browsing context that can be thought of as a browser tab.That is not yet shown to the users.When users navigate to that URL,the pre-rendering browsing context is activated.From the user's perspective,activation acts like an instantaneous navigationbecause it does not require a network round trip,creation of a document,or running JavaScript initialization,like a normal navigation.All of those things have already been done in the pre-rendering browsing context.I also mentioned earlier that the browser needs a hint to pre-render a URL.This is done through the speculation rules API.You can learn more about this in this github page,github.com slash wicg slash nav speculation.And if you find out about the speculation rules section,you will be able to find that speculation rulesis a new way to declare what kind of speculationthe browser may do about future user activity.In this case,an outgoing navigation.You can use this API to tell the browserwhich links to pre-render.The speculation rules is json objectincluded within a script tag that can be inlinedor loaded externally.Just before we start working on pre-rendering,I would like to highlight two things.One,pre-rendering requires more device and network resourcesthat resource hints like pre-connect,pre-fetching,and the others are doing.So please be mindful when selecting the URL to pre-render.You should analyze your user navigation patternand only pre-render the URL that your usersare most likely to navigate to.You should also avoid pre-rendering pages like the checkout,attocard,login, or logout pages.The second point is that the current pre-renderingorigin trial only accepts one sameorigin URL to pre-render per page.With that,shunya will now show youhow to integrate pre-rendering into the sample app.Shunya?Alright,let's implement the pre-rendering featureinto the sample app.We are going to add the feature to the listof vegetable page.For the demo purpose,the response timeof the vegetable detail page is very slowby having a delay on the server side.We can eliminate this,this waiting timeby using pre-rendering.First,let's add a new button to the listof vegetable page that will trigger pre-renderingonce a user clicks it.We will start from making a new button componentat the first step.So,we can copy and paste the code snippetfrom the code lab and create a new file.We can create a new file under components directoryand namingpre-render-button.jsand paste it.Basically,thispre-render component renders a button elementand triggers the handle click functionwhen the user clicks the button.Inside the function,we capture the URLof the next page and pass itto the dispatch function.We importresource context here.This is a pre-definedfeature in this web app.It managesglobal states by using react context.Thepre-render URL is managedin resource context and it will be usedfor making a speculation rules componentonce it's updated.Once wecreate thepre-render-button componentthen we import it into thelistitem component.It's a componentfor listitems in the list pages.So,let's open the listitem.jsand we canuncomment here and here.So,we import thepre-render-buttonand use iton listitem for mpa function.Next,we are going to makeanother new component,which is speculation rules component.This component willinsert a speculation rules script tag into the HTMLto trigger pre-rendering.We create a new fileunder the component directory and namedspeculation rules.jsand paste it.So,in this codewe makecustomscript tag by usingscript component provided by next.js.This component will insert a script tagonce thepre-rendered URL global statehas changed.Then,import the speculation rules componentinto ourapp.js.Let's open theapp.jsand we can importspeculation rules component hereand uncomment this line.Now,we've implemented the basic featureofpre-render.Let's check how it workson the browser.So,we have pre-render-button hereand without pre-rendering,the navigationto detail page takes a very long timelike this.After clickingthe button,the pre-rendering process has startedin the background and it results inthe page loading instantly like this.Yes,it works.We successfully open the next pagewithout waiting for the loading and rendering time.It looks great.Thanks,unya.As you work on implementing pre-renderingon our sample app,there is one sticky questionon top of my head.What happens with thejava script on the page that are pre-renderedbut not yet activated?Do they run at all?That's a good point,Hadian.You should be carefulof which scriptson the pre-rendered pagebecause they will be run even beforeuser navigates to the pre-rendered page.Let's take an example of the analytics script.PageView events shouldonly be sent when the user actively visitsand visually sees the website.Not the time when the website is pre-renderedbut not activated yet.Let's open analytics.jsand the public directory.By defaultanalytics.js in the sample web appsends a page view event in the DOM content loadedevent handler.Unfortunatelythis is not wise because this eventwill fire during the pre-rendered phase.So let's make thisanalytics.jsto be pre-renderedaware.We introduce document.pre-rendering property and thepre-rendering change event here.A document can tell it being pre-renderedwith the document.pre-rendering property.Upon navigation,the pre-renderingchange event is dispatched to the document.We go back to the editor.Firstwe should changeanalytics.jsnot to sendpageview event if the page ispre-renderedbut not activated yet.We put the document.pre-rendering property checkin the sendEvent function.Basically we can uncomment here.This sendEvent function is called on in the DOM content loaded event.If the page ispre-renderedbut still not activatedthe property returns true.So we cansimply return in that case.The next point is we need to sendthe pageview event when the pre-renderingpage is activated.Since the pre-rendered page alreadyfinished the DOM content loaded eventwe use the pre-rendering change event in this case.So let's uncommentthis lines.This event is triggeredwhen the pre-rendered page is activatedand the user actually opens the page.And we call sendEvent function insideNow we are changed the analytics code to bepre-render aware.Let's check how it workson the browser.You can open the dev toolsand click the console tab.You can see the event is sent when thepage is opened,like this.And click the pre-render button.And click the link.Yes, we areseeing the page activation log firstand thenthe pageview event.That works correctly.The pageview event is sentexactly when we activate the pre-renderedpage.All right, moving on to the nextinstant navigation API.The Backward Cache.The Backward Cache orBFcache is a browser optimizationthat enables instant back-and-forward navigation.Chrome Data shows the aroundone in ten navigations on desktopand around one in five on mobileeither back or forward navigation.BFcache is different from theHTTPcache.HTTPcachecontains only the responses such asHTML, CSS, JavaScriptfor previous madeHTTP requests.While BFcache is anin-memory cache that stores a completesnapshot of a page,including JavaScript heap.With BFcache enabled,loadingthe previous page is essentiallyinstant because the entire pagecan be restored from the memory withouthaving to go to the network at all,norhaving to re-render the pageeither.We can check the comparison later on the Web.Dev article.There are lots of factors for BFcache eligibility.Please check out Web.Dev BFcacheto get an in-depth detail about thecommon BFcache brokers and in this workshopHadyan will take you through how to unblockthe top two BFcache brokers.The Unload Event Handerer and Cache ControlNo Store HDP header.Our sample app has an unnecessaryunload event handler.It is a common mistaketo use an unload event because it isunreliable.It does not always fire onmobile platforms and Safari.Now we can remove this unload event fromour sample app.The unload event is triggeredfrom public slash analytics.js file.We are now replacing this unload eventwith a page height event instead.Page height event is much more reliablebecause it fires in all cases when the unload eventfires and it also fires when a page isput in BFcache.This is the first blockerand let's move on to the second blocker.The second blocker that we want to removeis the cache control no store HGTP header.We will call it this CCNS header.If a page does not contain personalizedor critical information like in thecase of our sample app,we probablydon't need to serve our page with the CCNSHGTP header because the page will not benefitfrom the browser's BFcache future.Becauseright now our sample app is run locally withthe next dev command,the next.js libraryoverrides its HTTP header with CCNSheader in order to prevent local cachingfor development and debugging purposes.To confirm thiswe can use the network step in DevToolsto check the HTTP header of our sample app.If we pick up the DevToolsnetwork tab,let's reload our sample appand we can see that there is a cache controlno store header here.So now as an exercise in this code labwe can declare a cache control publicHGTP header in two files to be able to seehow BFcache impacts these two pageswhen we navigate back and forward between them.Let's go back to our code editorand let's work on the vegetableindex page.In herewe have prepared this set header function callthat we can uncomment and you can seethat we are calling the cache control public header here.So that's the first file and the secondfile that we are going to modify is thedetailed page of each of the vegetablevegetable slash name.jsso similarly we have prepared a setheader function call here and we can just uncommentthis line.Save it and now we have thesetwo pages explicitly calling cache controlpublic header.Now that those codes are in placethe next step is to stop our dev serverwhich I'm doing at the bottom of the screen hereand then we can run an npm runbuild command to make our production buildit may take a couple of seconds to complete the buildingnow that we have built the production buildwe will run our production build with npm runstart.Everything looks good on the production buildso now we can head back to our browserand we can reload our vegetable pageonce again we look at the networktap in the dev tools consolenow we can inspect that the cache controlis set to public.Let's also inspectthe vegetable detail pageas soon you mentioned there is some delaythat we especially put in for thissample app and we also see that it issetting the cache control to publicso now let's see whether the bf cache is in placenow if we move back with our browser back buttonand then move forward againwe can see that the page loadis really different now don't you thinkwe are seeing a near instant experience herebecause the page is loaded from bf cachethat's it we have successfully removedthe two main bf cache blockersthe unload event handlerand CCNS HTTP headerI would like to mention that the Chrome team proposesthat pages with CCNS HTTP headerare stored in bf cache in some scenariossuch as when there are no cookie changesyou can check the details of this proposalby following this URL in our code labbut I have two questionshow can we gather the stats of pagesthat are stored from bf cachealso after we removed the blockershow can we debug if the page is noweligible for bf cacheis that an easy way to checkthose are great questionsfirst of all I would like to note that the main analytics toolsand Chrome user experience reportare aware of bf cachebut we also want to show you that you can use a propertycalled persisted in the page show eventto show whether a page is restoredfrom bf cache or notlet's head back to the public slash analytics.js fileon our sample appyou can see that we have prepared a code block herefor the page show eventso we can just uncomment this blockand in this page show event handlerthere is a persisted eventwhich only returns true when the page is restoredfrom bf cacheinside this persisted event code blockyou can run any ping to your in-house analytics toolor in this case we are just sending a message to the dev consolethis should do itso previouslythere is no eventwhen the page was loaded from bf cachenow let's reload our pagesthis is the vegetable index pageand then the detail page of the vegetablenow if we go back to the previous pagewe can see this message that we just addedthe page was restored from bf cachesame goes if we go forwardthis page now has the page restoredfrom bf cachemessage that we have addedinside the page show event handlernow you can gather any statisticsthat you want only when your page is restoredfrom bf cacheand for your second question junia about how we can debuga page eligibility for bf cachethere is a dedicated testing tool in dev toolsto identify any bf cache blockersin dev tools let's open the application stepand on the left side you see the cache heading hereunderneath you will find the back forward cache testinginside this toolwe can use this test back forward cache buttonwe click on it the page will reloadand if the page is successfully restored from bf cacheyou will see this message here successfully served from back forward cacheotherwise it will list down the bf cache blockersfor example when the page has the unload handleror cache control no store httpheader like what we discussed earlieri hope this answers your question juniayes certainlythey are clear nowthanks hedianso we have pre renderingand bf cache in the appbut what about the user experiencefn user navigates from other sitessuch as google search pagelet me introduce the concept of prefetchbasically prefetching speeds up navigationby starting fetches earlyso that the response are alreadyat the browser fn the user navigateshowever fn it is done with a naive approachthere is a trade-off in which user informationsuch as their interest or IP addresswould be revealed to the publishersbefore the user decides to navigatethat's not good from the privacy perspectivethe private prefetch proxy solved this problemprivate prefetch proxy enables cross-site prefetchwithout revealing private informationabout the user to the destination serverthis proxy never sends cookiesor other personally identifiable informationalso it hides the browserit hides the user IP address viahttp to connect proxyas it is shownin the animated imagein our codelab prefetches are end-to-endand encrypted between chrome and the orgythe proxy only knows the hostnameof the destinationthe private prefetch proxy is now providedan early access programby opting in chrome will try toprefetch the links to your websiteon the google search pageif it's eligibleplease keep in mindthat these are the instructionsthe current state of the private prefetch proxyat the time of recordingfor the latest please refer this URLgo.gre-p3-infoHardian will now take you throughon what we have to doto get the benefit from this technologythere is a new resource calledTravic Advicethat allows site owners to controlthe site response to private prefetchproxy requestsfor example, if you need totemporarily opt outor if you want to limit theprefetching connectionsyou can think about traffic adviceas something similar to your robots.txt filewhich gives directives to web crawlerswhen it crawls your siteduring the early access programwe are also using this traffic adviceto opt in to the private prefetch proxylet's add this resource to our sample appwe have to edit under the publicslash well known directorywe are creating a new file hereand call it traffic-advicenow that the file is createdlet's take the sample code snippetfrom our code lablet's copy from hereand paste it to our newly created fileas you can seethe file contentis actually a JSON configurationin this casegoogle prefetch proxy EAPis a special field to opt into the early access programand the fractionis a field to control the fractionof private prefetch proxy requestsjust one more thingthe traffic-advice also needs to be writtenwith a specific mime typethat's why we need to configurethe response header of our sample appin the next.config.js file heresince we have prepared the code blocklet's uncomment thisand now you can seethat whenever the browser requestfor the traffic-advice fileit will be writtenwith the content typethat is set to application-slash-traffic-advicelike we are setting heresince we updated the next.js.config filewe need to stop our server againwhich i'm doing at the terminal at the bottom of the screenand then let's restart itwith the npm run dev commandto start our dev server againlooks like the server is startedso let's head back to our browserand check whether the traffic-advice file is in placeas you can seethe file is now served from our sample appand let's inspect the network tabin dev toolsand we can see that the content typeis as per what we have set just nowapplication-slash-traffic-advice-plus-jsonthat's about itwe have now opted in our sample appto use private prefetch proxywhat do you think, Sunya?wow that's a very simple processto obtain the EAPwe can get the benefit of prefetchingand that would improvethe core web vital score in the fieldas we mentioned beforeprivate prefetch proxyis still actively developedand the instruction might be changedin the futureplease check the latest statusfrom the public GitHub repositorywhen you work on itanother option to enable cross-site prefetchis using signedexchangewe don't cover signedexchangeat this workshopbut please take a lookat the Google search documentationand web.dev articlesfor more detailsthere are lots of useful librariesand tools that makes it easyto build signedexchange on productionalrightso far we have coveredthe three instant navigation APIsnow we will look atthe seamless transition APIroot shared element transitionon the webwhen a user navigates from page Ato page Bthe content that they are looking atchanges suddenlyand as page A disappearsthen page B jumps into viewthis sequenceand disconnected user experienceis forcing users to piece togetherhow they got to where they come fromthis jarring experiencealso increases how much usersperceive the page loadingas they wait for the destination page to loadsmooth loading animationscan lower the cognitive loadby helping users stay in contextas they navigate between the pagesand also reduce theperceive latency of loadingby providing users with something engagingand delightful in the meantimefor this reasonsmost platforms such asandroid, iOS and windowsprovide easy to useand thenthe root shared element transitionapp provides developerswith the same capability on the webregardless of whether the transitionsare cross-document in multi-pageapplication orintradocument in single-pageapplicationall right, let's integratethe shared element transitioninto the SPA part of the sample appthe list of fruit pagesand detailed pagesare built with SPAso weapply the shared element transitionbetween those two types of pagesfirst of alllet's open the global.cssfilebasically sharedelements needs a specialcss which is thecontained property in cssand we setpaint as the value of the propertythis propertyallows elements to make anew stacking contextand impliesthe descendants of the elementsdon't apply outside of its boundsthat is a requirement for shared elementbeforediving into the sample app codelet me explain a little bit aboutthe transition objectwhich is the new javascript apiprovided by the shared elementtransitionsbasically we can split thetransition process into two stepsthe first step ispreparing the transitionon the first pagewe create the transition objectby calling the documentcreatedocument transition methodand we registeran element as shared elementby transition.set elementmethod and thenwe call the start methodthat's the first stepit should be doneon the start page before movingto the next pagethe second step is making apage transitiononce the start method is calledthe browser tries to capturesnapshot for the registeredelements.we updatethe DOM and switch to the nextpage inside the startfunctionafter switching to the next pagewe register the element by usingthe set element againso we are registering theelements in both start pageand next pageby doing sothose two elements are consideredas a shared element duringthe page transition in the browserwhen the callback finishesthe animation will startand we will see the seamlessnavigation between two pagesso how can we integrateit into next.jsor react component lifecyclein order tomanage that kind of workflowinside the sample appwe use some custom hooks in reactlet's open usepagetransition.jsso basicallywe have two custom hooksone is usepagetransitionprep and the otheris usepagetransitionthese twocustom hooks implement the workflowthat I explained beforeas I mentionedthe start method needs to be calledon the first pageand the next page needs to berendered inside the callbackfunctionto make this happenwe are using a promise in theusepagetransition prep hookin order to defer the callbackfunction being resolvednot on the first pagebut on the next pagewe pass the resolver functionfrom the start page to the next pagewe call usepagetransitionprepon the first pagewhich is the list pagein the sample appand we call the usepagetransitionfook on the second pagewhich is the detail pagelet's open the listitem.js fileand import the usepagetransitionprepfookyou can uncomment herethen wecheck listitem forspa componentwe receive the functionthat triggerthe transitionstart method from thefook and call it inside the click eventwe can uncommentthese linesinside the functionthe sharedElement classwe are collected and registeredas sharedElementsnow we've finished the workon the first pagemoving on to the next pagethat receives the transition objectlet's openthe name.js underfruit directoryon this detail pagewe call usepagetransitionfook to finishtransitionstart callback functionwe can uncomment hereand replace the linehereso we set the left objecthereit will be usedinside the custom hookin order to access the actualdome with using use leftfook in reactall rightwe've done the sharedElementtransition integrationlet's check the browserand see how it workslet's open the demo againso basicallywe expect imagesbetween the list and detail pageto be registered as sharedElementsand make smooth transitionwith animationyes it workswe've now achieved a seamless transitionon the sample appthat is the basic integrationof sharedElement Transition APIif you want to customizethe animation moreyou can use the CSS piece load processplease check outthe explainerfor more detailscongratulations for making itto the end of our code laband creating a low frictionengaging and intuitive web appwe hope you had a fun timegoing through this code lab with usas mentionedin the beginning of our code labthese apis are still in theirearly stagesso we would like to share these great referencesthat you can follow to get the latest updatesand learn morewe would once again invite youto submit your feedbackthrough the github pages of eachappor through crbug.comthere is also a great deep divesession about root sharedElementtransitions with jake archivaldo check it outand many other interesting IO sessionsaswellありがとうございましたありがとうございましたありがとうございました