漸進式 Web 應用程式 (PWA)

建立漸進式 Web 應用程式 (PWA)

在這篇文章中，我們將探索漸進式 Web 應用程式 (PWA)，這是一種建立 Web 應用程式的現代方法，可提供類似本機應用程式的體驗。我將介紹 PWA 的基礎知識、它們的優點以及從頭開始建立 PWA 的步驟。

1. 漸進式 Web 應用程式 (PWA) 簡介

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

漸進式 Web 應用程式是一種透過 Web 交付的應用程式軟體，使用常見的 Web 技術（包括 HTML、CSS 和 JavaScript）建構。 PWA 旨在在任何使用符合標準的瀏覽器的平台上工作。

PWA 的主要特點：

• 響應式：適用於任何裝置和螢幕尺寸。
• 離線功能：使用 Service Worker 離線或網路條件較差的情況下運作。
• 類似應用程式的體驗：提供類似應用程式的使用者體驗，具有主螢幕安裝等功能。
• 安全性：透過 HTTPS 提供服務，以防止窺探並確保內容完整性。
• 可重新參與：啟用推播通知以保持用戶參與。

2. PWA 的優點

為什麼要建造 PWA？

• 改進的效能：載入時間更快，互動更流暢。
• 增強的用戶參與度：推播通知和主螢幕存取。
• 降低開發成本：適用於網路和行動體驗的單一程式碼庫。
• SEO 優勢：PWA 可以被搜尋引擎發現。

3. 設定 PWA

先決條件：

• HTML、CSS 和 JavaScript 的基本知識。
• 已安裝 Node.js 和 npm/yarn。

建立一個簡單的 PWA：

1. 項目設定：
   

   mkdir my-pwa
   cd my-pwa
   npm init -y
   npm install express
   

2. 專案結構：
   

   my-pwa/
   ├── public/
   │   ├── index.html
   │   ├── styles.css
   │   └── app.js
   ├── server.js
   ├── package.json
   └── manifest.json
   

4. 建立清單文件

manifest.json:

清單檔案提供有關 PWA 的元數據，並且是在主螢幕上安裝應用程式所必需的。

// manifest.json
{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

5. 建立 HTML、CSS 和 JavaScript 文件

index.html:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
  1fc2df4564f5324148703df3b6ed50c1
  4f2fb0231f24e8aef524fc9bf9b9874f
  b2386ffb911b14667cb8f0f91ea547a7My PWA6e916e0f7d1e588d4f442bf645aedb2f
  810801fb5d57e2948359b7eef57cb689
  02ccac29734b382144275b53674934d7
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
  4a249f0d628e2318394fd9b75b4636b1Welcome to My Progressive Web App!473f0a7621bec819994bb5020d29372a
  1e1ccda7e68c35a670bf47149c0f0c612cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

styles.css:

/* styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f0f0f0;
  color: #333;
}

app.js:

// app.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('ServiceWorker registered: ', registration);
      })
      .catch(error => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}

6. 設定 Service Worker

Service Worker 是瀏覽器在背景執行的腳本，與網頁分開。它攔截網路請求並可以快取資源以提高效能和離線能力。

service-worker.js:

// service-worker.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/styles.css',
  '/app.js',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

7. 設定伺服器

server.js:

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

運作伺服器：

node server.js

8. 測試你的 PWA

1. 開啟應用程式：

   • 在瀏覽器中導覽至 http://localhost:3000。

2. 服務人員註冊：

   • 開啟開發者工具（F12 或右鍵並選擇「檢查」）。
   • 前往「應用程式」標籤。
   • 在「Service Workers」下，您應該會看到已註冊的 Service Worker。

3. 加入主畫面：

   • 在行動裝置上，在瀏覽器中開啟 PWA。
   • 您應該會看到「新增到主畫面」的提示。

9. PWA 的最佳實踐

最佳實務：

• 使用 HTTPS：PWA 需要安全的上下文。
• 最佳化圖片：使用響應式映像和延遲載入。
• 最小化網路請求：有效快取資源。
• 確保離線功能：提供有意義的離線體驗。

10. 結論

總結所涵蓋的要點：

• PWA 簡介及其好處。
• 使用清單、Service Worker 和快取設定一個簡單的 PWA。
• 建立強大的 PWA 的最佳實踐。

11. 其他資源

• PWA 文件
• 高級 PWA 主題的教學與指南。
• 社群論壇和支援。

以上是漸進式 Web 應用程式 (PWA)的詳細內容。更多資訊請關注PHP中文網其他相關文章！