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. 十进制和n进制的转换（10进制转换为36进制）

    答案如下: void Convert() { map<int ,string> maps; maps[0]="0"; maps[1]="1"; ma ...

  2. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

  3. Day16 DOM &jQuery

    一.本节主要内容 JavaScript 正则表达式 字符串操作的三个方法 DOM(知道就行,一般使用jQuery) 查找: 直接查找: document.getElementById 根据ID获取一个 ...

  4. Model Thinking1

    Why Model Reason # 1: Intelligent Citizen of the World Reason # 2: Clearer Thinker Reason # 3: Under ...

  5. Sql Server2000,2005,2008各版本主要区别

    Emerson回来之后,在过程中遇到的一些问题,再次做一些整理,包括本篇的Sql Server各版本之间的区别和另一篇数据库函数. (博文内容来自网络) 数据类型 SQL Server 2008 数据 ...

  6. 关于C# json转object时报错：XXXXXXXXXX需要标记“"”，但找到“XX”。

    使用的类:System.Runtime.Serialization.Json.DataContractJsonSerializer //MessagePackage 为要转成的类DataContrac ...

  7. 用Enterprise Architect从源码自动生成类图

    http://blog.csdn.net/zhouyong0/article/details/8281192 /*references:感谢资源分享者.info:简单记录如何通过工具从源码生成类图,便 ...

  8. Cocos2d-x 2.0以上版本安装方法

    1,cd 到2dx根目录,MAC平台使用./create-multi-platform-projects.py  然后提示: -bash: ./create-multi-platform-projec ...

  9. java Clone()克隆

    转自:http://www.blogjava.net/orangelizq/archive/2007/10/17/153573.html 现在Clone已经不是一个新鲜词语了,伴随着“多莉”的产生这个 ...

  10. 解决VS2005 VS2008 vs2010断点无效-源代码与原始版本不同

    网上说的方法:(额~但是我就是不能用.但是也贴出来) 方法1.直接把整个文件格式化了一次,断点就可以用了Ctrl + A全选菜单:编辑-〉高级-〉设置选定内容的格式 (Ctrl+K, Ctrl+F)通 ...