Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Overview Manifest for Web Appplication

Jimmy Moon
September 20, 2016
36

Overview Manifest for Web Appplication

Jimmy Moon

September 20, 2016
Tweet

Transcript

  1. Overview Manifest for Web Application
    @ragingwind
    WebApplications Korea

    View full-size slide

  2. Installable
    Web Application
    What For?
    WebApplications Korea

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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:

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide