释放 PWA 的力量:2024 年的现代Web应用|React + TypeScript 示例

在2024年的Web开发领域,PWA(Progressive Web Apps)已经成为一个不可忽视的技术趋势。这篇文章将探讨PWA的最新发展,并通过实例展示如何构建一个现代PWA应用。

PWA的本质与优势

PWA本质上是一种将Web应用提升到接近原生应用体验的技术方案。它通过Service Workers、Web Manifest等技术,实现了离线运行、消息推送等传统Web应用难以实现的功能。

核心特性

  1. 离线可用:即使在网络不佳时也能正常工作

  2. 接近原生体验:采用App Shell模型

  3. 自动更新:无需用户手动操作

  4. 推送通知:支持系统级消息推送

2024年为什么还需要PWA?

数据显示,PWA在移动设备上的平均加载时间仅为2.75秒,这种优秀的性能表现使其成为现代Web应用的重要选择。

浏览器应用程序接口、开发工具和性能优化方面的进步巩固了 PWA 的地位,使其成为提供高质量的用户体验的可行解决方案。

8aad775759572a235bed488d1955fef4.png

成功案例分析

Twitter Lite

Twitter Lite 是比较成功 PWA 案例之一。Twitter Lite 于 2017 年推出,旨在提供更快、更可靠的移动网络体验。

  • 数据消耗减少70%

  • 加载速度显著提升

  • 全球数百万用户的主要访问方式

Pinterest
  • 核心指标提升60%

  • 停留时间增加40%

  • 广告收入显著增长

星巴克 🐟

星巴克开发了一个 PWA,为顾客提供无缝体验,无论他们是在线还是离线。星巴克 PWA 允许用户在没有互联网连接的情况下浏览菜单、定制订单并将商品添加到购物车。

一旦连接恢复,应用程序就会同步并下订单。这种方法使每日活跃用户数量增加了两倍,提高了客户满意度和留存率。

Uber 🌝

Uber PWA 的设计初衷是尽可能加快乘车预订体验,即使在网络速度较慢的情况下也是如此。

为了缩短加载时间,对应用程序的核心功能进行了精简,提供了一个在 2G 网络上可在 3 秒内加载的精简界面。

动手实践:构建PWA应用

1. 项目初始化

8c6687f1520fd2fc6318d417b32ad1f9.png

2. 添加 Service Worker

在src目录中创建 service-worker.ts 文件:

0b67b6c065b6f7ca800071ddef79044d.png

3. 注册 Service Worker

afd07c28b02c944478a0423186b37abe.png

4. 创建 Web Manifest配置

在 public 目录中添加manifest.json

3e8860a21299560dd38254692563de80.png

5. 启用 HTTPS

确保开发服务器使用 HTTPS,以允许 Service Worker在本地运行。可以使用mkcert等工具生成本地证书。

6. 测试和部署

使用集成到 Chrome DevTools 中的工具 Lighthouse 测试 PWA,该工具可提供有关 PWA 性能的见解和改进建议。

部署时,请确保应用程序通过 HTTPS 提供,并且所有必要的资产都已正确缓存并可访问。

2024年PWA新特性

1. 高级API支持

  • 文件系统访问: 支持直接读写文件

  • 定期后台同步: 保持数据实时性

  • WebOTP: 简化验证码流程

  • WebNFC: 支持NFC标签读写

  • Badge API: 实现应用图标角标

2. 性能优化

示例:使用Workbox优化缓存策略

import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst } from 'workbox-strategies';// 静态资源使用Cache First策略
registerRoute(({request}) => request.destination === 'image',new CacheFirst()
);// API请求使用Network First策略
registerRoute(({url}) => url.pathname.startsWith('/api'),new NetworkFirst()
);

3. 开发工具改进

  • Lighthouse自动化测试

  • 更完善的调试工具

  • 框架级PWA支持

实战建议

  1. 性能优化

  • 使用Service Worker预缓存关键资源

  • 实现App Shell架构

  • 优化首屏加载速度

离线策略

// 示例:离线消息队列
class OfflineQueue {async add(message: any) {const db = await openDB('offlineQueue');await db.add('messages', message);}async sync() {// 联网时同步数据}
}

安全考虑

  • 必须使用HTTPS

  • 实现适当的缓存策略

  • 注意数据安全存储

PWA技术在2024年已经相当成熟,选择PWA作为技术方案可以同时获得Web应用的便利性和原生应用的优秀体验。合理运用PWA技术,能够为用户带来更好的应用体验。

最后:

React Hook 深入浅出

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/14560.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

el-form el-table 前端排序+校验+行编辑

一、页面 <template><div class"bg" v-if"formData.mouldData?.length 0">当前暂无模板&#xff0c;点击<view class"add" click"addMould">立即创建</view></div><div v-else><el-col :x…

ERA5下载数据-U850

ERA5更新后&#xff1a; 1. 升级新的cdsapirc Catalogue — 气候数据存储 --- Catalogue — Climate Data Store (copernicus.eu) ERA5下载数据页面&#xff0c;选择&#xff08;不是这个…………&#xff09; 是这个&#xff1a; ERA5 hourly data on pressure levels from…

分享 pdf 转 word 的免费平台

背景 找了很多 pdf 转 word 的平台都骗进去要会员&#xff0c;终于找到一个真正免费的&#xff0c;遂分享。 网址 PDF转Word转换器 - 100%免费市面上最优质的PDF转Word转换器 - 免费且易于使用。无附加水印 - 快速将PDF转成Word。https://smallpdf.com/cn/pdf-to-word

【Java入门 - 分支结构】第2关:if语句测试题

Java 中的 if 语句&#xff1a;灵活控制程序流程的利器 在 Java 编程中&#xff0c;if语句是一种基本但极其重要的控制结构&#xff0c;它允许我们根据特定的条件来决定程序的执行路径。本文将深入探讨 Java 中的if语句&#xff0c;介绍其语法、用法和一些常见的应用场景。 一…

iOS 18.1,未公开的新功能

童锦程祖师爷曾说过&#xff1a;“发誓可以&#xff0c;发朋友圈不行。”表面上看是渣男语录&#xff0c;实际上也说明了人们对隐私的看重。 在当今生活中&#xff0c;智能手机可能是最私密的电子产品&#xff0c;没有之一。不管是照片、联系人、短信、APP数据&#xff0c;甚至…

06.VSCODE:备战大项目,CMake专项配置

娇小灵活的简捷配置不过是年轻人谈情说爱的玩具&#xff0c;帝国大厦的构建&#xff0c;终归要交给CMake去母仪天下。一个没有使用 CMake 的 C 项目&#xff0c;就像未来世界里的一台相声表演&#xff0c;有了德纲却无谦&#xff0c;观众笑着遗憾。—— 语出《双城记》作者&…

基于 CentOS7.6 的 Docker 下载常用的容器(MySQLRedisMongoDB),解决拉取容器镜像失败问题

安装MySQL&Redis&MongoDB mysql选择是8版本&#xff0c;redis是选择4版本、mongoDB选择最新版&#xff0c;也可以根据自己的需要进行下载对应的版本&#xff0c;无非就是容器名:版本号 这样去拉去相关的容器镜像。如果你还不会在服务器中安装 docker&#xff0c;可以查…

Sping全面复习

Spring框架是一个功能强大且广泛使用的Java平台&#xff0c;它通过提供全面的基础设施支持&#xff0c;使得开发人员能够轻松构建高效、可移植、易于测试的代码。Spring的核心特性包括依赖注入&#xff08;DI&#xff09;、面向切面编程&#xff08;AOP&#xff09;和事件驱动模…

【Linux学习】【Ubuntu入门】1-3 ubuntu连接USB设备

1.打开VMware&#xff0c;打开新建的虚拟机&#xff0c;插入U盘&#xff0c;可在弹出对话框进行选择USB连接到主机或连接到虚拟机。&#xff08;长时间未操作默认连接主机&#xff09; 2.若USB在连接主机的情况下&#xff0c;可通过右键点击右下角进行连接到虚拟机。 3.若已连接…

炼码LintCode--数据库--基础语法--刷题笔记_01

目录 炼码LintCode数据库入门级别的笔记未完待续~~~ 炼码LintCode 数据库 入门级别的笔记 笔记如下&#xff0c;把所有涉及到的入门级别的知识点简单总结了一下。 以及一点点举一反三的写法。 增 INSERT INTO 表名 (列1, 列2, ...) VALUES (值1, 值2, ...);批量增 INSERT INT…

docker:docker: Get https://registry-1.docker.io/v2/: net/http: request canceled

无数次的拉镜像让人崩溃&#xff1a; rootnode11:~/ragflow/docker# more rag.sh #export HTTP_PROXYhttp://192.168.207.127:7890 #export HTTPS_PROXYhttp://192.168.207.127:7890 #export NO_PROXYlocalhost,127.0.0.1,.aliyun.com docker compose -f docker-compose-gpu-C…

Flutter:使用Future发送网络请求

pubspec.yaml配置http的SDK cupertino_icons: ^1.0.8 http: ^1.2.2请求数据的格式转换 // Map 转 json final chat {name: 张三,message: 吃饭了吗, }; final chatJson json.encode(chat); print(chatJson);// json转Map final newChat json.decode(chatJson); print(newCha…

llama-cpp模型轻量化部署与量化

一、定义 定义配置环境遇到的问题&#xff0c;交互模式下模型一直输出&#xff0c;不会停止模型量化Qwen1.5-7B 案例demo 二、实现 定义 主要应用与cpu 上的部署框架。由c完成。配置环境 https://github.com/ggerganov/llama.cpp https://github.com/echonoshy/cgft-llm/blo…

阅读《当代反无人机系统技术综述》笔记

目录 文献基本信息 序言 一、关键技术 1.1射频(RF)分析仪 1.2雷达 1.3视觉传感器和图像处理 1.4声学传感器 二、发展趋势 文献基本信息 题名&#xff1a;当代反无人机系统技术综述 作者&#xff1a;蒋罗婷 来源&#xff1a;电子质量 发表时间&#xff1a;2023-02-2…

【Lucene】倒排表和词典:提升搜索效率的关键数据结构

倒排表和词典&#xff1a;提升搜索效率的关键数据结构 倒排表&#xff08;Inverted Index&#xff09;和词典&#xff08;Term Dictionary&#xff09;是 Lucene 中用于加速搜索的关键数据结构&#xff0c;它们帮助系统在庞大的文档集合中快速定位包含特定关键词的文档。以下是…

RN开发遇到的坑

1 、 RN 启动崩溃 https://blog.csdn.net/qq_31915745/article/details/108125671 2、修改报红⻚ https://blog.csdn.net/weixin_43969056/article/details/104757926 3 、编译不过去提示 glog-0.3.5 有问题&#xff0c; 找到 / 项⽬ /node_modules/react-native/scripts/ io…

基于Multisim信号波形发生器电路正弦波方波三角波锯齿波(含仿真和报告)

【全套资料.zip】正弦方波三角波锯齿波方波占空比可调频率可调电路Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.设计一个能够产生多个信号输出的信号发生器&#xff0c; 要求输出波形…

GC9A01驱动移植(HALL库)

最近在做LVGL的移植&#xff0c;用到的屏幕驱动时GC9A01的&#xff0c;记录一下学习历程&#xff0c;防止日后遗忘。 这款屏幕我使用的是SPI协议&#xff0c;参考了部分稚辉菌大佬这个项目的程序&#xff1a; 【自制】我做了个能动的迷你电脑配件&#xff01;【软核】_哔哩哔…

PCIe板卡标准尺寸

一、板卡尺寸说明 两种PCIe外接卡的高度&#xff0c;即全高&#xff08;Standard height&#xff09;111.15 mm (4.376 inches)和半高&#xff08;half height&#xff09;68.90 mm (2.731 inches)&#xff1b; 两种PCIe外接卡的长度&#xff1a;全长&#xff08;full length&a…

docker 阿里云镜像加速

在阿里云首页点击产品-容器-容器镜像服务ACR 无需购买&#xff0c;直接进去控制台创建个人版 完成后点击镜像加速器 选择对应的系统&#xff0c;按照操作文档完成