Subject
|
Google Developers Summit 2016
|
Place
|
Nine Tree Convention Gwanghwamun, Seoul Korea
|
Time
|
April 28, 2016 (Thu) 13:20~18:00
|
Speaker
| |
Host
|
Google
|
Focus
|
mobile web and app; web (progressive Web, next Web, push Notification)
|
- Intro to Progressive Web Apps (Robert Nyman, Google)
- Lesson
- RAIL: instant loading and smooth navigation
- SLICE: build an app not requiring installation
- Secure: be intentional when asking for user permissions
- Linkable: provide a direct link per paragraphs
- Indexable: make sure my contents can be found via search engines
- Composable: how you combine things
- Ephemeral: don’t require too much steps
- Why needing a native app?
- Performance, offline access, periodic background processing, notifications, sensors (GPS, Bluetooth), OS-specific features
- Progressive web app (or PWA)
- Reliable: fast loading, works on flaky networks
- Fast: smooth animation, scrolling, and nav
- Engaging and integrated: full screen with no URL bar, sending notifications even when page closed
- Required
- Service Worker
- Web app manifest
- App shell caching
- Recommended features
- Push notifications
- Advanced offline support
- PWA should work across all browsers (e.g., Chrome, Firefox, Opera)
- Add https to your web site for security (e.g., SSL for free, Cloudflare, bit.ly/ssl-labs)
- Usecase
- Flipkart
- 3x time spent on site
- 40% visitors return week over week
- Smooth experience on even 2G & flaky networks
- Personal Takeaway
- Use HTTPS
- The term Service Worker
- What’s new in Android N (Chansuk Yang, Google)
- Lesson
- Android Beta Program: google.com/android/beta (c.f., don’t run this program on a regular phone but run on a test phone)
- N for Developers:
- Multi-window: split view, PIP, free-fall?
- battery optimization:doze in N-release (no network access, jobs/syncs deferred); Doze Optimization (e.g., foreground service for music streaming service)
- datasaver, background optimization
- N Developer Checklist
- Check Multi window
- CONNECTIVITY_CHANGE, NEW_PICTURE NEW_VIDEO
- Doze
- Datasaver mode
- Notification template
- Supporting various screen size and orientation
- Background tasks such as service/broadcast receiver needing to be used only when needed
- Repetitive task-> battery optimize
- Be careful in allowing permissions
- References: d.android.com/preview; developer.android.com/preview/samples
- Personal Takeaway
- Go through checklist to prepare for N
- Instant and Offline Apps with Service Worker (도창욱, GDE)
- Lesson
- Benefit
- Instant loading: c.f., “Amazon found every 100ms of latency cost them 1% in sales”
- Goals
- Compression
- Use minification & gzip: e.g., min.js; min.css
- WebP: smaller than JPG
- Use <picture> tag and prioritize image formats
- Round trips (wasteful time)
- Be interactive: script async defer
- Defer iframes
- Http2: connection share
- Offline:
- Service Worker (a JavaScript module)
- Only support https
- Useful for 404 error page
- Personal Takeaway
- SW has instant loading benefit!
- Making it Installable (문현경Jimmy Moon, GDE)
- Lesson
- Installable web apps in 2 simple steps
- Create a manifest (a json file)
- E.g., {“name”: “The Airhorner”...}
- Link it to your page
- E.g., link=
- Flow
- User clicks “Add to home screen”
- Confirmation prompt shown
- ...
- Splash screen
- Requirement for prompt to install: offer an offline experience (i.e., Service Worker, HTTPS), hae a manifest (define what to launch and how to launch it), user …
- Personal Takeaway
- Term splash screen
- Prompt to install
- Deeper Engagement with Push Notification (고재도, GDE)
- Lesson:
- Ask yourself: is it important to interrupt users by sending notifications?
- Anatomy of notification
- Timely
- Precise
- Relevant
- Work offline
- Notification example: e.g., flight delayed, credit card last purchase amount, your self driving car has arrived, thanks for installing me
- Subscribing users
- C.f., Propel
- Personal Takeaway:
- Anatomy of notification: Timely, Precise, Relevant, Work offline
- Putting the Progressive in Progressive Web Apps (Sam Thorogood, Google)
- Lesson
- Definition of Progressive Enhancement
- What: works in every browser
- How: incremental use of APIs
- Why : diverse users (different device)
- Imperative HTML
- Push:
- Notification: info
- User engagement: user re-engagement for helping them buy products or consume contents
- Ask questions:
- What do you know about them- email, phone #, twitter, facebook
- Why are you engaging with them- informative or actionable
- Do you need to be timely
- Are you already engaging with them?
- Transport idioms
- Native
- Send timely and engaging notifications, no user login required
- Email
- Send HTML email with actional buttons
- context/platform might be different- provide login hint (help users just to enter password instead of ID and password)
- SMS
- Leverage the browser: e.g., <input autocomplete=>
- Install:
- The modern way: e.g., <link rel=”manifest” href=”/manifest.json” />
- Best practice: “Add to Home Screen” hint
- Browser tab or standalone?: content (browser tab) vs. utility (standalone)
- Offline:
- Offline capable: if a site can be cached, then you should operate well
- Network as a feature:
- assume your site is always offline, unless proven otherwise
- Every load, image fetch starts with the assu…
- User perception
- Loading wheel image: iOS image (people blame the OS) vs. Facebook loading image (blame the app)
- Personal Takeaway
- Due to user perception, use iOS loading image ^^;
- The Future of the Web (Paul Kinlan, Google)
- Lesson
- Friction was removed over time
- Distribution is the hardest problem in software
- Engagement has been achilles’ hill on web
- Placement of PWA: Mobile Web -> Progressive Web Apps -> App
- The future of the web is not about APIs
- Multi-device exp: one code for all
- Faster exp: load instantly via Service Worker
- HTTPS everywhere: use Service Worker
- Engaging and reduced friction: optimize UX of push notifications (e.g., Facebook’s push notification)
- Be fast everywhere (site load instantly)
- Amp
- RAIL
- Move to HTTPS
- Camera
- Auto-fill
- Push
- Geo-location is disabled now
- Full-screen will be disabled
- Be engaging
- E.g., Flipkart- conversion increase, return increase
- Service worker is the glue that binds the future of the Web
- Entire sites now have an app-like lifecycle.
- ES2015: Promises, ...
- Stream: fetch-> process-> render
- Background Sync: defer network request until online, great for ensuring transactions happen
- Credential Management- store credentials for re-use, get saved credentials (across devices)
- Media Stream Recorder-
- Web Bluetooth
- Physical Web: user opt-in
- Personal Takeaway
- Vysor: controllable window of your Android on your desktop
