Amphtml: Similar to `javascript:window.close()` feature

[leonalicious]

Hey there, here is some background, our Search List page is using amp-list to fetch and render data. And based on its nature behavior, amp-list will alway send request and fetch latest data.

FYI, we have been trying several methods to achieve a more completed shopping experience on Search List -> Detail , and then buyers can return back to Search List from Detail, and stop the buyers at the exact viewport they scrolled at & filter criteria they have selected.

Right now, we have come out with a solution to make this happens, which is at the Search List page, we will set target="_blank" on each <a href> tag in order to open Detail page in a new tab in browser, and javascript: window.close() at the Detail page to close the page when user clicks on Back Arrow (located at the top left corner of the page) or Navigation Back button on Android phone.

Here is the question I wanna ask, is there any function or solution that we can implement that will work like javascript: window.close() or any suggestion to make this flow happens, please advise

[choumx]

Not sure what category this should be in. I don't see a reason why we couldn't add this, though opening a new tab is pretty slow. Also, system affordances (e.g. swipe from left edge on iOS, Android back button) already accomplish this.

Search List -> Detail , and then buyers can return back to Search List from Detail, and stop the buyers at the exact viewport they scrolled at & filter criteria they have selected.

You could try to do this with a same-window element popup (i.e. no page navigation).

/cc @aghassemi

[aghassemi]

@leonalicious @choumx yeah, adding AMP.closeWindow() LGTM
I do not recommend using same-window amp-lightbox for something as heavy as a details page, such behaviour requires proper single-page-app support but amp is focused on multi-page cases.

p.s. @leonalicious I am working on a project to enable better multi-page transitions and navigation in AMP using WebPlatfroms's upcoming "Portals" feature. AliExpress is a perfect example where this can be beneficial. Hope we can collaborate (likely closer to mid 2019 as portals is in early development right now)

[leonalicious]

@choumx thank you for the clarification, we have tried with a very complicated integration with serviceWorker + indexedDB solution, but yet, we cannot achieve a very well expected result mainly due to several reasons:

1. sw+ iDB can indeed make the data fetched instantly, but we still cannot solve the memorization of user behavior issue. For instance, users has selected color: red; size: small; ship to: US before clicked into Detail. So, when they have navigated from Detail back to List, although the fetching of amp-list is instant, but these user behavior cannot be automated and there is no way we can use utilize frontend cache like localStorage to store these. The only solution we stand for a chance is appending these behavior in the URL something like ?color=red&size=small.... , but this is insane ! very risky and tough to be maintained.
2. Issue which enables buyers to stop at the exact viewport they scrolled at. Since amp-list is going to send request and fetch the data every time, the hash mark ('#') which links to internal element DOM within the page will not work.

And I am agree with Ali that both List and Detail should be separated since both the page are quite heavy in the count of DOM and interactions.

@aghassemi yeah, we have heard about Portals and is very much looking forward towards it. Anyways, any targeted release date for AMP.closeWindow() feature please?

[aghassemi]

@leonalicious Working on it this sprint, given our holiday release schedule, it should make it to prod Jan 9.

[ampprojectbot]

This issue doesn't have a category which makes it harder for us to keep track of it. @aghassemi Please add an appropriate category.

[aghassemi]

@leonalicious What do you think about the following API

AMP.closeOrNavigate(url=<fallbackUrl>)

The API will:

1. Close the window if
   
   
   
   1. there is an window.opener AND
   
   
   2. there is no window.parent ( e.g. no embedded in an iframe ) AND
   
   
   3. it is a SingleDoc (e.g. no embedded in a multi-doc PWA)
   
   
2. Navigate the window otherwise

I am thinking about the case where the back button in your UI can not/should not close the window and instead needs to navigate. For example, when the detailed page is directly shown in a viewer.

/cc @dvoytenko for thoughts?

[leonalicious]

@aghassemi Good Day there, yeah, it makes sense to me, thank you for the considerations