让你的网页拥有原生应用的体验,快速上手 PWA 应用配置

本文主要讲述智能设备(安卓、iOS)配置 PWA ,可以令 web 应用使用上更像原生应用。影响 PWA 网页应用关键是以下三样东西:<mate><link> 以及 manifest.json 文件。

iOS PWA 应用

Android PWA 应用

标签属性

复习一下:HTML是一门标签语言

共有属性

ini 复制代码
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/img/norman-logo.png">

Apple 私有属性

参考:developer.apple.com

iOS 设备需要单独添加的属性,其中第一项 link 是设置启动图标,建议使用将透明的边缘都填满颜色,不然 iOS 能将其边缘填充为黑色 (注意:这样的图标看上去是相当难看)

ini 复制代码
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  • apple-mobile-web-app-capablecontent 有两个值 yesno,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
  • apple-mobile-web-app-status-bar-style :默认值为 default(白色),可以定为black(黑色)和 black-translucent(透明)。

注意: 若值为"black-translucent"将会占据页面px位置,浮在页面上方。

过渡页

  • 安卓手机只需要设置 manifest.json 中的 nameshort_nametheme_coloricons,即可自动匹配。

  • iOS 需要在 meta 中继续添加标签,还需要用到媒体查询的语法去适配,不然当尺寸不匹配时,效果将不生效。

使用 pwa-asset-generator 生成 PWA 配置

bash 复制代码
pwa-asset-generator ./icon.png

结果如下,可手动复制到对应的文件中,也可以根据命令生成文件,详细通过 pwa-asset-genrator -h 进行查看。

arduino 复制代码
saveImages Saved image apple-splash-2048-2732 🙌
saveImages Saved image apple-splash-2732-2048 🙌
saveImages Saved image apple-splash-1668-2388 🙌
saveImages Saved image apple-splash-2388-1668 🙌
...

[
  {
    "src": "manifest-icon-192.maskable.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "manifest-icon-192.maskable.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "maskable"
  },
  {
    "src": "manifest-icon-512.maskable.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "any"
  },
  {
    "src": "manifest-icon-512.maskable.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
  }
]

当 iOS 设备需要设置过渡页时 <meta name="apple-mobile-web-app-capable" content="yes"> content 必须为 yes

完整的参考配置

manifest.json 参考

MDN:Manifest

css 复制代码
{
  "name": "Norman·Pong Website",
  "short_name": "NormanSite",
  "theme_color": "#FFFFFF",
  "background_color": "#424242",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "./",
  "start_url": "./index.html",
  "description": "骚气十足且不专注于软件开发的技术博客",
  "icons": [
    {
      "src": "img/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

标签属性参考

xml 复制代码
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/img/norman-logo.png">

<!-- apple -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 将状态栏设置为透明,若应用中有固定的导航栏,不建议使用 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- apple 设备参考,更详细的尺寸可使用 pwa-asset-generator 生成与查看 -->
<link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1170-2532.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/img/apple-splash/apple-splash-828-1792.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1125-2436.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1179-2556.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1242-2208.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1242-2688.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1284-2778.jpg">
<link rel="apple-touch-startup-image" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/img/apple-splash/apple-splash-1290-2796.jpg">
相关推荐
山有木兮木有枝_几秒前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树15 分钟前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐20 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机32 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星33 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构35 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚35 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin36 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang45338 分钟前
React项目(移动app)
前端
用户618482402195139 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端