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的配置过程。
操作环节
- 安装依赖
- 然后就是之前文章提到的
Manifest
配置文件
新建配置文件
/public/pwa/manifest.json
写入下面的内容这里注意的是图标,一定要存在且是
png
或者jpeg
的格式吧,反正.ico
我尝试不行。- 之后在配置文件
next.config.mjs
中加入配置。如果你是.js的后缀那么就使用require
和module.exports
代替import
和export
,模块语法的问题,常做前端开发的应该会明白。
- 在head中加入配置信息导入
打开你的
app/layout.tsx
文件添加上meta信息
再将link添加到head头部
结尾
之后就可以执行
npm run build && npm start
然后打开网址,就可以在浏览器的搜索框里看到下载应用的图标
。