Overview Manifest for Web Appplication

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