Overview Manifest for Web Appplication

687ac25540fe35fcb5e828f75c4a6079?s=47 Jimmy Moon
September 20, 2016
8

Overview Manifest for Web Appplication

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

September 20, 2016
Tweet

Transcript

  1. Overview Manifest for Web Application @ragingwind WebApplications Korea

  2. Installable Web Application What For? WebApplications Korea

  3. CATCH INSTALLABILITY SIGNALS WebApplications Korea http://goo.gl/AZUYTP

  4. What to do? - manifest.json - Application name - Description

    - Beautiful Icons - Starting point - Choose a Display mode - Ready for Service Worker WebApplications Korea
  5. Overview manifest { "name": "Your Greate Application", "short_name": "You Apps",

    "description": "What a great Application for you guys", "icons": [ { "src": "launcher-icon-1x.png", "sizes": "48x48", "type": "image/png", "density": "1.0" } ], "start_url": "index.html", "display": "standalone", "orientation": "landscape" } WebApplications Korea - Using manifest.json - Telling the Browser: <link rel="manifest" href="/manifest.json">
  6. Overview manifest { "name": "Your Greate Application", "short_name": "You Apps",

    "description": "What a great Application for you guys", "icons": [ { "src": "launcher-icon-1x.png", "sizes": "48x48", "type": "image/png", "density": "1.0" } ], "start_url": "index.html", "display": "standalone", "orientation": "landscape" } WebApplications Korea - You SHOULD add `name`, `short_name`, `description` - The short_name is preferred over name
  7. Overview manifest { "name": "Your Greate Application", "short_name": "You Apps",

    "description": "What a great Application for you guys", "icons": [ { "src": "launcher-icon-1x.png", "sizes": "48x48", "type": "image/png", "density": "1.0" } ], "start_url": "index.html", "display": "standalone", "orientation": "landscape" } WebApplications Korea - You SHOULD add one more Icons for multiple resolutions with sizes and density - Should be displayed on the homescreen - Chrome prefer 42x42. Firefox prefer 128x128 - Still not stabilized
  8. - App's origin that is loaded when the app starts

    - start_url: /index.html?homescreen=1 - Using relative path by manifest.json, ../index.html, ./index.html Overview manifest { "name": "Your Greate Application", "short_name": "You Apps", "description": "What a great Application for you guys", "icons": [ { "src": "launcher-icon-1x.png", "sizes": "48x48", "type": "image/png", "density": "1.0" } ], "start_url": "index.html", "display": "standalone", "orientation": "landscape" } WebApplications Korea
  9. Overview manifest { "name": "Your Greate Application", "short_name": "You Apps",

    "description": "What a great Application for you guys", "icons": [ { "src": "launcher-icon-1x.png", "sizes": "48x48", "type": "image/png", "density": "1.0" } ], "start_url": "index.html", "display": "standalone", "orientation": "landscape" } WebApplications Korea - display: fullscreen, standalone, minimal-ui and browser - orientation: portrait and landscape - for Game: fullscreen and portrait or landscape - for Newssite: browser
  10. Manifest for Service Worker { "service_worker": { "src": "app.js", "scope":

    "app" } WebApplications Korea - It’s not another AppCache - Run a Service Worker script - It’s not ready yet - RRL: Responsive Resource Loader with
  11. and more WebApplications Korea - Security, CSP2 - Deep Link

    - Navigation - More manifest members - Ready for Service Worker
  12. References - [w3c/manifest](http://goo.gl/kgVsjB) - [Manifest for web application](http://goo.gl/rKliAU) - [Use

    Cases and Requirements for Installable Web Apps](http://goo.gl/E923SB) - [Installable Web Apps with the WebApp Manifest in Chrome for Android](http://goo.gl/cKlpv5) - [Add a WebApp Manifest — Web Fundamentals](http://goo.gl/a1Da3Z) WebApplications Korea