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. CentOS+Apache+php无法访问redis的解决方法

    PHP 使用 Redis 安装 开始在 PHP 中使用 Redis 前, 我们需要确保已经安装了 redis 服务及 PHP redis 驱动,且你的机器上能正常使用 PHP. 接下来让我们安装 PH ...

  2. 请大神帮忙解决 jquery 控制 li 标签问题

    <li class="active"><a href="#1" data-toggle="tab">日志详细情况&l ...

  3. 2016030202 - github中sshkey信息设置

    根据github上面的提示生成ssh秘钥步骤 参考url:https://help.github.com/articles/generating-an-ssh-key/ 1.生成sshkey之前,检查 ...

  4. ligerUI路径问题

    ligerUI放mv的Content目录下,路径为固定的并且必须引进一下文件 <link href="~/Content/Ligerui/Source/lib/ligerUI/skin ...

  5. C#(MVC) Word 替换，填充表格，导出并下载PDF文档

    近期做一个关于C# 操作 Word 模板 文档的功能模块,查阅资料,最终完美完成任务,记录下来,以便后面还会用到.

  6. bzoj 1004 1004: [HNOI2008]Cards burnside定理

    1004: [HNOI2008]Cards Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1668  Solved: 978[Submit][Stat ...

  7. 当我们在谈论 DevOps，我们在谈论什么？

    Cloud Insight 携手 BearyChat:打造适合运维人员的团队协作工具 走过 C 轮的 OneAPM,旗下的产品已经日渐丰满,从应用性能监控的 Application Insight 到 ...

  8. Unity 物体围绕圆周运动

    用Unity开发游戏中,经常会有搜寻的功能,这时候我们需要一个放大镜的图标在那圆周运动.写了相关脚本直接挂载在要圆周运动的物体上即可: using UnityEngine; using System. ...

  9. 通过jquery-ui中的sortable来实现拖拽排序

    1.引入文件 <script src="{sh::PUB}js/jquery-1.10.1.min.js"></script> <link rel=& ...

  10. Unity3D屠龙战机项目总结

    之前跟着老师后面边学边做了一个屠龙战机项目,在这个项目中,主要用到的技术,在这里总结一下(本次项目的脚本语言用的是JS): 1.  如果想在场景中导入一个声音文件,则需要在脚本中添加一个变量,如在脚本 ...