PWA 简介

渐进式 Web 应用（Progressive Web App，PWA）是一个使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。它像网站一样，PWA可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样，可以安装在设备上，可以离线和在后台运行，并且可以与设备和其他已安装的应用程序集成。

  • 支持的浏览器会提示用户将 PWA 安装到设备上。
  • PWA 可以像特定平台的应用一样安装，并可以自定义安装过程。
  • 一旦安装，PWA 就会在设备上获得一个应用图标，与特定平台的应用程序一起。
  • 一旦安装，PWA 可以作为一个独立的应用程序启动，而不是在浏览器中的一个网站。

从这里开始

  1. 打开_config.butterfly.yml 文件，找到 Inject 部分，在inject.head中添加/manifest.json（文件位于博客根目录/source/） 
    1
    2
    3
    4
    inject:
      head:
      # - <link rel="stylesheet" href="/xxx.css">
        - <link rel="manifest" href="/manifest.json">
  2. manifest.json内容如下 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {
      "name": "小敏の晚风",
      "short_name": "小敏の晚风",
      "start_url": "/",
      "display": "standalone",
      "background_color": "#ffffff",
      "lang": "zh-cn",
      "scope": "/",
      "description": "知识分享 技术学习等.",
      "icons": [
        {
          "src": "/img/favcion_xm.svg",
          "sizes": "512x512",
          "type": "image/svg+xml"
        }
      ],
      "theme_color": "#0085ff",
      "file_handlers": [],
      "share_target": {},
      "screenshots": []
    }