漸進式 Web 應用程式 (PWA)-js教程-PHP中文網

漸進式 Web 應用程式 (PWA)

WBOY

發布： 2024-08-08 08:26:11

原創

1163 人瀏覽過

Progressive Web Apps (PWAs)

建立漸進式 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：

項目設定：

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

登入後複製

專案結構：

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:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My PWA</title>
  <link rel="stylesheet" href="/styles.css">
  <link rel="manifest" href="/manifest.json">
</head>
<body>
  <h1>Welcome to My Progressive Web App!</h1>
  <script src="/app.js"></script>
</body>
</html>

登入後複製

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

開啟應用程式：
- 在瀏覽器中導覽至 http://localhost:3000。
服務人員註冊：
- 開啟開發者工具（F12 或右鍵並選擇「檢查」）。
- 前往「應用程式」標籤。
- 在「Service Workers」下，您應該會看到已註冊的 Service Worker。
加入主畫面：
- 在行動裝置上，在瀏覽器中開啟 PWA。
- 您應該會看到「新增到主畫面」的提示。