網站秒變APP，神奇的PWA入門介紹（Part 1/2）

本文翻譯自Shruti Kapoor的Progressive Web Apps 101: the What, Why and How，並進行了必定程度的二次創做，原文連接：https://www.freecodecamp.org/news/progressive-web-apps-101-the-what-why-and-how-4aa5e9065ac2/

包含文中所涉及的外部連接的譯文原文：https://github.com/azzinoths0905/news-translation/blob/patch-3/chinese/articles/progressive-web-apps-101-the-what-why-and-how.md

什麼是漸進式Web應用(PWA)？爲何咱們須要PWA？咱們應該如何搭建一個PWA應用？

你有看到過上面第一張圖的「添加到主屏幕」彈出框嗎？當你按下這個按鈕時，這個"APP"就會自動在後臺進行安裝，而後你就能夠在你手機的APP列表裏找到它。打開它時，你能夠在裏面作和以前在瀏覽器裏同樣的事，不過此次不用再打開瀏覽器了，這個APP如今直接運行在你的手機系統中。

如今你擁有的是一個從Web應用上下載下來的移動APP。在這整個過程當中，咱們徹底不須要去使用手機的應用商店。

安裝這樣一個APP居然如此簡單！不過更厲害的是，你甚至能夠在沒有網絡的時候離線瀏覽這個APP裏的內容。

這就是漸進式Web應用(PWA)。你能夠直接經過瀏覽器安裝PWA應用，它能夠像原生APP同樣在線或離線在手機上使用。

可是，對於Web應用而言，漸進式到底意味着什麼？ 讓咱們來更深刻地研究什麼是PWA，爲何我認爲它們比原生APP更好，它們又是爲何與傳統的Web應用不一樣。

什麼是漸進式Web應用(PWA)？

PWA這一律念是由Alex Russell和Frances Berriman創造的。引用Alex的話：

PWA其實就是新增了各類有用特性的網頁。

它不是什麼新的框架或技術，而是讓一個Web應用能夠像桌面或移動APP同樣的一些最佳實踐。主要目的是讓Web應用有一種更統1、更沉浸的體驗，以致於用戶沒法分辨PWA與原生APP之間的區別。

PWA經過漸進加強來提升用戶體驗。換句話說，這意味着PWA應用能夠兼容幾乎全部的設備。固然，某些功能可能不可用，但這個APP仍然能夠正常提供應有的功能。

爲何咱們須要PWA？

在講爲何咱們須要PWA以前，讓咱們先談談當今原生和Web應用所面臨的一些問題。

網速：你可能並無網速問題，這取決於你住在什麼地方，可是全球60％的人口仍在使用2G互聯網。 即便在美國，有些人仍是不得不使用撥號上網。

網頁加載速度慢：若是網頁加載太慢，你知道用戶等多少時間就會點擊「關閉」按鈕嗎？ 三秒鐘！若是網頁加載太慢，則有53％的用戶會選擇直接關掉標籤頁。

抗拒安裝新的APP：用戶不想安裝原生APP，普通用戶一個月內平均安裝的APP數量不到1個。

用戶粘性：用戶將大部分時間花在原生APP上，但移動端網頁的訪問量幾乎是原生APP的三倍。 所以，大多數用戶都不會長時間去使用移動端網頁，它們80％的時間都花在了前三名的原生APP上。

用戶粘性：移動端Web應用 VS 原生APP

用PWA有不少好處，這裏列出它最有幫助的幾項：

1. Fast（速度快）：PWA應用能夠持續提供快速的用戶體驗。 從開始下載到可使用，整個過程都很是快。因爲能夠緩存數據，即便沒有網絡也能夠再次快速啓動這個APP。
2. Integrated user experience（沉浸式的用戶體驗）：PWA應用用起來就像原生APP同樣。 它們能夠放在用戶的主屏幕上，發送推送通知，並能夠訪問設備硬件的功能，有着沉浸式的體驗。
3. Reliable experience（高可用性）: 在service worker的幫助下，即便網絡出現問題，PWA應用也能夠在用戶的屏幕上正常渲染圖片。
4. Engaging（高用戶粘性）: 因爲PWA應用能夠向用戶推送通知，因此咱們能夠喚醒用戶來真正地提升粘性。

PWA is on FIRE！

咱們應該如何搭建一個PWA應用？

Google爲漸進式Web應用發佈了 項目清單。 想讓一個Web應用成爲PWA應用，至少須要如下四個要求：

1. Web App Manifest

一個示例的manifest.json文件

這只是一個提供Web應用相關的meta信息的json文件。它有諸如APP圖標（用戶在將其安裝到設備中後會看到的圖標），APP的背景顏色，APP的名稱，簡稱等信息。咱們能夠本身編寫manifest文件，也可使用工具爲咱們生成一個manifest文件。

你能夠用Google的工具自動生成manifest文件。

2. Service Workers

Service Worker是事件驅動的服務，它們在APP的後臺運行，並充當網絡和APP之間的代理。 他們可以攔截網絡請求並在後臺爲咱們緩存信息。 這可用於加載數據以供離線使用。它們是一個JavaScript腳本，用於偵聽諸如獲取和安裝之類的事件，並執行任務。

這裏是一個serviceworker.js的示例：

self.addEventListener('fetch', event => {
    //緩存數據以供離線使用
    const {request} = event;
    const url = new URL(request.url);
    if(url.origin === location.origin) {
        event.respondWith(cacheData(request));
    } else {
        event.respondWith(networkFirst(request));
    }
});
async function cacheData(request) {
    const cachedResponse = await caches.match(request);
    return cachedResponse || fetch(request);
}

3. 圖標

這是當用戶在設備上安裝PWA應用時顯示的APP圖標， 通常的jpeg圖片就能夠了。我在上面貼出的manifest文件裏有列出多種尺寸的圖標，我以爲這在不少時候很是有用。

4. 使用HTTPS

爲了讓Web應用成爲PWA應用，必需要經過安全網絡爲它提供服務。藉助Cloudfare和LetsEncrypt之類的服務，獲取SSL證書確實很是容易。 成爲安全站點不只是最佳實踐，並且還將Web應用創建爲值得用戶信任的站點，以得到用戶的信任和依賴，並避免中間人攻擊。