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

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

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

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

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

spa的另一個(gè)優(yōu)點(diǎn)是，通過(guò)單一的設(shè)計(jì)，它們?cè)谌魏尾僮飨到y(tǒng)和瀏覽器上都可以很好地查看和工作。

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

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

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

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

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

spa和用戶禁用JavaScript

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

編碼技術(shù)要求

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

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

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

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

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

緩存

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

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

如果文件是靜態(tài)的，通常建議開發(fā)人員使用If -modified，因?yàn)橹灰_配置了HTTP服務(wù)器，這將自動(dòng)實(shí)現(xiàn)。

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

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

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

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

這多虧了AJAX。

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

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

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

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

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

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

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

結(jié)論

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

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

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