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开发APP接口---返回数据的封装类

    参考视频http://www.imooc.com/learn/163 <?php /** * app返回数据类 * 1.接受多维,缺少键名的数组, * 2.可由输入的format参数决定返回数据 ...

  2. mysql进阶1

    在我们用php处理数据的时候总会遇到些比较麻烦的事情,比如:两个二维数组,一个装的是文章分类表内容,一个装的是文章列表,有关联字段,完全等值,要求在列表文章的时候同时能在标题的前面显示栏目名称,此时循 ...

  3. Android新建项目 默认布局改为 LinearLayout

    目前此方法仅适用于eclipse 需要修改SDK 目录 android-sdk/tools/templates/activities/BlankActivity/root/res/layout 文件: ...

  4. 【pyhton】import math与import cmath

    import math与import cmath分别代表导入math模块和复数math模块 还有一种导入方式是 from math import sqrt 从math中单独导入sqrt 直接可以用sq ...

  5. linux哪个版本好

    我给出的意见:目前主流和常用的Linux版本主要有:1.Redhat 版本5.5和6.0最新:培训.学习.应用.知名度最高的Linux发行版本,对硬件兼容性来说也比较不错,版本更新很快,对新硬件和新技 ...

  6. QT获得所有系统环境变量（包括Linux和MAC的信息）

    系统环境变量还是挺重要的,除了QStandardPaths(感觉都是文档类型的变量,QT4使用QDesktopServices),更有QProcessEnvironment(都是真正的系统变量): Q ...

  7. VC和VS调用Lua设置以及Lua C API使用。

    通过c++调用lua 脚本,    环境VC++6.0    lua  sdk 5.1.4 在调用前先认识几个函数.1．调用lua_open()将创建一个指向Lua解释器的指针.2． luaL_ope ...

  8. Linux Kernel ‘perf’ Utility 本地提权漏洞

    漏洞名称: Linux Kernel ‘perf’ Utility 本地提权漏洞 CNNVD编号: CNNVD-201309-050 发布时间: 2013-09-09 更新时间: 2013-09-09 ...

  9. 传智播客C语言视频第一季(有效下载期为10.1-10.7,10.8关闭)

     J:\传智播客_尹成_C语言从菜鸟到高手├─传智播客_尹成_C语言从菜鸟到高手_第一章C语言概述A│      第一讲1.1C语言第一阶段.mp4│      第二讲1.2c语言入门教程.mp4 ...

  10. 【转】更新SDK后，打包APK时报 the zipalign tool was not found in the sdk

    原文网址:http://wyong.blog.51cto.com/1115465/1546632 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任 ...