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

概述

本文是一篇水文,感兴趣的读者可以看看。分享一下怎么讲自己的网站改造成可安装的PWA

PWA简介

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

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

实现

在浏览器主页面中添加如下代码:

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

manifest.json的内容可如下:

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": []
}

配置好后刷新页面,此时浏览器的地址栏会出现如下图所示的图标。

点击一下就提示可以安装应用。

安装完之后,会在开始菜单创建快捷方式,并在任务栏固定。点击打开是一个独立的窗口。

可通过"控制面板"卸载应用。

相关推荐
胖方Hale1 分钟前
11. Typescript 泛型
前端·typescript
brzhang5 分钟前
代码Review老被怼?这10个编程好习惯,让你写出同事都点赞的好代码!
前端·后端·架构
佳腾_21 分钟前
【Web应用服务器_Tomcat】三、Tomcat 性能优化与监控诊断
前端·中间件·性能优化·tomcat·web应用服务器
brzhang25 分钟前
告别 CURD,走向架构:一份帮你打通任督二脉的知识地图
前端·后端·架构
Moment32 分钟前
在 React 里面实现国际化实现是太简单了 🙂‍↔️🙂‍↔️🙂‍↔️
前端·javascript·react.js
兜小糖的小秃毛33 分钟前
el-Input输入数字自动转千分位进行展示
前端·javascript·vue.js
兜小糖的小秃毛34 分钟前
文号验证-同时对两个输入框验证
开发语言·前端·javascript
brzhang35 分钟前
代码越写越乱?掌握这 5 种架构模式,小白也能搭出清晰系统!
前端·后端·架构
J总裁的小芒果42 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星43 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js