Tweet
Tweet

Slide 1

Slide 1 text

Overview Manifest for Web Application @ragingwind WebApplications Korea

Slide 2

Slide 2 text

Installable Web Application What For? WebApplications Korea

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What to do? - manifest.json - Application name - Description - Beautiful Icons - Starting point - Choose a Display mode - Ready for Service Worker WebApplications Korea

Slide 5

Slide 5 text

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:

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

- 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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

and more WebApplications Korea - Security, CSP2 - Deep Link - Navigation - More manifest members - Ready for Service Worker

Slide 12

Slide 12 text

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