Clone: Link

Modify the structure:

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

manifest.json:

  1. {
  2.   "name": "Fireworks App",
  3.   "short_name": "Fireworks",
  4.   "icons": [    {
  5.     "src":"images/fireworks-icon192x192.png",
  6.     "sizes": "192x192",
  7.     "type": "image/png"
  8.   }],
  9.   "start_url": "/index.html",
  10.   "display": "standalone",
  11.   "background_color": "#000",
  12.   "theme_color": "#536878"
  13. }

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:

  1.   <head>
  2.     <meta charset="uft-8" />
  3.     <meta name="theme-color" content="#536878" />
  4.     <meta name=viewport content="width=device-width, initial-scale=1">
  5.     <title>Fireworks!</title>
  6.     <link href="css/fireworks.css" rel="stylesheet">
  7.     <link rel="manifest" href="manifest.json">
  8.   <!-- Add to home screen for Safari on iOS -->
  9.   <meta name="apple-mobile-web-app-capable" content="yes">
  10.   <meta name="apple-mobile-web-app-status-bar-style" content="black">
  11.   <meta name="apple-mobile-web-app-title" content="Fireworks">
  12.   <link rel="apple-touch-icon" href="images/fireworks-icon192x192.png">
  13.   <!-- Add to home screen for Windows-->
  14.   <meta name="msapplication-TileImage" content="images/fireworks-icon192x192.png">
  15.   <meta name="msapplication-TileColor" content="#2F3BA2">
  16.   </head>

Register service worker:

  1. <script>
  2.   if ('serviceWorker' in navigator) {
  3.     console.log("Will the service worker register?");
  4.     navigator.serviceWorker.register('service-worker.js')
  5.       .then(function(reg){
  6.         console.log("Yes, it did.");
  7.       }).catch(function(err) {
  8.         console.log("No it didn't. This happened: ", err)
  9.       });
  10.   }
  11. </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. odoo 错误 Resource interpreted as Stylesheet but transferred with MIME type application/x-css:

    odoo8   页面内容显示一半,  web 控制台显示错误  Resource interpreted as Stylesheet but transferred with MIME type ap ...

  2. dictionary ----- python

    Learn of dictionary,simple example of dictionary in  “Simple Python tutorial"------------------ ...

  3. C# Json反序列化处理

    最近换工作了 从客户端转到Web端 第一个任务就是去别人的页面上抓取数据 用到的是JSON 因为他们网站json的格式有点怪 所以 就在JSON反序列化上面 花了一点时间 首先用到的工具是http:/ ...

  4. mmap内存映射复习

    c语言初学时,比较常见的一个习题就是实现cp. 使用c库实现的cp就不赘述了. 最近工作用到内存映射,就拿来练下手,复习一下mmap的用法. 很简单,将目标文件和源文件映射到内存,然后使用memcpy ...

  5. BASLER 镜头选型白皮书

    本文翻译自Basler镜头选型白皮书 有许多方法来进行镜头选型.本文将会讨论其中的指导原则,以帮助你在项目中选择合适的镜头.我们将讨论许多镜头的基本概念,比如镜头接口.图像大小.放大率.焦距.F数和光 ...

  6. Dataguad RAC配置【一】

    Data Guard配置步骤 生产端配置步骤 1.关闭一个实例. 用oracle用户登录192.166.1.190,执行以下SQL关闭其上的实例: SQL>shutdown immediate; ...

  7. oracle技巧-持续更新

    1. 登录oracle数据库,执行select status from v$encryption_wallet,如果返回OPEN,表示钱夹已自动打开. 2.

  8. Contest 高数题 樹的點分治 樹形DP

    高数题 HJA最近在刷高数题,他遇到了这样一道高数题.这道高数题里面有一棵N个点的树,树上每个点有点权,每条边有颜色.一条路径的权值是这条路径上所有点的点权和,一条合法的路径需要满足该路径上任意相邻的 ...

  9. [BZOJ 1112] [POI2008] 砖块Klo 【区间K大】

    题目链接:BZOJ - 1112 题目分析 枚举每一个长度为k的连续区间,求出这个区间的最优答案,更新全局答案. 可以发现,这个区间的所有柱子最终都变成这k个数的中位数时最优,那么我们就需要查询这个区 ...

  10. jsconsole

    在移动设备或者其他无法启动 chrome developer tools 的时候可以用以下方法进行console 步骤: 1. 进入 http://jsconsole.com 的console画面,在 ...