AMP for complex page

a 夏天 提交于 2019-12-25 04:58:07

问题


I have existing articles website with complex UI like commenting system and voting system. If I create Google AMP page, do I need to include all complex UI (voting,commenting system) as well? If I do not include that in Google AMP, aren't visitors only able to view the article but cannot interact with features that my website have? Aren't this too much work to re-create another amp-version of pages on-top of existing pages?


回答1:


It depends how complex your website is, but what you will probably want to do is follow GitHub's example and tuck some advanced features away on a desktop site. I think AMP pages should be stripped down to just the article content, at least until the AMP project offers a Custom Element for forms. There should be a clear "use desktop website" link/button at the top or bottom of the page so that those wishing to fully interact with the website can do so.

This enables the core content to be served to mobile users in an optimised form and at an optimal speed, and mobile users are frequently in transit so they might not mind having to wait until they're at their desktop to comment or vote on something. Then those users who are using a mobile device but still wish to comment or vote on their mobile device can still do so by switching to the desktop site.


I say this because I think GitHub has a great many potential interactions with code editing, issue/PR discussions and so on, and that might be overkill to load up on a mobile device considering not that many people are going to use those things on a mobile device. They're going to read posts and code but not necessarily interact at that very moment.

I also say this because I've been developing a message board/forum using only AMP-HTML (and Perl on the back-end) to test what's actually feasible using iframes for forms using amp-iframe.

The good news is that it can be done, it does work. I've been able use iframes for posting new threads and replies and so on. The bad news is the implementation...

The plan I came up with was to load form and input elements via iFrame, passing down essential parameters like post number and author ID via query string in the iFrame's src URL, which would be created programmatically using a templating language. This is already ugly.

Then, I use JavaScript within the iFrame to grab the parameters from the query string and add them to input elements (type="hidden", along with the name attribute and the action URL to which the form is being posted).

Then I set target="_top" on the form so it reloads the whole page upon submission. In order for all of these things to work, you need the following attributes on your AMP-IFRAME element: allow-scripts allow-forms allow-top-navigation.

The thought had occurred to me to use AJAX but it became even messier down that road due to some kind of CORS issue that I honestly couldn't be bothered to fix. The thought also occurred to me that I'm probably going about it all wrong and there's probably some super simple way of doing it.

This technique allows me to create usable forms while still passing AMP validation. The question is: is it really worth it? You could obviously use any server-side tech you want, but it would probably differ greatly from the implementation of your current desktop website and it might take a fair bit of time to develop, test and harden in terms of security.

I personally think it's not worth the additional time. I believe the AMP project will eventually include an amp-form Custom Element when they have developed sufficient means to restrict their use.



来源:https://stackoverflow.com/questions/37106212/amp-for-complex-page

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!