PWA 的应用与配置

香菊网 发表于: 2019-06-18 分类: 前端front  H5部分  软件soft  

PWA全称Progressive Web App,即渐进式WEB应用。

web网页开发成本低,网站更新时上传最新的资源到服务器即可,用手机带的浏览器打开就可以使用。

当你在移动端浏览器打开自己网站的时候 你可以生成快捷方式到桌面 ( 添加页面到主屏幕 ),这个时候有两种配置,一种是纯 link 配置 一种就是使用 manifest 。

 

 pwa

  优点

      无需安装,无需下载,只要你输入网址访问一次,然后将其添加到设备桌面就可以持续使用。

      发布不需要提交到app商店审核

      即时加载,即使在不确定的网络条件下也不会受到影响

      页面展现之后,用户期望有平滑的体验,过渡动画和快速响应

      就像设备上的原生应用程序,具有沉浸式的用户体验

      以通过manifest.json控制应用程序的显示方式和启动方式,指定主屏幕图标、启动应用程序时要加载的页面、屏幕方向,甚至可以指定是否显示浏览器Chrome

  缺点

      游览器对技术支持还不够全面, 不是每一款游览器都能100%的支持所有PWA

      需要通过第三方库才能调用底层硬件(如摄像头)

      PWA现在还没那么火,国内一些手机生产上在Android系统上做了手脚,似乎屏蔽了PWA, 但是相信当PWA火起来以后,这个问题就不会是问题

 

Web应用程序清单是被称为渐进式Web应用程序(PWA)的Web技术集合的一部分, 它们是可以安装到设备的主屏幕的网络应用程序,而不需要用户通过应用商店,伴随着其他功能, 比如离线可用和接收推送通知。不像app一样需要审核。

html 实现添加至主屏幕

index.html

<!-- 主屏幕图标 -->
<link rel="apple-touch-icon-precomposed" href="https://f.ishangjie.com/h5/common/icon/commonShare.png">

<!-- 应用启动的时候的图片 -->
<link rel="apple-touch-startup-image" href="https://f.ishangjie.com/h5/common/icon/commonShare.png" media="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)">

<!-- 如果没有写name 启动的就是 title -->

...

 

Manifest 实现添加至主屏幕

index.html

<head>
  <title>Minimal PWA</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="icon" href="/e.png" type="image/png" />
</head>

manifest.json

{
  "name": "Minimal PWA", // 必填 显示的插件名称
  "short_name": "PWA Demo", // 可选  在APP launcher和新的tab页显示,如果没有设置,则使用name
  "description": "The app that helps you understand PWA", //用于描述应用
  "display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
  "start_url": "/", // 应用启动时的url
  "theme_color": "#313131", // 桌面图标的背景色
  "background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
  "icons": [ // 桌面图标,是一个数组
    {
    "src": "icon/lowres.webp",
    "sizes": "48x48",  // 以空格分隔的图片尺寸
    "type": "image/webp"  // 帮助userAgent快速排除不支持的类型
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
  ]
}

 

Manifest api 参考文档:https://developer.mozilla.org/zh-CN/docs/Web/Manifest

 

 

标签: 前端frontH5部分软件soft
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮