資訊專欄INFORMATION COLUMN
摘要：學習與實踐系列文章已整理至學習手冊，文字內容已同步至。本系列文章學習與實踐會逐步拆解背后的各項技術，通過實例代碼來講解這些技術的應用方式。而隨著在中也開始支持其中的某些技術，的舞臺更大了。這個最開始是不具備任何的能力。
《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊，文字內容已同步至learning-pwa-ebook。轉載請注明作者與出處。
PWA作為今年最火熱的技術概念之一，對提升Web應用的安全、性能和體驗有著很大的意義，非常值得我們去了解與學習。
本系列文章《PWA學習與實踐》會逐步拆解PWA背后的各項技術，通過實例代碼來講解這些技術的應用方式。也正是因為PWA中技術點眾多、知識細碎，因此我在學習過程中，進行了整理，并產出了《PWA學習與實踐》系列文章，希望能帶大家全面了解PWA中的各項技術。對PWA感興趣的朋友歡迎關注。
首先簡單了解一下PWA。
1. 什么是PWAPWA，即Progressive Web App, 是提升 Web App 的體驗的一種新方法，能給用戶原生應用的體驗。
我們需要理解的是，PWA不是某一項技術，或者某一個新的產物；而是一系列Web技術與標準的集合與應用。通過應用這些新的技術與標準，可以從安全、性能和體驗三個方面，優化我們的Web App。所以，其實PWA本質上依然是一個Web App。
因此，學習PWA其實就是了解與掌握這些PWA背后的技術。本系列文章會針對PWA中所涉及到的技術進行介紹，并配合代碼實例來展示各類技術的使用方式。希望通過這一系列文章，讓大家對PWA技術有一個更深入的認識。而PWA本身漸進式的思想也可以讓我們在業務中“漸進式”地使用這些技術，在成本可控的前提下，不斷優化我們的產品。
2. PWA中的一些技術PWA本身其實是一個概念集合，它不是指某一項技術，而是通過一系列的Web技術與Web標準來優化Web App的安全、性能和體驗。其中涉及到的一些技術概念包括了：
Web App Manifest
Service Worker
Cache API 緩存
Push&Notification 推送與通知
Background Sync 后臺同步
響應式設計
……
這些技術都是你在學習PWA中不可或缺的。而隨著apple在iOS Safari中也開始支持PWA（其中的某些技術），PWA的舞臺更大了。
3. 項目DEMO為了配合PWA中相關知識的學習，我專門創建了一個demo Web App——
一個根據關鍵字查詢圖書信息的demo（https://github.com/alienzhou/...）。
這個Web App最開始是不具備任何PWA的能力。我會在這一系列文章中以這個demo為例，闡述各項技術的同時，將其應用在demo上。也就是說，在這一系列的文章中，我會和大家一起將一個普通的網頁應用逐步升級為一個簡單的PWA，通過這種方式一起學習。
首先簡單介紹一下這個demo。這是一個根據關鍵詞搜索圖書信息的應用，用戶在前端輸入關鍵詞，點擊搜索，會請求我們自己的服務器，而服務器使用豆瓣圖書API V2來獲取數據。
項目使用Koa來搭建node服務器，所以需要node版本>7.6.0，可以使用nvm來切換到適合的node版本。
要運行該項目，首先
git clone git@github.com:alienzhou/learning-pwa.git # 切換到基礎項目分支 git checkout basic
注意，需要切換到basic分支，master分支是上經過PWA升級后最新的demo代碼。只有在basic分支才能看到原始的Web App。接下來，安裝依賴：
npm install
最后，運行項目：
npm run start
然后就可以在127.0.0.1:8085上訪問到該項目。
基礎demo的代碼比較簡單，這里就不去贅述demo中的代碼細節了。簡單了解一下項目結構，前端代碼都存放于public目錄中，具體結構如下：
|---public---|---index.html // 前端頁面 | |---index.js // browser的JavaScript腳本 | |---style.css // 樣式文件 | |---img // 圖片文件夾 |---app.js // node服務啟動入口 |---util.js // node服務工具庫
值得一提的是，后續文章內的代碼會以分支的形式存在，每篇文章的最終代碼會存放于一個對應的分支中。你可以通過方便得切換分支，來查看每篇文章對應的示例代碼。
basic分支：基礎項目demo，一個普通的圖書搜索應用（網站）；
manifest分支：基于basic分支，添加manifest等功能；
sw-cache分支：基于manifest分支，添加緩存與離線功能；
master分支：應用的最新代碼。
……
作為本系列的第一篇文章，本文簡單介紹了PWA與其相關的技術概念。通過學習PWA，我們可以很快將其中的優秀技術應用到我們的工作里。在下一篇文章中，我就會介紹如何使用manifest來讓你的Web App“更Native”，擁有一個App Shell。想了解PWA更多的后續知識，關注專欄《精益前端》。
話不多說，下面就讓我們來具體地學習PWA相關技術吧！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96443.html
摘要：，不過在上會導致狀態欄不顯示任何東西。下面是項目中的相關設置圖書搜索中的處理方式與類似，中也有自己的標簽來指示相應的資源。 《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊，文字內容已同步至learning-pwa-ebook。轉載請注明作者與出處。 本文是《PWA學習與實踐》系列的第二篇文章。文中的代碼都可以在learning-pwa的manifest分支上找到...
摘要：本文是學習與實踐系列的第五篇文章。實際上，消息推送與提醒是兩個功能和。在這一篇里，我們先來學習如何使用進行消息推送。而當服務端要推送消息時，會使用私鑰對發送的數據進行數字簽名，并根據數字簽名生成一個叫請求頭。 《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊，文字內容已同步至learning-pwa-ebook。轉載請注明作者與出處。 本文是《PWA學習與實踐》系...
摘要：學習與實踐系列文章已整理至學習手冊，文字內容已同步至。本文是學習與實踐系列的第三篇文章。引言其中一個令人著迷的能力就是離線可用。但是，如果你注意到文章開頭的圖片就會發現，離線時我們不僅可以訪問，還可以使用搜索功能。 《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊，文字內容已同步至learning-pwa-ebook。轉載請注明作者與出處。 本文是《PWA學習與實...
閱讀 3937·2021-11-16 11:44
閱讀 3120·2021-11-12 10:36
閱讀 3378·2021-10-08 10:04
閱讀 1261·2021-09-03 10:29
閱讀 399·2019-08-30 13:50
閱讀 2609·2019-08-29 17:14
閱讀 1740·2019-08-29 15:32
閱讀 1085·2019-08-29 11:27
