渐进式 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：
-
项目设置：
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。
- 您应该会看到“添加到主屏幕”的提示。
9. PWA 的最佳实践
最佳实践：
- 使用 HTTPS：PWA 需要安全的上下文。
- 优化图像：使用响应式图像和延迟加载。
- 最小化网络请求：有效缓存资源。
- 确保离线功能：提供有意义的离线体验。
10. 结论
总结所涵盖的要点：
- PWA 简介及其好处。
- 使用清单、Service Worker 和缓存设置一个简单的 PWA。
- 构建强大的 PWA 的最佳实践。
11. 其他资源
- PWA 文档
- 高级 PWA 主题的教程和指南。
- 社区论坛和支持。
以上是渐进式 Web 应用程序 (PWA)的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
从C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
JavaScript在行动中：现实世界中的示例和项目
Apr 19, 2025 am 12:13 AM
JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
了解JavaScript引擎：实施详细信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：社区，图书馆和资源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
Python vs. JavaScript：开发环境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
C/C在JavaScript口译员和编译器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。
