簡體 English 中英

在 angular 5 中使用 AMP 和 Material Design Lite

[英]Use AMP with Material Design Lite in angular 5

原文 2017-11-09 09:28:40 6 1 javascript/ angular/ architecture/ material-design/ amp-html

我想創建一個帶有 angular 5 的電子商務漸進式 Web 應用程序。如何在 Google Material Design Lite 中使用帶有 angular 5 的 AMP？ 如果它不可擴展或不可行，那么其他好的選擇是什么？

1 個解決方案

我假設您已經熟悉使用 Angular Universal 的 SSR/服務器端渲染，在此之前。 由於沒有自定義JavaScript被允許在AMP。

話雖如此，讓我們談談 AMP 標准和限制，看看在 Angular 方面可能存在哪些問題。

1.根據我的經驗，網站/應用程序如何實施 AMP？

好吧，實際上每個頁面都有 2 個版本（常規版本和 AMP 版本 - 需要遵守嚴格的規則）。 假設您在my-app.com/video/1234/some-video-slug上有一個視頻頁面。 並且您想告訴 Google 您有此頁面的 AMP 版本。 您可以通過在<head>添加以下內容來實現： <link rel="amphtml" href="my-app.com/video-amp/1234/some-video-slug">其中/video-amp將是服務於 AMP 版本的路由。 接下來的所有要點都是關於 AMP 路由/頁面上發生的事情。

2.不允許有任何外部樣式

所以，沒有<link rel="stylesheet" href="path-to-some.css"> 。

只有少數 AMP 允許（例如 Font Awesome //maxcdn.bootstrapcdn.com/font-awesome/或 Material Icons/Google Fonts //font.googleapis.com ，因此僅來自特定的 cdns，絕對不在您自己的服務器上托管） .

這是什么意思？ 好吧，當在 AMP 路由上時，您需要去除 AMP 不允許的所有外部 css 引用的服務器渲染文檔，並在需要時添加那些允許的文檔 - 比如當您需要一些圖標或谷歌字體時. 使用 Angular 提供的document和renderer可以在document刪除和添加標簽（因此，這包括<head>部分）。 但是，對我來說，即使只遍歷<head>部分的子節點以刪除任何<link>標簽似乎也很慢。 而且我認為你不能在你的 Angular 應用程序之外做這件事，因為你對在什么路線上需要做的事情知之甚少。

3.那么你如何設計你的應用程序？

AMP 允許您擁有的唯一自定義 css 位於文檔中的<style>塊內。

你怎么做？ 好吧，除了為某些 css 單獨構建之外，我沒有看到任何其他解決方案，它針對 AMP 版本並且與任何 Angular/Angular CLI 工作流程無關，除了可能編譯/合並現有的 css 文件之外已經為您的組件編寫了。 並且以某種方式將生成的結果放在<head>部分內的<head> <style>塊中，僅當在 AMP 版本上時。

但請記住，這些樣式不一定是 100% 有效的 css。 您可能有/deep/或:host 。

4.您不得擁有任何自定義 JavaScript。

因此，基本上不應包含您的整個 Angular 應用程序代碼。 您必須從任何<script>標記中去除服務器呈現的 html。

5.你怎么那么JavaScript中，沒有自定義JavaScript？

例如，在移動設備上沒有滑動菜單或下拉菜單似乎很瘋狂。 嗯……你可以！ 但只能通過使用 AMP“組件”。

您必須使用<amp-sidebar>而不是<mat-sidenav>或您可能構建的任何自定義組件。 但是 - 不知何故 - 只有在 AMP 路線上，因為我喜歡 Angular Material 組件。

它是如何工作的？ <amp-sidebar> ?

好吧，當 AMP 為您提供組件時，其中包括 JavaScript。 為了使側邊欄工作，您可以包括： https://cdn.ampproject.org/v0/amp-sidebar-0.1.js : https://cdn.ampproject.org/v0/amp-sidebar-0.1.js 。 這是允許的。 您通常有很多常用/需要的組件可用： amp-carousel 、 amp-img （是的，您不能簡單地使用<img>標簽）、 amp-video 、 amp-accordion ...

6.剩下的 HTML 文檔呢？

好吧，通過簡單地通過 AMP 驗證器傳遞一個 Angular 應用程序的服務器渲染的 html，這里也有很多問題：

它在任何自定義屬性上出錯。 Angular 充滿了這些，尤其是模擬原生 ViewEncapsulation（你已經看到了所有的_ngcontent-c1和這樣的屬性）。 為了擺脫這些，我想你要么必須使用ViewEncapsulation.None ，但隨后每個組件樣式都將變為全局或從所有這些_ng...屬性中_ng...服務器呈現的 html _ng...以某種方式構建一個僅以類/ID 等為目標的 AMP css 並在您的組件中使用更多類來設置樣式，這很痛苦。
它還會在所有自定義標簽（當然不是 AMP）上出錯。 你知道 Angular 應用程序和 Material Components 是用它們構建的。 即使是第一個： <app-root> 。 而且，老實說，除了標簽選擇器和在某些情況下屬性選擇器（例如指令）之外，我不會使用其他任何東西。

目前能想到的就這些。

我想說，目前在 Angular 應用程序上實施 AMP 幾乎是不可能的。

但是，鑒於 AMP 和 Angular 都是 Google 的項目，我希望很快就會看到 Angular+AMP 方面的一些進展。 我聽說有人說 Rob Wormald 實際上在今年早些時候提到了一些關於 AMP 的事情，比如 4 月份在 Ng-Conf 上......已經2018年了。 另外，也許只是一些想法，甚至沒有路線圖……不知道！？

希望有 Angular 6！ 我是一個樂觀主義者。

就目前而言，我認為漸進式網絡應用程序應該足夠快，AMP 無法在該速度上提高太多（只要您在第一次加載時連接不壞）。 不過，我不知道你會如何排名（擁有非常好的 PWA 與實施 AMP - 當它是一個或另一個時，而不是兩者）