PWA实战：从零构建高性能渐进式应用

Mr' 郑

于 2024-07-28 10:37:12 发布

阅读量490

点赞数 3

文章标签： html5

本文链接：https://blog.csdn.net/weixin_44383927/article/details/140747663

版权

摘要

渐进式Web应用（PWA）是一种使用现代Web技术构建的应用程序，它具有原生应用程序的功能，例如离线访问、推送通知和安装到主屏幕的能力。本文将引导您从零开始构建一个高性能的PWA，并涵盖关键技术点，如Service Workers、缓存策略、离线支持和性能优化。

1. 引言

随着移动互联网的普及和发展，用户对于Web应用的期望越来越高。传统的Web应用在某些方面无法与原生应用相媲美，尤其是在离线访问和支持推送通知等方面。PWA通过利用现代浏览器的新特性解决了这些问题，使得Web应用能够提供接近原生应用的体验。

2. PWA关键技术

2.1 Service Worker

Service Worker 是一个运行在后台的脚本，它可以拦截网络请求并缓存资源，从而让Web应用能够在离线状态下正常工作。

2.2 缓存策略

为了提高加载速度和用户体验，需要定义一套有效的缓存策略来管理网络请求和缓存中的资源。

2.3 安装到主屏幕

PWA可以通过添加到主屏幕的方式让用户像使用原生应用一样使用Web应用。

2.4 推送通知

PWA可以利用Service Worker和Push API来发送推送通知。

3. 构建PWA

我们将使用HTML、CSS和JavaScript来构建一个基本的PWA。为了简化开发过程，我们将使用Webpack作为模块打包器，并使用Workbox来管理Service Worker。

3.1 创建项目结构

首先，我们需要设置项目的基本文件结构：

pwa-app/
├── src/
│   ├── index.html
│   ├── main.js
│   └── styles.css
├── public/
│   ├── index.html
│   └── service-worker.js
├── webpack.config.js
└── package.json

3.2 设置Webpack

在webpack.config.js文件中配置Webpack以打包我们的应用：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
   
  entry: './src/main.js',
  output: {
   
    filename: '[name].[contenthash].bundle.js',
    path: path.resolve(__dirname, 'public'),
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
   
      template: './src/index.html',
      filename: 'index.html',
    }),
    new GenerateSW({
   
      clientsClaim: true,
      skipWaiting: true,
      runtimeCaching: [
        {
   
          urlPattern: /^https:\/\/fonts\.googleapis\.com/,
          handler: 'StaleWhileRevalidate',
          options: {
   
            cacheName: 'google-fonts',
            cacheableResponse: {
   
              statuses: [0, 200],
            },
          },
        },
        {
   
          urlPattern: /^https:\/\/fonts\.gstatic\.com/,
          handler: 'StaleWhileRevalidate',
          options: {
   
            cacheName: 'google-fonts',
            cacheableResponse: {
   
              statuses: [0, 200],
            },
          },
        },
        {
   
          urlPattern: /^https:\/\/api\.example\.com/,
          handler: 'NetworkFirst',
          options: {
   
            cacheName: 'api-cache',
            networkTimeoutSeconds: 5,
          },
        },
      ],
    }),
  ],
};

3.3 编写主应用代码

在src/main.js中编写应用的主要逻辑：

document.addEventListener('DOMContentLoaded', () => {
   
  console.log('PWA App is running!');
});

3.4 添加Service Worker

在public/service-worker.js中设置Service Worker：

self.addEventListener('install', event => {
   
  event.waitUntil(
    caches.open('app-cache').then(cache => {
   
      return cache.addAll([
        '/',
        '/styles.css',
        '/main.bundle.js',
      ]);
    })
  );
});

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

3.5 更新`index.html`

在src/index.html中添加PWA元标签：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="manifest" href="/manifest.json">
  <link rel="icon" type="image/png" sizes="192x192" href="/icon-192x192.png">
  <title>PWA App</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <h1>Hello PWA!</h1>
  <script src="./main.bundle.js"></script>
</body>
</html>

3.6 配置manifest.json

在项目根目录下创建manifest.json文件：

{
   
  "short_name": "PWA App",
  "name": "My Progressive Web App",
  "icons": [
    {
   
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#01579b",
  "theme_color": "#ffffff"
}

3.7 添加图标

创建一个192x192像素的PNG图标，并将其命名为icon-192x192.png，放在项目的根目录下。

3.8 测试PWA

使用npm start命令启动开发服务器，并在浏览器中测试应用。确保Service Worker已注册，并且可以正确缓存资源。

4. 性能优化

为了进一步提高PWA的性能，您可以采取以下措施：

使用CDN: 加载外部资源如字体和JavaScript库时，可以使用CDN来减少延迟。
预加载关键资源: 使用<link rel="preload">标签来提前加载关键资源。
懒加载: 对于非关键资源，如图片和视频，可以使用懒加载技术。

5. 结论

通过本文的指导，您应该已经掌握了如何从零开始构建一个高性能的PWA。PWA不仅提供了更好的用户体验，还能够帮助开发者构建出接近原生应用的功能和性能。随着Web技术的不断发展，PWA将会成为移动应用开发的重要趋势之一。

附录：安装和运行指南

安装依赖项:

npm install --save-dev webpack webpack-cli html-webpack-plugin workbox-webpack-plugin

运行开发服务器:
```
npx webpack serve --mode development
```
打包生产版本:
```
npx webpack --mode production
```

以上就是构建高性能PWA的基本步骤。希望这篇文章能够帮助您更好地理解和实践PWA开发。

翻译

搜索

复制

Mr' 郑

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
PWA实战：从零构建高性能渐进式应用

渐进式Web应用（PWA）是一种使用现代Web技术构建的应用程序，它具有原生应用程序的功能，例如离线访问、推送通知和安装到主屏幕的能力。本文将引导您从零开始构建一个高性能的PWA，并涵盖关键技术点，如Service Workers、缓存策略、离线支持和性能优化。
复制链接

扫一扫