關於漸進式 Web 應用程序你應該知道的一切
Progressive Web Apps 是一種利用現代瀏覽器功能的 Web 應用程序，可以添加到您的主屏幕，其行為就像原生應用程序一樣。
在本教程中，我們將通過實際示例和演示應用程序逐步向您展示您需要了解的有關 PWA 的所有信息。為了不從頭開始，我們將使用我們最近製作的自拍應用程序，並使其漸進式。
什麼是漸進式網頁應用
漸進式 Web 應用程序的核心與普通網站沒有任何不同——它由 HTML、CSS 和 JavaScript 組成，並且存在於瀏覽器中。將 PWA 與常規網站區分開來的是需要滿足的 10 個關鍵概念的列表。它們在這裡，直接取自 Google Developers 網站。
- 安全 - 通過 HTTPS 提供服務，以防止窺探並確保內容未被篡改。
- 漸進式 - 為每一位用戶工作，無論選擇何種瀏覽器，因為它們是以漸進增強為核心原則構建的。
- 響應式 - 適合任何外形尺寸：台式機、移動設備、平板電腦或其他任何形式。
- 獨立於連接 - 增強了服務人員以離線或在低質量網絡上工作。
- 類應用 - 讓用戶感覺像是一款具有應用風格交互和導航的應用，因為它們是基於應用外殼模型構建的。
- 新鮮 - 由於 Service Worker 更新過程，始終保持最新狀態。
- 可發現 - 由於 W3C 清單和服務工作者註冊範圍允許搜索引擎找到它們，因此可以識別為“應用程序”。
- 可重複參與 - 通過推送通知等功能輕鬆重新參與。
- 可安裝 - 允許用戶在主屏幕上“保留”他們認為最有用的應用，而無需使用應用商店。
- 可鏈接 - 通過 URL 輕鬆分享，無需複雜安裝。
遵循這些準則將確保您的應用程序不僅在瀏覽器中查看時運行良好，而且在通過主屏幕快捷方式單獨啟動時運行良好。您可能會發現 Google 選擇的措辭相當混亂，但不用擔心，我們將在後面的教程中一一解釋規則。
什麼不是漸進式 Web 應用程序
PWA 的概念不應與以下內容混淆：
- 基於 Cordova 的混合應用
- 反應原生
- NativeScript
- Electron 和 NW.js
上述所有技術都將 HTML 應用程序包裝起來，並將它們打包成可執行文件，無論是 .apk , .exe 或其他任何東西，然後必須從相應的應用商店下載並安裝在用戶的設備上。
PWA 不需要安裝，並且（目前）在 Google Play 或 iTunes App Store 中不可用。要下載 PWA，您只需訪問其網站，然後將其作為快捷方式保存到主屏幕。開發和維護單獨的 iOS 和 Android 版本不再是問題，但需要考慮瀏覽器支持。
1。安全
大多數漸進式 Web 應用程序都使用原生 API 和服務工作者，這些技術處理敏感數據並且需要謹慎處理。這就是為什麼每個 PWA 都必須通過 HTTPS 連接提供服務的原因。
如果您無權訪問具有 SSL 證書的服務器，在安全環境中運行項目的最簡單方法是通過 GitHub Pages 或類似服務。任何 GitHub 存儲庫都可以直接通過 HTTPS 託管，而且 GitHub 和 GitHub Pages 對於公共存儲庫都是免費的。
這是我們選擇舉辦演示的地方：https://tutorialzine.github.io/pwa-photobooth/。
對於本地服務器上的簡單測試，您還可以嘗試 Ngrok。它是一個微型工具，可讓您將任何當前運行的 localhost 隧道傳輸到安全的公共 URL。 Ngrok 是免費的，可用於 Windows、Mac 和 Linux。
2.漸進式
從本質上講，這意味著 PWA 應該使用得到廣泛支持的 Web 技術，並且在盡可能多的瀏覽器上運行良好。眾所周知，在 Web 開發領域，這幾乎是不可能的，但我們仍然可以做一些事情來覆蓋更大的用戶群。
例如，在我們的 PhotoBooth 應用程序中，我們使用 getUserMedia() API 來訪問設備上的硬件攝像頭。它在不同瀏覽器中的支持非常不一致 - Safari 根本不支持它，支持它的瀏覽器需要前綴並且用法不同。
為確保更多人可以實際使用我們的應用，我們涵蓋了所有前綴：
navigator.getMedia = (
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
); 如果前綴都不起作用，我們也會顯示錯誤：
if (!navigator.getMedia) {
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else {
// Use Camera API
} 應盡可能提供後備和 polyfill。同樣的原則也適用於 CSS 和 HTML 代碼。
3。響應式
無論屏幕大小如何，該應用程序在所有設備上都應該看起來不錯。我們的應用有一個相當簡單的 UI，所以我們只使用了幾個媒體查詢來控製字體大小、填充、邊距等。
不要害怕使用 CSS 庫和框架，例如 Bootstrap，因為它們可以很容易地形成網格，並處理排版和一般響應。
4.獨立於連接
這是一個重要的。即使沒有可用的互聯網連接，使用 Service Worker 也可以讓您的應用正常工作。
某些應用只能部分緩存：UI 已緩存並可離線使用，動態內容仍需要訪問服務器。
其他的，比如我們的 PhotoBooth 演示，可以全部緩存。所有源代碼和資源都將保存在本地，並且應用程序將以完全相同的方式離線和在線工作。下面是讓魔法發生的代碼：
首先我們需要製作一個 service worker JavaScript 文件，並定義其背後的邏輯。
sw.js
// Install the service worker.
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
// The cache will fail if any of these resources can't be saved.
return cache.addAll([
// Path is relative to the origin, not the app directory.
'/pwa-photobooth/',
'/pwa-photobooth/index.html',
'/pwa-photobooth/assets/css/styles.css',
'/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
'/pwa-photobooth/assets/js/script.js',
'/pwa-photobooth/assets/icons/ic-face.png',
'/pwa-photobooth/assets/icons/ic-face-large.png',
'/pwa-photobooth/manifest.json'
])
.then(function() {
console.log('Success! App is available offline!');
})
})
);
});
// Define what happens when a resource is requested.
// For our app we do a Cache-first approach.
self.addEventListener('fetch', function(event) {
event.respondWith(
// Try the cache.
caches.match(event.request)
.then(function(response) {
// Fallback to network if resource not stored in cache.
return response || fetch(event.request);
})
);
}); 然後我們需要將該 service worker 鏈接到我們的 HTML。
index.html
<script>
// Register Service Worker.
if ('serviceWorker' in navigator) {
// Path is relative to the origin, not project root.
navigator.serviceWorker.register('/pwa-photobooth/sw.js')
.then(function(reg) {
console.log('Registration succeeded. Scope is ' + reg.scope);
})
.catch(function(error) {
console.error('Registration failed with ' + error);
});
}
</script> 現在我們項目中的所有文件都將保存在用戶的瀏覽器中。任何 JavaScript 變量和對像也應盡可能保存在 localStorage 或 IndexDB 中。
5.類應用
在構建 PWA 時，建議遵循一種稱為 app-shell 架構的設計理念。這聽起來很複雜，但基本上可以歸結為：應用程序分為兩個主要組件：shell 和內容 .
shell 包含所有靜態 UI 元素，例如標題、菜單、抽屜等。當我們緩存應用程序時，應始終將 shell 保存在設備上，因為我們希望它始終可用。這樣，當沒有互聯網連接的用戶打開應用程序時，他們不會看到空白屏幕或正在運行的恐龍——他們會看到緩存的應用程序界面和相應的錯誤消息。
內容駐留在外殼中。它也可以被緩存，但沒有必要這樣做，因為內容通常是動態的，經常更改並且在每次加載頁面時都可能不同。
6。新鮮
緩存後，我們的 PWA 將始終從本地存儲加載。但是，如果我們更改 service worker sw.js 無論如何，在下一頁加載新版本將被下載並安裝。
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1.0.1').then(function(cache) {
// ...
})
);
}); 使用 Service Worker 更新，我們可以重新下載資源、刪除舊緩存或完全更改 Service Worker 邏輯。您可以從這篇 Google Developers 文章中了解有關 SW 更新流程的更多信息 - 此處。
7。可發現
通過將 Web Manifest 添加到我們的應用程序中，我們可以提供有關它的各種信息並更改它在人們設備上的顯示方式。它允許使用自定義圖標將應用程序保存到主屏幕，在單獨的瀏覽器窗口中啟動，以及許多其他很酷的東西。
Web Manifest 採用簡單 JSON 文件的形式：
manifest.json
{
"name": "Progressive Web App: PhotoBooth",
"short_name": "PhotoBooth",
"description": "Simple Progressive Web App for taking selfies.",
"icons": [{
"src": "assets/icons/ic-face.png",
"type": "image/png",
"sizes": "72x72"
}, {
"src": "assets/icons/ic-face-large.png",
"type": "image/png",
"sizes": "144x144 256x256"
}],
"start_url": "index.html",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#fff",
"orientation": "portrait"
} 大多數屬性都是不言自明的，因此我們將僅介紹更重要的屬性。要查看完整的 Web 清單格式和所有可用字段，請轉到此處。
- 短名稱 - 這是我們的應用保存到主屏幕時的名稱。
- 圖標 - 具有不同分辨率的圖標數組。
- 顯示 - 定義應用的打開方式。我們選擇了獨立 因此，當開始時，我們的照相亭將出現在一個全屏窗口中，沒有任何瀏覽器導航或菜單。在多任務處理中，它也將被視為一個單獨的應用。
要註冊清單，我們必須將其鏈接到我們的 HTML：
<!-- Web Manifest --> <link rel="manifest" href="manifest.json">
Safari 還不支持 Web Manifest 標準，但我們可以使用這個 Apple 特定的元標記來定義類似應用程序的行為：
<!-- Meta tag for app-like behaviour in iOS --> <meta name=”apple-mobile-web-app-capable” content=”yes”>
8。可重複使用
推送通知不再局限於本機應用程序。感謝服務工作者和 Push API，Web 應用程序還可以向 Android 通知欄發送消息。並非所有應用都能從擁有此功能中受益，但如果使用得當，通知確實可以幫助吸引用戶。
這個主題超出了我們教程的範圍，因為推送通知非常複雜，值得單獨上一堂完整的課程。如果您仍想在您的網絡應用中實現通知，這裡有一些可用的最佳學習資源：
- Google 開發者，推送通知：及時、相關和精確 - 在這裡。
- Google 開發者，在開放網絡上推送通知 - 此處。
- MDN，使用 Push API - 在這裡。
- Push.js，提供更簡潔的 API 來處理推送通知的庫 - 在這裡。
9.可安裝
默認情況下，任何網站都可以使用添加到主屏幕手動保存到主屏幕 Chrome 瀏覽器菜單中的按鈕。但是，讓用戶以這種方式“安裝”我們的應用程序可能相當困難，因為大多數人根本不知道該功能。
值得慶幸的是，您的應用程序可以通過簡單的安裝彈出窗口提示用戶保存它。為了防止開發人員濫用這些彈出窗口，沒有任何方法可以以編程方式顯示它們。相反，當應用滿足一系列要求時，它們會自行出現：
- 有一個有效的網絡清單。
- 安裝了有效的 Service Worker。
- 應用通過 HTTPS 提供服務。
我們已經涵蓋了以上所有內容，因此當用戶訪問我們應用的網站幾次時，他們會收到以下提示：
我們app的整個安裝過程就在這個簡單的提示中。安裝會立即進行，一旦保存，PhotoBooth 就可以從主屏幕圖標啟動，其行為與原生應用完全一樣。
10.可鏈接
任何擁有 Web 瀏覽器的人都可以訪問 PWA 應用程序，並且可以簡單地通過其 URL 共享它們。查找或安裝它們不需要第三方工具。
如果應用在獨立模式下運行，還建議添加應用內共享按鈕，因為瀏覽器地址欄和菜單不可見。
結論
我們的 PWA 現已完成。我們可以使用 Google 製作的官方工具 Lighthouse 來測試它遵循 PWA 規則的程度。它重新創建可能的場景並徹底測試應用程序。以下是它告訴我們的有關 PhotoBooth 的信息：
我們通過了！
如果你想找到更多可以玩的 PWA，請訪問 pwa.rocks。它們提供了一系列精美的遊戲和有用的工具，展示了漸進式 Web 應用程序的強大功能。
