🗒️Next.js 14 配置PWA
2024-8-31
| 2024-10-10
0  |  阅读时长 0 分钟
date
Aug 31, 2024 05:09 AM
type
status
slug
summary
tags
category
updated
Oct 10, 2024 08:05 AM
icon
password

前言

前面的《PWA技术简介》文章中对PWA做了介绍,也介绍了它的交互流程。那么这里就对我开发的音乐网站做一个PWA配置,来实践一下PWA的配置过程。
 

操作环节

  1. 安装依赖
    1.  
  1. 然后就是之前文章提到的Manifest配置文件
    1. 新建配置文件/public/pwa/manifest.json 写入下面的内容
      这里注意的是图标,一定要存在且是png或者jpeg的格式吧,反正.ico我尝试不行。
       
  1. 之后在配置文件 next.config.mjs 中加入配置。如果你是.js的后缀那么就使用requiremodule.exports 代替importexport ,模块语法的问题,常做前端开发的应该会明白。
     
    1. 在head中加入配置信息导入
      1. 打开你的app/layout.tsx 文件
        添加上meta信息
    再将link添加到head头部
     

    结尾

    之后就可以执行 npm run build && npm start 然后打开网址,就可以在浏览器的搜索框里看到下载应用的图标
  2. NextJS
  3. PWA
  4. Git 删除提交和配置文件的方法PWA技术简介
    Loading...