首页 > 其他分享 >PWA实战:从零构建高性能渐进式应用

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

时间:2024-07-28 10:56:44浏览次数:13  
标签:Web Service 渐进式 js webpack 高性能 PWA html

摘要

渐进式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将会成为移动应用开发的重要趋势之一。


附录:安装和运行指南

  1. 安装依赖项:

    npm install --save-dev webpack webpack-cli html-webpack-plugin workbox-webpack-plugin
    
  2. 运行开发服务器:

    npx webpack serve --mode development
    
  3. 打包生产版本:

    npx webpack --mode production
    

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

翻译

搜索

复制

标签:Web,Service,渐进式,js,webpack,高性能,PWA,html
From: https://blog.csdn.net/weixin_44383927/article/details/140747663

相关文章

  • Gorilla Mux:高性能的Go语言路由库
    文章目录引言官网链接原理基础使用安装示例代码高级使用子路由中间件优缺点优点缺点结论引言在Go语言(Golang)的Web开发中,路由是构建RESTfulAPI或Web应用不可或缺的一部分。GorillaMux是一个流行的路由库,以其高性能、灵活性和易用性而著称。本文将介绍GorillaMu......
  • Gin:高性能的Go语言Web框架
    文章目录引言官网链接原理基础使用安装示例代码高级使用中间件路由分组优缺点优点缺点结论引言在Go语言的Web开发领域,Gin是一个备受推崇的高性能Web框架。它以简洁的API、出色的性能和丰富的功能特性赢得了广大开发者的青睐。本文将详细介绍Gin的原理、基础使用......
  • Golang 高性能 Websocket 库 gws 使用与设计(一)
    前言大家好这里是,白泽,这期分析一下golang开源高性能websocket库gws。视频讲解请关注......
  • 高性能响应式UI部件DevExtreme v24.1.4全新发布
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NETCore或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中......
  • 使用Spring Boot和Netty打造高性能聊天服务(一):基础入门
    使用SpringBoot和Netty打造高性能聊天服务(一):基础入门在现代互联网应用中,实时聊天功能已经成为了许多应用的标配。无论是社交应用、在线客服系统,还是游戏中的实时交流,聊天功能都扮演着重要角色。今天,我们将使用SpringBoot和Netty来构建一个高性能的聊天服务。本文是系列文章的第......
  • 使用Micronaut构建高性能微服务
    使用Micronaut构建高性能微服务大家好,我是微赚淘客系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!Micronaut是一个现代化的Java框架,用于构建高性能、易于维护的微服务。它在设计时考虑了低内存消耗和快速启动时间,非常适合构建高效的微服务架构。本文将介绍如何使用Micronaut......
  • WebKit与PWA:打造无缝的渐进式Web应用体验
    WebKit与PWA:打造无缝的渐进式Web应用体验随着移动互联网的快速发展,用户对于Web应用的体验要求越来越高。ProgressiveWebApps(PWA),即渐进式Web应用,以其无需安装、易于更新、跨平台等特性,成为现代Web应用的发展趋势。WebKit作为许多流行浏览器的底层引擎,对PWA的支持至关重要......
  • Spring Boot学习|Stopwatch 在 Spring Boot 中的使用
    文章目录什么是Stopwatch?使用场景优点缺点注意事项使用步骤使用案例及结果可能面试题1.**理解与解释**2.**技术细节**3.**实际应用**4.**优缺点与替代方案**5.**面向框架的具体问题**6.**高级主题**什么是Stopwatch?Stopwatch是由ApacheCommonsLang......
  • 使用Spring Boot构建高性能企业级应用
    使用SpringBoot构建高性能企业级应用大家好,我是微赚淘客系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨如何使用SpringBoot构建高性能企业级应用,从框架配置到性能优化,全方位提升你的应用性能。一、SpringBoot概述SpringBoot是基于Spring框架的一个快速......
  • 高性能web站点
    1、组件分离1.1、DNS负载均衡不同的web内容分布到不同的服务器上,并划分子域,利用DNS将请求自然转移到不同的服务器上。主要可以分为两大内容:动态内容,CPU、IO密集型静态内容,IO密集型通过在DNS中配置多个A记录,将请求转移到集群中不同的服务器,这有助于具有地域性问题的大型......