在 Nuxt.js 中添加 PWA

大多数人可能没有意识到，使用 Nuxt.js 添加 PWA 是多么简单。渐进式 Web 应用 (PWA) 能够提供媲美原生应用的强大功能、可靠性和易安装性，并且只需一套代码即可让任何人、在任何地点、任何设备上访问。您可以将您的网站转换为 PWA，从而获得更好的离线支持以及类似原生应用的体验。只需将其保存到主屏幕并从那里打开，您就会发现它有多么出色。

Nuxt.js PWA 模块会注册一个服务工作线程来处理离线缓存。

• 它会自动生成 manifest.json 文件
• 它会自动添加对搜索引擎友好的元数据，并集成清单文件。
• 它会自动生成不同尺寸的应用图标
• 你甚至可以使用 OneSignal 设置免费推送通知。

好的，这里有很多自动化功能，那么你具体需要做什么呢？

1）安装 npm 包

yarn add @nuxtjs/pwa 
or
npm i @nuxtjs/pwa

2) 将模块添加到您的 nuxt.config.js 文件中

{
    modules: [
        '@nuxtjs/pwa',
    ]
}

3）在目录中添加一个名为 icon.png 的文件static。它应该是正方形的，尺寸至少为 512px x 512px。

4) 请确保在 .gitignore 文件中忽略 service worker 文件。

sw.*

至此，你的 PWA 就启动并运行了。

您还可以通过修改标题、作者或名称等信息来进一步自定义 PWA。该模块默认会添加package.json名称和作者，但您可以通过pwa在文件中创建一个键nuxt.config.js并修改meta相应的manifest属性来更改此设置。

pwa: {
  meta: {
    title: 'My PWA',
    author: 'Me',
  },
  manifest: {
    name: 'Nuxt.js PWAs are so easy',
    short_name: 'Nuxt.js PWA',
    lang: 'en',
  },
}

如需查看 PWA 的完整元选项列表，请参阅Nuxt PWA 文档。