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

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

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

深圳網(wǎng)站設(shè)計(jì)哪家好

華麗的婚禮網(wǎng)站設(shè)計(jì)

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

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

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

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

如果當(dāng)時(shí)，在他們的核心，一個(gè)漸進(jìn)的網(wǎng)絡(luò)應(yīng)用程序只是一個(gè)在一個(gè)聰明的方式為加載的東西額外的功能，為什么我們要一個(gè)網(wǎng)站？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用戶到達(dá)現(xiàn)場
網(wǎng)站發(fā)送回應(yīng)用程序（最小的HTML和CSS，JS，立即使一切工作），隨著…
…內(nèi)容Ajax響應(yīng)，預(yù)加載應(yīng)用程序狀態(tài)

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

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