Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FR: Seamless page transitions #12981

Open
ericlindley-g opened this Issue Jan 23, 2018 · 5 comments

Comments

@ericlindley-g
Copy link
Collaborator

ericlindley-g commented Jan 23, 2018

Developer impl
• Developer opts in/out links on a given page for managed page transitions

User-facing effect
• A more seamless page transition (no white flash, etc)
• Elements that are re-loaded get default loading animation.

AMP Impl
• Get URL
• Copy over script tags
• Replace body with new content ( @cramforce , would the entire document body be replaced, or just elements not common between the old and new doc?)
• pushState the URL (if in a viewer would need to coordinate) — handle back navigation, etc

Limitations
• Only works if the target page is AMP
• May only work on origin (though hopefully can get working from cache / in viewers)

/cc @cramforce @aghassemi @spacedino @choumx

@aghassemi

This comment has been minimized.

Copy link
Member

aghassemi commented Jan 24, 2018

So essentially origin-based version of A2A (#12496) ?
We should try to take the same implementation approach for both cases as much as possible. Maybe the only difference is the extra communication needed with the viewer to update its state of the current Url (which we need for Related-Content Infinite Scrolling anyway)

@cramforce

This comment has been minimized.

Copy link
Member

cramforce commented Jan 24, 2018

@aghassemi

This comment has been minimized.

Copy link
Member

aghassemi commented Jan 24, 2018

Good point, Prototype for Related-Content Infinite Scrolling uses PWA infra. I guess this can be thought of a special case of the same thing, a new doc is loaded but instead of getting appended to the initial doc, it replaces it. @emarchiori

@westonruter

This comment has been minimized.

Copy link
Member

westonruter commented Jan 29, 2018

• Replace body with new content ( cramforce , would the entire document body be replaced, or just elements not common between the old and new doc?)

Perhaps there should be a way to declaratively identify the regions of the document that should get updated? The title and any metadata would be a given. The class attributes on the body and html would be another good default. But then there'd probably need to be a way to identify the nav menu that would need to be updated, and then the container for the content that changes. Or else do diffing on the entire DOM. This seems quite related to amp-live-list which is a very simple example of dynamically inserting content from another URL based on comparing the two DOM trees.

@westonruter

This comment has been minimized.

Copy link
Member

westonruter commented Jan 29, 2018

I see this AMP component as also powering app shell capabilities. If the live regions of the AMP document are marked, then the app shell is essentially the document with the regions replaced with placeholders. This can then be cached as the app shell for subsequent launches of the app to then be populated with the regions in the requested URL, which is also either cached or which needs to be fetched from the network.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.