📦 PWA
介绍
简介就不用说了哈，想知道更多更详细的请自行百度或Google。谢谢！/捂脸 /捂脸 /捂脸
使用
在Nuxt.js中做PWA不分单页面和多页面，都能使用。
1.安装@nuxtjs/pwa
yarn add @nuxtjs/pwa
2.需要在你的 nuxt.config.js 中添加以下配置:
manifest: {
name: "BuyBit",
short_name: "币买",
description: "全球最具影响力的矿机算力交易平台，全球首创矿机算力交易平台，全球首家矿机算力交易平台，全球最好最优质的数字货币交易交易平台",
background_color: "#2baf88",
theme_color: "#2baf88",
lang: "zh",
start_url: "/"
},
render: {
http2: {
push: true
},
static: {
maxAge: "1y",
setHeaders(res, path) {
if (path.includes("sw.js")) {
res.setHeader("Cache-Control", `public, max-age=${15 * 60}`);
}
}
}
},// resourceHints 提升页面加载性能与体验
render: {
resourceHints: false
},modules: ["@nuxtjs/pwa"]3.在根目录下添加now.json文件
{
"version": 2,//版本号
"alias": "www.homwang.com",//域名
"builds": [{
"src": "nuxt.config.js",//打包的配置文件
"use": "@nuxtjs/now-builder"//打包使用的包
}],
"routes": [{
"src": "/_nuxt/.+",//打包后你的项目地址
"headers": {
"Cache-Control": "max-age=31557600"//设置时间，则在过期之前不会重复访问
}
},
{
"src": "/(.*)",//没有特殊要求就使用该默认配置
"dest": "/"//没有特殊要求就使用该默认配置
}
]}4.在静态static目录中添加icon.png图片文件（512 X 512）
5.打包部署流程走一遍到线上，就ok了
6.PWA展示效果
image.png
然后就可以点击+号安装应用并且下载到你到电脑桌面上了，如下:
image.png
桌面显示如下：
image.png
因为我在不同的环境下装了各自装了一个，所以我这里会有两个，后面的这个是刚刚安装下来的
结尾
在使用js开发的时候我们都想做到夸平台的访问应用，PWA的好处就是这样，在网页浏览器的同时也可以下载应用到自己的电脑桌面上，下次就可以不用直接在打开网页输入网页了，就可以直接在本地点击应用打开。这样确实很方便呢快捷。
注意事项
如果你的地址访问不安全，因为安全策略的问题不会有添加应用图标如下：