緩存應用程序中的Shell陣營PWA與服務器端渲染

因此，可以說你有一個陣營爲基礎的移動網絡應用程序，這需要服務器端渲染初始視圖（速度+ SEO原因）的優勢。沒有「index.html」文件 - 索引文件是動態構建的服務器端，並在初始響應中返回。緩存應用程序中的Shell陣營PWA與服務器端渲染

現在讓我們說你想爲該應用添加PWA功能。連接一臺服務人員緩存資產等

一個PWA的核心租戶的是，他們提供了一個線下體驗。假設我們只想顯示一個刷新頁面，當服務人員檢測到用戶處於離線狀態時，您處於離線狀態，請單擊此處刷新。由谷歌提供

在線例子說說使用應用殼牌 - 靜態HTML文件，可以由服務人員在首次訪問緩存，並且這將是「殼」你的反應程序裏面的生活。這個shell連接到顯示「離線」視圖。

如何與服務器端渲染，不存在「空殼」 HTML文件，每條路線這項工作有可能返回不同的index.html文件？

任何演示或野外功能的例子？

來源

2017-04-26 Prefix

任何演示或在野外此功能的例子嗎？

是的！

看看https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo，在sw-precache的dynamicUrlToDepndencies option定義哪些uses其潛在的資源被用於服務器的渲染應用殼牌HTML。

的服務人員會生成需要更新應用殼牌HTML的照顧，只要任何它依賴於改變資源。

在此模型中，服務工作人員將爲所有導航請求返回相同的App Shell HTML文檔，因此它假定App Shell HTML足夠通用，然後在運行時使用與實際URL關聯的動態內容填充通過您的標準客戶端路由邏輯。

來源

2017-04-26 20:09:26

嗨，傑夫！非常感謝回覆。我已閱讀了大量代碼，很高興收到您的意見和反饋！ :)所以在我的場景中，我們有一個'PageTemplate.js'，它或多或少與我們的shell相同 - 基本上是一個運行服務器端的函數並返回一個大的初始頁面標記的模板字符串。這是我想要傳遞給'dynamicUrlToDependencies'嗎？如果這是一個愚蠢的問題，我仍然要加快PWA的道歉。在你的例子中，它似乎只會專門緩存'/ shell'路由？ – Prefix

對，如果'/ shell'的內容由內容「PageTemplate.js」唯一確定，那麼這就是'dynamicUrlToDependencies'中列出的內容。如果'PageTemplate.js'加載另一個外部資源（如'.hbs'），那麼你也可以列出它。另一部分設置是使用'navigateFallback：'/ shell'來使用緩存的'/ shell'來實現所有導航結果（不管實際的URL）。 –

嗨傑夫 - 你介意「如果[它]加載另一個外部資源」嗎？你是指構建編譯期間的加載，還是在瀏覽器中異步加載？在我的（react/redux/react-router）應用程序中，數據是從服務器上的API，生成的redux存儲，以及在將PageTemplate的內容提供給用戶之前分派到該存儲的各種操作中獲取的 - pageTemplate填充該路線初始渲染的標記。據推測，我會添加一個專門用於應用程序外殼的路線，並告訴SW預先緩存該路線的資源？ – Prefix

緩存應用程序中的Shell陣營PWA與服務器端渲染

回答

相關問題