Production-ready Progressive Web Apps

Transcript

1. Production-ready Progressive Web Apps Ying Hsiang Liao Ads Solutions Consultant, Google 苏宁前端技术交流论坛 | May 13, 2017
2. Proprietary + Confidential Proprietary + Confidential Proprietary + Confidential Next Generation Mobile Web
3. Proprietary + Confidential The Web offers great discovery, but engagement is low Source: comScore Mobile Metrix, U.S., Age 18+, June 2016 9.3 Monthly unique visitors (MM) 4.0 Average minutes per visitor Mobile web Apps 11.4 188.6
4. Proprietary + Confidential The web has always been great at distribution Engagement Discovery Mobile web Apps
5. Proprietary + Confidential Mobile web has some challenges Limited access to device capabilities 1 2 3 4 Pages and sites take too long to load Ads is slow Filling out forms takes too long
6. Proprietary + Confidential So now we’re adding capabilities Engagement Discovery Mobile web Apps
7. The Shopping Scenario
8. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential 购物体验从搜索开始 挑选喜欢的款式
9. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential 等待库存更新 要求被通知 商品暂时缺货
10. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential 有的时候信号不佳 即使在没有信号的情况下 仍可以浏览网页
11. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential 收到电商的通知 加入购物车 付款 自动登录
12. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential 全屏打开 轻松付款 创建快捷图标 方便回访网站
13. Proprietary + Confidential Alibaba • 76% higher conversions across browsers • 14% more monthly active users on iOS; 30% on Android • 4X higher interaction rate from Add to Homescreen Showcase
14. Proprietary + Confidential Progressive Web Apps
15. Proprietary + Confidential 让用户使用主屏幕快捷图标和全屏模式 cnet.com/tech-today
16. Proprietary + Confidential 即使在不稳定网络或离线时仍可显示内容
17. Proprietary + Confidential 像应用程序一样发 Web 通知推送 https://weather.com
18. Proprietary + Confidential 补齐 Web 上缺少用于驱动用户参与度的元素 添加快捷图标 到主屏幕 推送通知 性能稳定 Manifest + Service Worker Service Worker FCM + Service Worker
19. Proprietary + Confidential Enable reliable experiences with Service Worker 旧模式 After Service worker Client side proxy written in JavaScript 安装在用户端 Web server SW cache Web server Local cache Before
20. Proprietary + Confidential Proprietary + Confidential Production-ready Progressive Web App
21. Proprietary + Confidential Progressive Web App Checklist • Lighthouse ◦ Chrome Extension ◦ Install and run the Node command line tool ◦ Run the Node module programmatically ◦ Integrate with continuous integration / delivery process • Test on real device, real network
22. Proprietary + Confidential Debug Service Workers • Inspecting the Manifest • Inspecting the Service Workers ◦ Offline ◦ Update on reload ◦ Bypass for network ◦ Show all service workers • Exploring the cache • Inspecting Cache Storage • Cleaning the slate
23. Proprietary + Confidential Design the App Shell
24. Proprietary + Confidential The Challenges • What about edit on index.html? • What about /scripts/app-abcd1234.js? • What about new-image.png?
25. Proprietary + Confidential Maintainable Service Workers • Asset Manifest ◦ Precache based on a list of files generated at build time. • Runtime Cleanup ◦ Use an expiration policy to keep runtime caches fresh and clean.
26. Proprietary + Confidential Service Worker Libraries • sw-precache • sw-toolbox • sw-offline-google-analytics sw-precache sw-toolbox sw-offline-ga
27. Proprietary + Confidential sw-precache Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Build-time precaching for static assets https://github.com/GoogleChrome/sw-precache package.json “Scripts”: { “Precache”: “sw-precache --root=’build/’” } $ npm run precache
28. Proprietary + Confidential sw-toolbox Runtime caching strategies & expiration https://github.com/GoogleChrome/sw-toolbox
29. Proprietary + Confidential sw-offline-google-analytics IndexedDB-based queueing & retries https://github.com/googlechrome/sw-helpers
30. Proprietary + Confidential Webpack Plugin
31. Proprietary + Confidential Web Starter Kit Opinionated boilerplate for web development. • Responsive boilerplate • Sass support • Performance optimization • Code Linting • ES2015 via Babel 6.0 • Built-in HTTP Server • Live Browser Reloading • Cross-device Synchronization • Offline support • PageSpeed Insights https://developers.google.com/web/tools/starter-kit/
32. Proprietary + Confidential Indexable Progressive Web Apps • Make Your Content Crawlable • Provide Clean URLs • Specify Canonical URLs • Design for Multiple Devices • Use Progressive Enhancement Devices • Test with Search Console • Annotate with Schema.org structured data https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html
33. Proprietary + Confidential 从头开始建造 cnet.com/tech-today 局部beta测试 改建当前的网页 housing.com https://ride.lyft.com/ makemytrip.com https://app.infobae.com/ weather.com/fr Building Progressive Web Apps is a Journey
34. Proprietary + Confidential
35. Proprietary + Confidential Proprietary + Confidential Proprietary + Confidential Thank you