進步的網(wǎng)絡(luò)應(yīng)用程序意味著你的網(wǎng)站和搜索引擎優(yōu)化

2014-12-24    分類: 搜索引擎優(yōu)化

引進進步的網(wǎng)絡(luò)應(yīng)用程序:他們可能意味著你的網(wǎng)站和搜索引擎優(yōu)化

進步的Web應(yīng)用程序是下一個大的東西,當它涉及到提供一個爆炸性的移動體驗。但是究竟是什么使一個PWA?你應(yīng)該有一個嗎?如果你創(chuàng)造了一個,你會如何確定它的排名?

他們可以不必要的應(yīng)用程序開發(fā)。你的移動網(wǎng)站成為你的應(yīng)用。我的一些同事在builtvisible來說,這似乎有點有趣的討論:做品牌需要一個應(yīng)用程序和網(wǎng)站,或一個PWA?
充實了這一點,這意味著我們希望像推送通知,后臺同步,網(wǎng)站/應(yīng)用程序脫機工作,有覺得自己像一個本地應(yīng)用一定看/設(shè)計,能夠?qū)υO(shè)備進行設(shè)置主屏幕。
這些都是我們傳統(tǒng)上沒有在網(wǎng)絡(luò)上提供給我們的東西。但由于新的瀏覽器支持更多的HTML5規(guī)范和先進的JavaScript,我們可以開始創(chuàng)建一些這樣的功能。在整體上,進步的網(wǎng)絡(luò)應(yīng)用程序是:

進步的網(wǎng)絡(luò)應(yīng)用程序意味著你的網(wǎng)站和搜索引擎優(yōu)化

四川做網(wǎng)站公司

進步為每一個用戶工作,無論瀏覽器的選擇,因為他們是建立以漸進式增強為核心的宗旨。
反應(yīng)敏捷的
適合任何形式的因素:桌面,移動,平板電腦,或什么是下一步。
連接獨立
加強與服務(wù)工人的工作離線或低質(zhì)量的網(wǎng)絡(luò)。
像APP
感覺像一個應(yīng)用程序到用戶與應(yīng)用程序風格的相互作用和導航,因為他們是建立在應(yīng)用程序外殼模型。
新鮮的
總是最新的感謝服務(wù)工人的更新過程。
保險柜
服務(wù)通過HTTPS來防止窺探,確保內(nèi)容沒有被篡改。
發(fā)現(xiàn)
被識別為“應(yīng)用程序”由于W3C的體現(xiàn)和服務(wù)人員登記范圍,讓搜索引擎找到他們。
重新接合
通過像推通知這樣的功能重新進行重新接觸。
安裝
讓用戶“保持”的應(yīng)用程序,他們發(fā)現(xiàn)最有用的在他們的主頁屏幕上沒有麻煩的一個應(yīng)用程序商店。
鏈接
通過網(wǎng)址輕松共享,不需要復雜的安裝。
來源:你的第一個進步的網(wǎng)絡(luò)應(yīng)用程序(谷歌)

值得我們花點時間來打開“應(yīng)用程序”的一部分。從根本上說,有一個PWA兩部分:服務(wù)人員(我們會在一分鐘內(nèi)),和應(yīng)用程序體系結(jié)構(gòu)。谷歌將此定義為:
…最小的HTML,CSS和JavaScript驅(qū)動的用戶界面。應(yīng)用程序外殼應(yīng):
負荷快速
被緩存
動態(tài)顯示內(nèi)容

進步的網(wǎng)絡(luò)應(yīng)用程序意味著你的網(wǎng)站和搜索引擎優(yōu)化

一個應(yīng)用程序外殼是可靠的良好性能的秘密。想想你的應(yīng)用程序的外殼像捆綁的代碼,你會發(fā)布到一個應(yīng)用程序存儲,如果你正在建立一個本地應(yīng)用程序。它的負載需要離開地面,但可能不是整個故事。它保持您的用戶界面本地和通過一個接口動態(tài)地拉動內(nèi)容。
即時加載Web應(yīng)用程序的應(yīng)用程序外殼架構(gòu)

加載內(nèi)容的這種方法允許令人難以置信的快速感知的速度。我們能夠得到的東西,看起來像我們的網(wǎng)站在用戶面前幾乎瞬間,只是沒有任何內(nèi)容。然后該頁面將去獲取內(nèi)容和所有的好。顯然,如果我們真的在現(xiàn)實世界中這樣做的事情,我們會很快地運行到搜索引擎優(yōu)化問題,但我們也會解決這一問題。

如果當時,在他們的核心,一個漸進的網(wǎng)絡(luò)應(yīng)用程序只是一個在一個聰明的方式為加載的東西額外的功能,為什么我們要一個網(wǎng)站?

使用案例
讓我在我進入這是明確的:對于大多數(shù)人來說,一個PWA是你不需要的東西。這是很重要的,它不停的重復,所以我再重復一遍:
你可能不需要一個PWA。

這的原因是,大多數(shù)網(wǎng)站不需要能夠表現(xiàn)得像一個應(yīng)用程序。這并不是說沒有好處,PWA功能所能帶來的東西,但在不少地方,效益不大于它需要實現(xiàn)的功能在此刻的時間。
當你看著一個PWA的呢?好吧,讓我們看看一個清單的東西,可能表明你確實需要一個…
標志一個PWA可能是適當?shù)?/p>

進步的網(wǎng)絡(luò)應(yīng)用程序意味著你的網(wǎng)站和搜索引擎優(yōu)化

你有:
定期更新的內(nèi)容,如股票行情,迅速變化的價格和庫存水平,或其他實時數(shù)據(jù)
一個聊天或通訊平臺,實時的更新和推送通知的新項目來
一個觀眾可能會拉數(shù)據(jù),然后離線瀏覽,比如一個新聞應(yīng)用程序或一個博客每天發(fā)布許多文章

一個定期更新的內(nèi)容的網(wǎng)站,用戶可以檢查在一天幾次
大多是使用支持的瀏覽器的用戶
總之,你有東西超出了一個正常的網(wǎng)站,與互動或時間敏感的組件,或迅速發(fā)布或更新的內(nèi)容。一個很好的例子就是谷歌天氣PWA:

他們是如何工作的
所以,你有一些東西會從這種功能中受益,但需要知道這些事情是如何工作的。歡迎來到奇跡是服務(wù)工人。

服務(wù)人員可以被認為是一個代理,坐在你的網(wǎng)站和瀏覽器之間。它要求截取你要瀏覽器來做的事情,并劫持返回的回應(yīng)。這意味著我們可以做的事情,例如,保持一個請求的數(shù)據(jù)副本,所以當它的要求再次,我們可以直接服務(wù)于它(這被稱為緩存)。這意味著我們可以獲取數(shù)據(jù)一次,然后重播它一千次,而不必再去獲取它。它像一個音樂家,錄制一張專輯-這意味著他們不必每次你想聽他們的音樂播放一場音樂會。同樣的事情,但與網(wǎng)絡(luò)數(shù)據(jù)。

如果你想讓服務(wù)人員更深入的解釋,看看Jake Archibald從谷歌給出適度的技術(shù)討論。
服務(wù)人員可以做什么
服務(wù)人員從根本上存在提供額外的功能,這是沒有提供給瀏覽器,直到現(xiàn)在。這些包括類似的東西:

推通知,用于告訴用戶發(fā)生了什么事情,如收到一個新消息,或者他們正在查看的頁面已被更新
背景同步,用于更新數(shù)據(jù),而用戶不使用該頁面/站點
離線緩存,允許一個用戶在離線狀態(tài)下仍然可以訪問某個站點的一些功能的經(jīng)驗
處理地理位置或其他硬件設(shè)備的查詢數(shù)據(jù)(如設(shè)備gyrpscope數(shù)據(jù))
預(yù)取數(shù)據(jù)一個用戶將很快需要,如圖像進一步下一頁
它的計劃,在未來,他們將能夠做的比他們目前所能做的更多。然而,現(xiàn)在,這些是各種功能,你將能夠利用。顯然,這些大多是通過Ajax加載數(shù)據(jù),一旦應(yīng)用程序已經(jīng)加載。

進步的網(wǎng)絡(luò)應(yīng)用程序意味著你的網(wǎng)站和搜索引擎優(yōu)化
什么是搜索引擎優(yōu)化的影響?
所以你在網(wǎng)上銷售的應(yīng)用程序。但如果你創(chuàng)造了一個,你會如何確定它的排名?和任何新的前端技術(shù)一樣,總是會影響你的搜索引擎的知名度。但不要驚慌;你會與一個PWA遇到潛在的問題得到解決之前曾對JavaScript網(wǎng)站SEO。一個引物,以本文對JS SEO一看。
有幾個問題,你可能會遇到,如果你要有一個網(wǎng)站,使使用應(yīng)用程序的外殼架構(gòu)。首先,這是非常必要的,你要使用某種形式的js框架或視角下的圖書館,像角或反應(yīng)。如果是這樣的話,你會想看一看一些angular.js或反應(yīng)SEO建議。如果你使用的是其他的東西,短版本是你需要在服務(wù)器上的預(yù)渲染網(wǎng)頁,然后拿起你的應(yīng)用程序時,它的加載。這使你有所有的好東西,這些工具給你,同時也為谷歌等服務(wù)的東西可以理解。盡管他們最近的建議,他們在渲染這種應(yīng)用越來越好,我們?nèi)匀豢梢钥吹胶芏嗟睦?,在野外它們揮舞著可怕的當他們爬重JS的東西。

假設(shè)你在聰明的JS前端技術(shù)的世界,讓你做事情的PWA的方式,您還需要提供所需的網(wǎng)頁工作隨著HTML CSS和JS。不只是包括腳本標簽<代碼> src屬性,但整個文件,內(nèi)聯(lián)。
很明顯,這意味著你要增加你發(fā)送的頁面的大小,但它有一大好處,即網(wǎng)頁將立即加載。更重要的是,雖然所有的JS(需要拾?。┖虲SS(要求作出的設(shè)計感)立即交貨,瀏覽器將能夠使你的內(nèi)容和提供的東西,看起來是正確的,通俗易懂。

再次,當我們要使用服務(wù)人員緩存內(nèi)容一旦它的到來,這不應(yīng)該有太多的影響。我們也可以緩存所有的css和js外部文件需要單獨和負載從緩存存儲而不是取他們的每一次。這也使它很可能略多,PWA在用戶試圖請求你的網(wǎng)站第一次失敗了,但你仍然可以優(yōu)雅地處理這種情況的錯誤信息或默認的內(nèi)容,并重新嘗試在下一頁查看。

還有其他潛在的問題,人們可以運行在,以及。華盛頓郵報,例如,建立一個自己的網(wǎng)站的版本,但它只適用于移動設(shè)備。顯然,這意味著該網(wǎng)站可以爬好的谷歌的移動機器人,但不是桌面的。重要的是要尊重的P部分的縮寫-網(wǎng)站應(yīng)該啟用用戶可以使用的功能,但仍然正常工作的人使用的瀏覽器,不支持他們的工作。它是關(guān)于加強功能,而不是要求人們升級他們的瀏覽器。

與所有這一切的唯一一個稍微復雜的事情是,它需要,經(jīng)驗,你設(shè)計你的應(yīng)用程序離線的第一次經(jīng)驗。這是如何做的是在衛(wèi)國明的演講中引用。唯一的問題是,沿著這條路線:你只服務(wù)內(nèi)容一旦有人到達你的網(wǎng)站,等了足夠長的時間來加載一切。顯然,在谷歌的情況下,這是不好的工作。所以這是我建議的…

而不是僅僅發(fā)送您的應(yīng)用程序,然后使用Ajax請求的內(nèi)容加載,然后拿起,使用此工作流代替:

進步的網(wǎng)絡(luò)應(yīng)用程序意味著你的網(wǎng)站和搜索引擎優(yōu)化
用戶到達現(xiàn)場
網(wǎng)站發(fā)送回應(yīng)用程序(最小的HTML和CSS,JS,立即使一切工作),隨著…
…內(nèi)容Ajax響應(yīng),預(yù)加載應(yīng)用程序狀態(tài)

應(yīng)用程序立即加載,然后拿起前端。
添加所需的數(shù)據(jù)意味著,在負荷,我們不可能使一個Ajax調(diào)用獲得初始數(shù)據(jù)要求。相反,我們可以捆綁,在太,所以我們得到的東西,可以立即渲染內(nèi)容以及。

作為一個例子,讓我們想想一個天氣應(yīng)用?,F(xiàn)在,基本的模式將是,我們發(fā)送用戶的所有內(nèi)容顯示我們的應(yīng)用程序的基本版本,但不是數(shù)據(jù)說什么天氣是。在這個修改后的版本,我們也將在今天的天氣是什么樣的,但任何后續(xù)的數(shù)據(jù)請求,然后我們?nèi)ヒ粋€Ajax調(diào)用服務(wù)器。
這意味著我們還提供內(nèi)容,谷歌等指標,沒有從我們的AJAX可能問題調(diào)用失敗。從谷歌和用戶的角度來看,我們只是提供了一個非常高性能的初始負載,然后注冊服務(wù)人員提供更快的經(jīng)驗,為每一個后續(xù)頁面,并可能額外的功能。

進步的網(wǎng)絡(luò)應(yīng)用程序意味著你的網(wǎng)站和搜索引擎優(yōu)化

網(wǎng)站欄目:進步的網(wǎng)絡(luò)應(yīng)用程序意味著你的網(wǎng)站和搜索引擎優(yōu)化
瀏覽路徑:http://muchs.cn/news20/20420.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站營銷、搜索引擎優(yōu)化

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)