Nuxt之PWA（Progressive Web App）渐进式网页应用

地址：https://www.homwang.com 欢迎大家性能测试
交流讨论——QQ群号:604203227

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的好处就是这样，在网页浏览器的同时也可以下载应用到自己的电脑桌面上，下次就可以不用直接在打开网页输入网页了，就可以直接在本地点击应用打开。这样确实很方便呢快捷。

注意事项

如果你的地址访问不安全，因为安全策略的问题不会有添加应用图标如下：

image.png