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. php脚本业务逻辑

    设置时区 设置执行不超时 设置根目录常量 引入配置文件(自定义/模板) 错误记录 定义业务类 执行业务类::run() 数据库单例初始化(连接) 日志单例初始化(引入日志类,配置日志路径,日志开关) ...

  2. Android特效--粒子效果之雨

    1. 单个雨点的行为 2. 完善雨点的行为和构造下雨场景 3. 在XML中定义可以控制下雨的属性 --------------------------------------------------- ...

  3. Cohort Analysis Using Python

    Cohort Analysis是将某一个时期内的用户划分为一个cohort,并将多个cohort进行时间上的某个属性的比较的一种分析方法.Cohort Analysis在有些场景下非常有用.比如一个网 ...

  4. eclipse的使用、优化配置

    一.简介 eclipse 可谓是Java开发界的神器,基本占据了大部分的Java开发市场,而且其官方还对其他语言提供支持,如C++,Ruby,JavaScript等等.为 什么使用它?我想离不开下面的 ...

  5. ALTER TABLE 语句与 FOREIGN KEY 约束"FK_SCHEDULE_REFERENCE_POSTCONF"冲突。

    主要原因是因为两个表中有数据不匹配,只要把不匹配的数据删掉就行了.

  6. bzoj 2818: Gcd 歐拉函數

    2818: Gcd Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1633  Solved: 724[Submit][Status] Descript ...

  7. [BZOJ 1559] [JSOI2009] 密码 【AC自动机DP】

    题目链接:BZOJ - 1559 题目分析 将给定的串建成AC自动机,然后在AC自动机上状压DP. 转移边就是Father -> Son 或 Now -> Fail. f[i][j][k] ...

  8. Java实现希尔排序

            华杰让我看了一道面试题:现有一段程序S,可以对任意n个数进行排序.如果现在需要对n^2个数进行排序,最少需要调用S多少次?(只允许调用S,不可以做别的操作).         看到了这 ...

  9. navBar

    改变NavgationBar的颜色: [[UINavigationBar appearance] setBarTintColor:[UIColor blackColor]]; 改变NavgationB ...

  10. C语言头文件的使用与写法

    C语言中的.h文件和我认识由来已久,其使用方法虽不十分复杂,但我却是经过了几个月的“不懂”时期,几年的“一知半解”时期才逐渐认识清楚他的本来面目.揪其原因,我的驽钝和好学而不求甚解固然是原因之一,但另 ...