将自己的网站改造成可安装的PWA

创作时间:

作者:

@小白创作中心

将自己的网站改造成可安装的PWA

引用

CSDN

https://blog.csdn.net/GISShiXiSheng/article/details/141369328

渐进式Web应用（PWA）是一种结合了网站和原生应用优势的新型应用形式。它不仅能够像网站一样通过浏览器访问，还能像原生应用一样进行安装、离线使用和后台运行。本文将详细介绍如何将自己的网站改造成可安装的PWA。

PWA概述

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

实现步骤

要将网站改造成PWA，需要在HTML文件中添加manifest链接，并创建相应的manifest.json文件。以下是具体步骤：

在HTML文件的<head>部分添加以下代码：

<!doctype html>
<html lang="zh">
  <head>
    <link rel="manifest" href="manifest.json" />
    <!-- ... -->
  </head>
  <body></body>
</html>

创建manifest.json文件，并添加以下内容：

{
  "name": "我的加油站",
  "short_name": "我的加油站",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "lang": "zh-cn",
  "scope": "/",
  "description": "地图SDK 技术学习 常用工具等.",
  "icons": [
      {
          "src": "icon.png",
          "sizes": "512x512",
          "type": "image/png"
      }
  ],
  "theme_color": "#0085ff",
  "file_handlers": [],
  "share_target": {},
  "screenshots": []
}

配置好后刷新页面，此时浏览器的地址栏会出现如下图所示的图标。点击一下就会提示可以安装应用。安装完之后，会在开始菜单创建快捷方式，并在任务栏固定。点击打开是一个独立的窗口。