• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Web app的使用

互联网 diligentman 2个月前 (02-28) 19次浏览

引言

开发一个前端网页时,我们通常都会以“提供一个的用户体验环境”为目标。但在美化页面的同时,我们通常会遗漏一些“优化”。其中最重要的便是Web app了它让你的页面永远摆脱浏览器的“束缚”。

Json

在GitHub Pages制作Web App十分简单,可是首先,你要先建立文件/manifest.json

note:你可以更改文件名称,但是随后步骤也需更改!

实例代码:

{
  "name": "Name",
  "short_name": "Name",
  "description": "My first web app",
  "icons": [{
    "src": "imgs/example.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    "src": "imgs/example2.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "background_color": "#fff",
  "theme_color": "#000",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait"
}


引入文件 最重要的一点来了 请在你的html页面的head标签中加入这句语句:

<link rel="manifest" href="/manifest.json">

收工

进入自己的页面刷新首页,当你再次试图添加书签到主屏幕时,即可创建Web App!

补充

在IOS设备上访问Web app的效果很好。所以苹果官方(apple.com)专门编写了一个苹果Web app开发教程。详情请参见苹果Web app教程

废话在后

欢迎访问我的BWB项目:

https://gihub.com/shbwb/bwb

永久官网地址:

https://bwb.js.org

您的点赞、关注与每一个star都将成为我的动力!

展开阅读全文

githubiosjavascript

© 著作权归作者所有

举报

打赏

0


0 收藏

微信
QQ
微博

分享

作者的其它热门文章

一个萌新的项目推荐—BWB


程序员灯塔
转载请注明原文链接:Web app的使用
喜欢 (0)