渐进式 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中文网其他相关文章！