Clone: Link

Modify the structure:

Move css, js, image, index.html to an 'app' folder.

manifest.json:

{

  "name": "Fireworks App",

  "short_name": "Fireworks",

  "icons": [    {

    "src":"images/fireworks-icon192x192.png",

    "sizes": "192x192",

    "type": "image/png"

  }],

  "start_url": "/index.html",

  "display": "standalone",

  "background_color": "#000",

  "theme_color": "#536878"

}

name: Showing on splash screen.

short_name: Showing on Home Screen.

background_color: splash screen background color

theme_color: toolbar color (url bar color)

icons: icons for display on home screen and splash screen

"display": "standalone" or "fullscreen"

start_url: index.html

Add to index.html:

  <head>

    <meta charset="uft-8" />

    <meta name="theme-color" content="#536878" />

    <meta name=viewport content="width=device-width, initial-scale=1">

    <title>Fireworks!</title>

    <link href="css/fireworks.css" rel="stylesheet">

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

  <!-- Add to home screen for Safari on iOS -->

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta name="apple-mobile-web-app-title" content="Fireworks">

  <link rel="apple-touch-icon" href="images/fireworks-icon192x192.png">

  <!-- Add to home screen for Windows-->

  <meta name="msapplication-TileImage" content="images/fireworks-icon192x192.png">

  <meta name="msapplication-TileColor" content="#2F3BA2">

  </head>

Register service worker:

<script>

  if ('serviceWorker' in navigator) {

    console.log("Will the service worker register?");

    navigator.serviceWorker.register('service-worker.js')

      .then(function(reg){

        console.log("Yes, it did.");

      }).catch(function(err) {

        console.log("No it didn't. This happened: ", err)

      });

  }

</script>

Also create a service-worker.js in app folder.

Last you can deply to Firebase to see your app

[PWA] Add web app to your Home Screen的更多相关文章

  1. PWA(Progressive Web App)入门系列：（一）PWA简单介绍

    前言 PWA做为一门Google推出的WEB端的新技术,长处不言而喻.但眼下对于相关方面的知识不是非常丰富.这里我推出一下这方面的新手教程系列.提供PWA方面学习. 什么是PWA PWA全称Progr ...

  2. PWA渐进式web应用

    PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化框架,让网页应用呈现 ...

  3. Progressive web app理念及发展前景

    前一段时间微信推出微信小程序进行公测,着实火了一把,博得了大众的眼球,不明真相的吃瓜观众们纷纷围观,所谓的“微信小程序”,通俗的讲就是一种不需要下载安装即可使用的应用程序,脱离于app商店依托于浏览器 ...

  4. [io PWA] keynote: Launching a Progressive Web App on Google.com

    Mainly about Material design (effects / colors / flashy stuff) Components (web components / polymer) ...

  5. 什么是渐进式Web App(PWA)？为什么值得关注？

    转载自:https://blog.csdn.net/mogoweb/article/details/79029651 在开始PWA这个话题之前,我们先来看看Internet现状. 截至2017年1月, ...

  6. 说说 PWA 和微信小程序--Progressive Web App

    作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...

  7. [PWA] Enable Push Notification in your web app

    1. Clone the project: git clone https://github.com/GoogleChrome/push-notifications.git 2. install th ...

  8. (转)PWA（Progressive Web App）渐进式Web应用程序

    PWA 编辑 讨论 PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化 ...

  9. tms web core pwa让你的WEB APP离线可用

    tms web core pwa让你的WEB APP离线可用 tms web core允许创建渐进式Web应用程序(PWA).渐进式Web应用程序是为适应在线/离线情况,各种设备类型,最重要的是,让自 ...

随机推荐

  1. js 中的流程控制-循环(for)语句

    for语句: <script> /* for(exp1;exp2;exp3){ 循环体; } exp1:无条件的执行第一个表达式 exp2:判断是否能执行循环体的条伯 exp3:做增量的操 ...

  2. mysql datestamp坑

    每次更改行数据,该行第一个datestamp如不赋值,会自动更新为当前时间.赋值还要注意用下new Date(time).updated_at要写在created_at前面...

  3. 关于手机端CSS Sprite图标定位的一些领悟

    今天在某个群里面闲逛,看见一个童鞋分享了一个携程的移动端的页面.地址这里我也分享下吧:http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标,用的比较多就是用字体图标来 ...

  4. sublime支持显示中文

    Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦.不过Sublime Package Control所以供的插件可以让Subli ...

  5. 我们说的oc是动态运行时语言是什么意思？

    1.KVC和KVO区别,分别在什么情况下使用?  答:KVC(Key-Value-Coding) KVO(Key-Value-Observing)理解KVC与KVO(键-值-编码与键-值-监看) 当通 ...

  6. matplotlib 绘图

    http://blog.csdn.net/jkhere/article/details/9324823 都打一遍 5 matplotlib-绘制精美的图表 matplotlib 是python最著名的 ...

  7. 百部BBC经典纪录片，附地址，需要的请抱走

  8. java webservice服务器端获取request对象的三种方式

    有的时候在webservice里我们需要获取request对象和response对象,比如想要获得客户端的访问ip的时候就需要这么做,下面说三种方式,当然三种方式可能是针对不同方式部署webservi ...

  9. Keil_C51程序调试过程

    调试一般都是在发生错误与意外的情况下使用的.如果程序能正常执行,调试很多时候都是用不上的.所以,最高效率的程序开发还是程序员自己做好规范,而不是指望调试来解决问题. 单片机的程序调试分为两种,一种是使 ...

  10. astyle代码格式化

    Artistic Style 1.24 A Free, Fast and Small Automatic Formatterfor C, C++, C#, and Java Source Code 项 ...