Overview Manifest for Web Appplication

Transcript

1. Overview Manifest for Web Application
   @ragingwind
   WebApplications Korea
   

   View Slide

2. Installable
   Web Application
   What For?
   WebApplications Korea
   

   View Slide

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

   View 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 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 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 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 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 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 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 Slide

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

    View 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 Slide