如果2021年在網(wǎng)頁設(shè)計方面有一個趨勢，那就是單頁應(yīng)用程序(spa)的普及。水療中心數(shù)量的增加并不令人驚訝，因為水療中心是我們大多數(shù)人每天使用的最受歡迎的、引領(lǐng)潮流的網(wǎng)站。例如，F(xiàn)acebook、Gmail、Twitter和谷歌Maps都是spa。現(xiàn)在商業(yè)網(wǎng)站使用SPA框架已經(jīng)相當(dāng)普遍了。

在你跳上SPA的潮流并創(chuàng)建你的下一個網(wǎng)站之前，你可能希望從那些已經(jīng)選擇了SPA之路的人的經(jīng)驗和錯誤中學(xué)習(xí)。雖然spa有一些優(yōu)秀的特性，但它們也有一些局限性，或者至少有一些復(fù)雜性。

單頁應(yīng)用程序的優(yōu)點

spa提供非常流暢和快速的用戶體驗。他們創(chuàng)造了一個多頁網(wǎng)站的印象，但他們利用一個單一的HTML文件。spa使用JavaScript代碼與瀏覽器進(jìn)行通信，這意味著請求不會經(jīng)常發(fā)送到服務(wù)器并從服務(wù)器檢索。這種客戶端呈現(xiàn)創(chuàng)建了一個更快的網(wǎng)站和流暢的用戶體驗，很像桌面應(yīng)用程序。

spa在開發(fā)中也沒有前端和后端;這都是一回事。spa也可以離線使用，比傳統(tǒng)網(wǎng)站更快，制作和調(diào)試也相對容易。

spa的另一個優(yōu)點是，通過單一的設(shè)計，它們在任何操作系統(tǒng)和瀏覽器上都可以很好地查看和工作。

搜索引擎優(yōu)化的問題

當(dāng)前spa的一個重要問題是，它們很難在搜索引擎上優(yōu)化索引和排名。一般的SEO主管也不太可能調(diào)整和優(yōu)化必要的代碼，以確保搜索引擎機器人可以有效地抓取和索引一個SPA網(wǎng)站。除非執(zhí)行人員受過培訓(xùn)，精通SPA使用的特定JavaScript框架的使用。

單獨使用JavaScript可能會給搜索引擎機器人爬行帶來問題。從SEO的角度來看，通常不鼓勵網(wǎng)站在導(dǎo)航中使用JavaScript，因為機器人爬行、索引和呈現(xiàn)需要大量代碼。通常認(rèn)為，導(dǎo)航的最佳實踐是只使用HTML和CSS。

StackOverflow的這篇博文說明了一個開發(fā)人員在他的第一個SPA項目中遇到的一些JavaScript相關(guān)問題:

“HTML是結(jié)構(gòu)化的，計算機和機器人很容易理解，但它們不一定理解JavaScript。雖然有很多文章在討論谷歌的爬蟲在抓取一個網(wǎng)站時是否執(zhí)行JavaScript，但我的經(jīng)驗是它沒有。

spa和用戶禁用JavaScript

spa的另一個缺點是，當(dāng)用戶禁用JavaScript時，它們不能工作。根據(jù)StackOverflow上的這個帖子，大約2%的美國人在他們的主要瀏覽器上禁用了JavaScript。

編碼技術(shù)要求

最后，創(chuàng)建一個安全且功能上沒有錯誤的SPA需要大量的專業(yè)知識。使用WordPress或Shopify這樣的內(nèi)容管理系統(tǒng)創(chuàng)建一個復(fù)雜的電子商務(wù)網(wǎng)站相對容易，但使用SPA框架則非常困難。

單頁應(yīng)用和社交分享

當(dāng)用戶在社交媒體平臺上分享網(wǎng)頁時，它被分享到的網(wǎng)站將從打開的圖形或Twitter卡元細(xì)節(jié)的HTML中拉進(jìn)預(yù)覽圖像和文本片段。

當(dāng)使用CMS或標(biāo)準(zhǔn)HTML & CSS網(wǎng)站時，這個元標(biāo)記很容易產(chǎn)生。做SPA可不容易。許多人錯誤地提供了由JavaScript填充的元標(biāo)記。這種方法通常會導(dǎo)致SPA網(wǎng)站的每個頁面/視圖都有相同的預(yù)覽。

例如，用戶可能會在Facebook上分享一個討論加密貨幣利弊的博客頁面。如果Facebook不能訪問開放圖表標(biāo)簽，社交分享將顯示你的主頁預(yù)覽，這是完全無關(guān)的，不太可能產(chǎn)生很多點擊。這個問題有一個解決方案，在本教程中從tutplus概述。

緩存

如果使用SPA，允許你的網(wǎng)站緩存也會變得更加復(fù)雜。

為了使緩存按預(yù)期發(fā)揮作用，您將需要考慮一個“緩存破壞”解決方案?；蛘撸梢允褂胕f-modified-since + last-modified或if-none-match + ETag頭以及適當(dāng)?shù)木彺婵刂祁^。

如果文件是靜態(tài)的，通常建議開發(fā)人員使用If -modified，因為只要正確配置了HTTP服務(wù)器，這將自動實現(xiàn)。

也可以使用Cloudflare。但是，請注意，Cloudflare在緩存響應(yīng)之前不會執(zhí)行任何JavaScript。有關(guān)這方面的更多信息，請訪問Cloudflare網(wǎng)站。

單頁應(yīng)用程序視圖和狀態(tài)

在標(biāo)準(zhǔn)的多頁網(wǎng)站(MPW)中，用戶可以通過點擊導(dǎo)航按鈕/鏈接來瀏覽網(wǎng)站，并加載新頁面。在SPA中，用戶將單擊導(dǎo)航按鈕并加載同一HTML頁面的不同視圖或狀態(tài)。

使用SPA，應(yīng)用程序外殼永遠(yuǎn)不會重新加載。因此，例如，如果您的SPA網(wǎng)站有相同的頁眉，頁腳和工具條，整個網(wǎng)站，這將只加載一次。用戶將通過單擊導(dǎo)航按鈕重新填充主內(nèi)容或任何不同的內(nèi)容，而模板保持不變。

這多虧了AJAX。

活動跟蹤和單頁應(yīng)用程序

對于spa，頁面跟蹤可能會有問題。這是因為，從技術(shù)上講，瀏覽器只加載一個頁面。當(dāng)用戶在網(wǎng)站上導(dǎo)航到不同的頁面時，使用標(biāo)準(zhǔn)跟蹤，它會報告只有初始頁面被加載。

谷歌Analytics 4在“增強測量”下有一些內(nèi)置特性，旨在跟蹤spa中的頁面訪問量。如果啟用了這個功能，并且勾選了“基于瀏覽器歷史事件的頁面更改”旁邊的復(fù)選框，它就應(yīng)該跟蹤URL的更改——即使頁面沒有加載或重新加載。

然而，“增強的度量”的一些其他特性不能與spa正確工作，所以禁用“站點搜索”和“滾動”，以避免誤導(dǎo)性報告。

如果由于任何原因這種方法不工作，你可以使用谷歌標(biāo)簽管理器中的“歷史更改觸發(fā)器”。禁用增強的測量頁面視圖選項，然后轉(zhuǎn)到谷歌標(biāo)簽管理器à觸發(fā)器à New

從內(nèi)置觸發(fā)器的菜單中，選擇“歷史更改”，命名它，然后點擊保存。

刷新和預(yù)覽?，F(xiàn)在，每次單擊一個新頁面/視圖時，都會觸發(fā)一個歷史事件。

結(jié)論

要創(chuàng)建一個SPA網(wǎng)站，你需要掌握一個Javascript框架，比如Vue、React或Angular。使用普通的JavaScript是可能的，但它要花更多的時間。

使用帶有XML的Ajax來檢索信息并在后臺“加載”不同的網(wǎng)站頁面。

SPA網(wǎng)站的主要問題似乎與搜索引擎優(yōu)化和跟蹤有關(guān)。確保所有API都得到支持，并使用歷史API和適當(dāng)?shù)逆溄訕?biāo)記，以確保搜索引擎機器人可以抓取單獨的url。您可以使用谷歌移動友好測試開始測試您的SPA網(wǎng)站。