尝试给我的个人博客加入PWA

目录

1. 什么是PWA

PWA（Progressive Web App）是一种新的Web应用程序模型。它结合了Web应用程序和原生应用程序的最佳特性，使Web应用程序能够提供类似于原生应用程序的体验。

2. 为什么需要PWA

  • 离线访问
  • 使网站能够如同源生应用一样的体验

3. 如何实现PWA

3.1 安装插件

插件文档

官方文档

vuepress网站可以基于官方插件@vuepress/plugin-pwa实现PWA化

安装

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

使用

//config.js
module.exports = {
  plugins: ['@vuepress/pwa']
}

3.2 PWA配置

在官方文档中有这样的说明:

为了让你的网站完全地兼容 PWA，你需要
在 .vuepress/public 提供 Manifest 和 icons
在 .vuepress/config.js 添加正确的 head links(参见下面例子).

并给了下面这个示例:

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: true
  }],
}

但是无论是图标尺寸还是maninfest文件都略显麻烦

这里推荐直接使用realfavicongenerator

只需要上传一个想做为网站的图标和配置,便可直接生成不同尺寸的图标和manifest文件,并且支持根据不同设备预览和调整图标

然后直接下载下来放在public文件夹下,并在config中加入以下配置即可:

module.exports = {
  head: [
        ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' }],
        ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }],
        ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' }],
        ['link', { rel: 'manifest', href: '/site.webmanifest' }],
        ['link', { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' }],
        ['meta', { name: 'msapplication-TileColor', content: '#603cba' }],
        ['meta', { name: 'theme-color', content: '#ffffff' }]
  ],
  plugins: ['@vuepress/pwa', {
      serviceWorker: true,
      updatePopup: true
  }],
}

3.3 PWA更新提示

你可以使用updatePopup配置项来控制更新提示的显示。

module.exports = {
  plugins: ['@vuepress/pwa', {
        serviceWorker: true,
        updatePopup: true,
        updatePopup: {
            // 弹出信息
            message: "铛铛铛~博客已更新!",
            // 更新按钮上的文本
            buttonText: "立刻刷新!",
        }
  }],
}

同时我们还可以自定义 SW-Update Popup 的 UI
详见这里

3.4 Manifest修改

之前自动生成的Manifest文件是site.webmanifest

我们要加入start_url字段,一般设为start_url:'.'即可

常用的字段有:

  • start_url: 指定用户从设备启动应用程序时加载的 URL
  • theme_color: 定义应用程序的默认主题颜色。这有时会影响操作系统显示应用程序的方式（例如，在 Android 的任务切换器上，主题颜色包围应用程序）
  • name: 程序名
  • short_name: 在没有足够空间显示显示全名时的简短名字
  • scope: 上下文的导航范围(如果不是部署在站点根目录下要加入scope)
  • display: 显示模式
  • icons: 在不同环境下的应用图标组
  • background_color: 预定义的背景颜色

详细请见MDN docs about the Web App Manifest

3.5 完成与debug

一般来说现在已经可以在浏览器[1]上看到PWA下载提示了

下载

如果没有看到安装提示:

  • 检查是否启用了https
  • PWA只在生产环境中运行,是否已经部署?
  • 如果还是不行,可以打开浏览器开发人员选项,然后切换到应用程序TAB,此时会提示错误信息
广告时间

当然我的vuepress博客启动模板已自动配置完PWA,你可以在它的基础上修改图标和名字即可
vuepress博客启动模板

  1. 少数浏览器如电脑端的火狐目前暂不支持PWA ↩︎