Rendertron 是由 Google Chrome 團隊開發的專案,
可以用來解決任何 bot (網路爬蟲) 無法讀取到 PWA 網頁需要額外 render 或者需要透過 javascript 執行產出的內容。
(例如,這類網站分享貼文到 facebook/Twitter 時,會遇到無法被 bot 正確取得內容的問題)
Rendertron以獨立的HTTP Server方式運作,並且是以 Headless Chrome 的方式來 render 請求的頁面
他會透過 auto-detecting 自動檢測加載函式,從頁面的載入(onload)相關的事件來監控內容何時會載入完成,
確保你的PWA網頁內容都能順利載入,並且有足夠的時間(10s)可以呈現之後,才會回應給請求來源。
使用 Rendertron 時,要在App當中設定 Rendertron middleware 來監控 proxy 請求。
並且,這樣的設定可以兼容於 client side 的技術,包含 web components.
Middleware
底下列出的是可以使用 Rendertron service 的服務
- Express.js middleware
- Firebase functions (Community maintained)
- ASP.net core middleware (Community maintained)
API
Rendertron 提供了Render 與 Screenshot API
Render API - 可以render你的頁面,並且進行相關處理
/render/<url>
Screenshot API - 可以用來輸出畫面的方式來驗證你的頁面是否有render正確
/screenshot/<url>
預算有限度
Rendertron 等待的內容載入的時間限定在 10 秒,如果在 10 秒內沒有將內容載入完畢,就會終止等待,將內容返回給請求來源。
rendering flag
Rendertron 預設會以頁面載入相關的事件為依據,等待載入事件執行完畢後,就會回覆請求。
但是,對於一些以非同步載入的內容,可能就會遺漏掉。
對此,Rendertron提出了一個 rendering flag 解決方法,讓你可以明確的讓 Rendertron 真正的完成時間點。
做法如下:
首先在初始化時,要先設定一個 windows.renderCompolete flag 為 false
window.renderComplete = false;
當你確定內容都加載完畢,再將 flag 設定為 true,讓 Rendertron 知道可以返回請求
window.renderComplete = true;
回覆HTTP狀態
可以透過下方作法,來回覆目前內容的HTTP狀態
<meta name="render:status_code" content="404" />
安裝及發佈方式
可直接參考官方操作流程