快速webapp-html代码片段

app.js

console.log('hi')

manifest.json

{
  "short_name": "Happy mobile",
  "name": "Happy mobile",
"icons": [{
    "src": "images/touch/icon.png",
    "type": "image/png",
    "sizes": "128x128"
  }, {
    "src": "images/touch/apple.png",
    "type": "image/png",
    "sizes": "152x152"
  }, {
    "src": "images/touch/ms.png",
    "type": "image/png",
    "sizes": "144x144"
  }, {
    "src": "images/touch/chrome.png",
    "type": "image/png",
    "sizes": "192x192"
  }],
  "start_url": "index.html?launcher=true"
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Happy mobile</title>
    <link rel="shortcut icon" href="favicon.png" />
    <!-- manifest file https://developers.google.com/web/fundamentals/web-app-manifest/ -->
    <link rel="manifest" href="/manifest.json">
    
    <!--Material design goodies:-->
    <script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    
    <!--set page color and scaling fix-->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport"><!--scaling-->
    <meta name="theme-color" content="#F5841F"><!-- Chrome, Firefox OS, Opera and Vivaldi actionbar-color -->
    <meta name="msapplication-navbutton-color" content="#F5841F"><!-- Windows Phone actionbar-color-->
    <meta name="apple-mobile-web-app-status-bar-style" content="#F5841F"><!-- iOS Safari actionbar-color-->
    
    <!--define as web-app -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    <!-- ios icons -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="apple-touch-icon" href="iosfav.png"/> <!-- adds gloss pre flat-style ios.. not sure what happens now -->
    <link rel="apple-touch-icon-precomposed" href="iosfav.png" /> <!-- ignores gloss -->
  </head>
  <body>
    <!--stuff-->
  </body>
  <script src="app.js"></script>
</html>