您是否知道使用 HTML、CSS、JavaScript 或任何前端框架建立的 Web 應用程式可以安裝並離線工作，從而提供增強的使用者體驗？
本文將向初學者以及任何希望提高前端開發技能的人介紹漸進式 Web 應用程式。在本文中，您將學到；
先修條件：要充分理解本文，需要具備 HTML 和 CSS 的基本知識。
什麼是漸進式 Web 應用程式？
漸進式 Web 應用程式 (PWA) 是一種 Web 應用程式，它結合了傳統網站和本機行動應用程式的最佳功能。 PWA 旨在快速、可靠且引人入勝，在網路上提供類似本機應用程式的體驗。
為什麼選擇漸進式網頁應用程式？
PWA 的好處包括但不限於：
-
改進的效能： PWA 載入速度更快、效能更好，這可以增強使用者體驗和參與度。
-
離線功能：借助 Service Worker，PWA 可以快取網頁內容並在離線或低網路條件下運作。
-
提高參與度：推播通知和主螢幕安裝，無需前往應用程式商店，提高用戶參與度和體驗。
-
SEO 友善： PWA 可以被搜尋引擎發現，從而提高可見度和覆蓋範圍。
-
安全性：它們透過 HTTPS 提供服務，以防止窺探並確保內容未被竄改。
漸進式 Web 應用程式範例
許多大公司，例如YouTube 、 Facebook ，甚至Dev.to都使他們的網路應用程式變得漸進式（可安裝）。如果從行動瀏覽器查看，請按一下右上角的三個點，然後按一下「安裝或新增至主畫面」。在桌面上，點擊瀏覽器右上角的安裝圖標，如下圖所示。
如何讓您的 Web 應用程式可安裝
無論您是使用純 HTML、React、Vue 或任何前端框架進行建置，使漸進式 Web 應用程式可安裝的步驟都是相同的。
本 PWA 教學將引導您完成這些步驟。
第 1 步：設定您的專案。
超文本標記語言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>PWA tutorial</title>
</head>
<body>
<section class="main">
<h1>Recipe App</h1>
<p>The best culinary treats</p>
<button>Explore</button>
</section>
</body>
</html>CSS
body{
background-color: aliceblue;
}
.main{
margin: 0 auto;
background-color: cadetblue;
text-align: center;
padding: 3rem;
}
h1{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: #fff;
font-size: 3rem;
}
button{
padding: 1rem 2rem;
color: darkcyan;
border:#fff;
background-color: #fff;
}
p{
color: #fff;
font-size: 1.6rem
}
輸出
第 2 步：建立「Manifest.json」檔案。此步驟使應用程式可安裝。以下詳細資訊將製作您的應用程式的啟動畫面。
{
"name": "Recipe Application",
"short_name": "My Recipes",
"description": "A recipe application for creating awesome recipes",
"start_url": "/",
"theme_color": "#000000",
"background_color": "#ffffff",
"display": "standalone",
"icons": [
{ "src": "./icon.png",
"sizes": "192x192",
"type": "image/png"
}]
}步驟 3 - 將此清單檔案連結到您的 HTML。
<link rel="manifest" href="manifest.json"/> 瞧！您的應用程式可以安裝
啟動畫面
這是存取應用程式時顯示的第一個畫面。
在漸進式 Web 應用程式中實現離線功能
漸進式 Web 應用程式中的離線功能可增強使用者體驗。它確保用戶無論有沒有網路連線都可以享受該應用程式。這可以透過服務工作者、後台同步、快取等實現。
當網路連線不可用時，服務工作人員 (SW)攔截網路請求並從快取中提供回應。
在讓 PWA 離線時，您可以手動對 Service Worker 進行編碼或使用 Workbox、 PWA Builder Online 、PWA Studio 等工具。
對於本教程，Google 擁有的Workbox是首選庫，因為它提供了全面的功能，例如預先緩存、後台同步、推播通知、易用性等。
如何整合 Workbox 以實現離線功能
第 1 步：在命令列上安裝 Workbox
使用“npx”可確保始終安裝最新版本。如果您使用 React.js 進行建置，請在此步驟之前執行「npm run build」以產生建置資料夾（包含準備部署的靜態檔案）。
npx 工作箱精靈
步驟 2：回答 Workbox 精靈中的問題提示，如下圖所示。
對於 React.js 專案，建置資料夾應作為應用程式的根目錄。
步驟 3：產生 Service Worker 文件
npx workboxgenerateSWworkbox-config.js
步驟 4：將此腳本程式碼貼到您的 index.js 檔案中以註冊軟體。確保它連結到您的 HTML 文件。
if('serviceWorker' in navigator){
window.addEventListener('load', () =>{
navigator.serviceWorker.register('/sw.js')
})
}第 5 步：部署
Service Worker 需要 https:// 以確保安全。將專案部署到Netlify或Vercel 。在瀏覽器上查看 Web 應用程式。
如何分析 Web 應用程式效能、可存取性和 SEO
Chrome Lighthouse是進行此分析的強大工具。分析 Web 效能、可存取性和 SEO 對於建立提供卓越用戶體驗的高品質 Web 應用程式至關重要。
要執行此分析：
-
右鍵點選您的網頁，開啟 Chrome 開發工具。
-
按一下“檢查”，然後導覽至“Lighthouse”選項卡
-
在選項卡上根據偏好點擊行動裝置或桌面設備
-
產生報告
- 檢查燈塔分數
PWA 效能優化的最佳實踐
-
預先載入可能會減慢 PWA 載入過程的 URL 和字型。
-
實施延遲加載以推遲映像等資源的加載，直到需要它們為止。
-
確保乾淨的程式碼架構
-
刪除不需要的程式碼和空格以提高 PWA 的整體效能。
總之，
PWA 是提供類似本機應用程式體驗的網路應用程式。從離線功能到安裝提示。從後台同步到推播通知，這個清單是無窮無盡的。
建立漸進式 Web 應用程式是一項有趣但具有挑戰性的壯舉，但透過不斷的實踐和對細節的關注，尚未實現最佳的用戶滿意度。
感謝您的閱讀。按讚並關注更多網頁開發和技術相關文章。請我喝杯咖啡來支持我的工作
原文出處：https://dev.to/udoka033/progressive-web-apps-pwa-a-comprehensive-guide-57ii
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式