手把手带您从0搭建自己的第一个PWA应用

网文介绍PWA是什么的文章一大堆，本文不再过多阐述，PWA能火起来，定然有它的优势！但大部分人关注PWA，大多因为以下几点：

1. GooglePlay或者AppStore上不去架。

2. 意图绕开商店支付，降低支付抽佣压力，提高自身利润。

3. 单纯地想增加一个获客来源。

4. 自用的内部工具类App

PWA虽然有它的优势，但依旧无法和主流应用市场带给开发者的流量有可比性，如果能上架开展业务肯定是最优选择。当然，对于H5游戏出海和不需要获取用户设备信息的应用，例如AI、工具、社交与短剧等也都可以尝试，扩展自身获客来源，增加收入。 

PWA运行流程

我们可以通过一张简单的图看下PWA 的运行流程，也就是用户在使用 PWA 应用时，浏览器是如何工作的。

创建PWA项目

本文将带您一步步从零开始创建一个 PWA 项目，项目依托于VitePWA插件，其是一个用于 Vite 项目的插件，可以让您轻松将 Vite 项目转换为 PWA，并提供了简单的配置方式来启用 Service Worker 和其他 PWA 功能。

(1) 使用 Vite 创建 PWA 项目

首先，打开终端并输入以下命令以创建一个 VitePWA 项目。

npm create @vite-pwa/pwa@latest

这个命令会引导你完成项目的初始化。您按照提示选择项目名称、模板等信息就行。

(2) 安装项目依赖

在项目目录下运行以下命令来安装项目依赖。

npm install

(3) 项目构建

完成依赖安装后，可以通过以下命令构建项目。

npm run build

构建后会在项目目录下生成一个 dist 文件夹，里面包含了项目的静态资源。

(4) 使用 http-server 运行项目

构建完成后，我们可以使用 http-server 启动一个本地服务器，来测试 PWA 功能。

npx http-server dist

此时，你已经完成了 PWA 项目的基础创建和构建，可以在浏览器中打开项目，进行进一步的测试和开发了。 

Https环境配置

PWA 硬性要求在 HTTPS 环境下运行，确保安全性。因此，我们需要在本地搭建 HTTPS 服务器。初期，可以使用自签名证书来创建一个 HTTPS 环境。

(1) 创建 HTTPS 环境

获取自签名证书文件和私钥文件，并将两个文件放在项目中

在 package.json 文件中，我们可以添加一个 start 脚本来启动 HTTPS 服务器，示例如下：

"scripts": {
  
    "start": "npx http-server dist -S -C example.com+4.pem -K example.com+4-key.pem -p 9090 --index index.html"}

使用上面的命令时，example.com+4.pem 是自签名证书文件，example.com+4-key.pem 是私钥文件。

(2) 运行 HTTPS 服务器

在项目根目录下执行以下命令以启动 HTTPS 环境

npm run start

然后在浏览器中访问 ，即可测试 PWA 功能。  

Service Worker

Service Worker 是 PWA 的核心组件之一。它是一个运行在浏览器后台的脚本，允许网页在不打开的情况下执行任务。Service Worker 可以拦截和处理网络请求，实现离线缓存