关于javascript:2022-年了还不了解-PWA-教你-VuePress-博客如何快速兼容-PWA

40次阅读

共计 2778 个字符,预计需要花费 7 分钟才能阅读完成。

前言

在《一篇带你用 VuePress + Github Pages 搭建博客》中,咱们应用 VuePress 搭建了一个博客,最终的成果查看:TypeScript 中文文档。

本篇咱们讲讲如何兼容 PWA。

PWA

PWA,英文全称:Progressive Web Apps,中文翻译:渐进式 Web 利用

援用 MDN 的介绍:

PWA 指的是应用指定技术和规范模式来开发的 Web 利用,这同时赋予它们 Web 利用和原生利用的个性。

例如一方面,Web 利用更加易于发现:相比于装置利用,拜访一个网站显然更加容易和迅速。你还能够通过链接来分享 Web 利用。

另一方面,原生利用与操作系统能够更加完满的整合,也因而为用户提供了无缝的用户体验。你能够通过装置利用使得它在离线的状态下也能够运行;相较于应用浏览器拜访,用户也更喜爱通过点击主页上的图标来拜访它们青睐的利用。

PWA 赋予了咱们创立同时领有以上两种劣势的利用的能力。

体验

如果你之前没有理解过 PWA,大概率可能也不明确这是个什么成果,没有关系,咱们间接看一个 PWA 利用示例,咱们关上 https://m.weibo.cn/,这里是在电脑端关上的:

咱们能够看到,在地址栏还有一个装置图标,点击一下,就会弹出装置利用的选项框:

咱们点击装置后,该页面会主动敞开,而后开启一个利用窗口:

同时,关上 Mac 的启动台,咱们会看到曾经增加了微博的图标:

点击就会间接关上下面的利用窗口。

简略的来说,咱们兼容 PWA,就是想要实现这样的桌面图标的性能,当然了,PWA 其余还有离线缓存、推送告诉等性能,这里就不多说了。

开启 PWA

开启 PWA,须要留神三个点:

  1. 提供一个 manifest.json 文件,形容利用的名称、图标等信息
  2. 开启 Service Worker,这个交给现有的 PWA 插件来实现
  3. 开启 HTTPS

实际

1. 装置

插件地址:https://v1.vuepress.vuejs.org/zh/plugin/official/plugin-pwa.html

yarn add -D @vuepress/plugin-pwa
# OR npm install -D @vuepress/plugin-pwa

2. 批改 config.js

module.exports = {
  head: [['link', { rel: 'icon', href: '/logo.png'}],
    ['link', { rel: 'manifest', href: '/manifest.json'}],
    ['meta', { name: 'theme-color', content: '#3eaf7c'}],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes'}],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black'}],
    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png'}],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c'}],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png'}],
    ['meta', { name: 'msapplication-TileColor', content: '#000000'}]
  ],
  plugins: [
    [
      '@vuepress/pwa',
      {
        serviceWorker: true,
        updatePopup: {
            message: "发现新内容可用",
            buttonText: "刷新"
        }
     }
    ]
  ]
}

3. 增加 manifest.json 等资源

接下来咱们增加所须要的资源,在 .vuepress目录下建设 public文件夹,而后增加所须要的文件如 manifest.json文件:

{
    "name": "TypeScript 中文文档",
    "short_name": "TypeScriptDocs",
    "display": "standalone",
    "background_color": "#fff",
    "start_url": "/learn-typescript-test/",
    "scope": "/learn-typescript-test/",
    "description": "TypeScript 中文文档 进阶教程",
    "icons": [{
      "src": "logo52.png",
      "sizes": "52x52",
      "type": "image/png"
    },{
       "src": "logo288.png",
       "sizes": "288x288",
       "type": "image/png"
    }]
  }

这其中字段的具体含意,能够查看 MDN 的 Manifest 介绍。

要留神其中的 start_urlscope,如果你应用的是 GitHub 或者 Gitee 仓库的 Pages 服务,并且地址上带了仓库名,你须要将这里的learn-typescript-test 替换为你的仓库名,如果是间接的域名,start_url 写成 \scope写成 .或者间接不写。

而后是补齐所须要的图标图片:

4. 部署生产环境测试

尽管咱们在上篇《VuePress 博客如何开启本地 HTTPS 拜访》讲了如何在本地开启 HTTPS,然而因为咱们应用的这个插件只有在生产环境才会开启 Service Worker:

所以呢,咱们部署到线上看一下成果,如果顺利的话,你就会看到地址栏上也呈现了装置图标:

常见问题

但如果没有显示该图标,咱们能够查看开发者工具里的「利用」-「清单」,其中会显示呈现的谬误:

依据这里的报错进行排查。

如果呈现了可安装性中的:

为检测到任何匹配的 service worker。您可能须要从新加载页面,或者查看以后页面的 service worker 是否也管制了清单谬误中的起始 URL。

这也有可能是因为你的 start_urlscope 设置的有问题。

失常装置后,如果关上利用发现背景色是 Vue 绿色,比方这种:

这是因为你遗记批改 config.js 里的背景色了:

系列文章

博客搭建系列是我至今写的惟一一个偏实战的系列教程,预计 20 篇左右,解说如何应用 VuePress 搭建、优化博客,并部署到 GitHub、Gitee、公有服务器等平台。本篇为第 23 篇,全系列文章地址:https://github.com/mqyqingfeng/Blog

微信:「mqyqingfeng」,加我进冴羽惟一的读者群。

如果有谬误或者不谨严的中央,请务必给予斧正,非常感激。如果喜爱或者有所启发,欢送 star,对作者也是一种激励。

正文完
 0