Progressive Web Apps
Awesome Progressive Web Apps
¶
精选的Progressive Web Apps资源集合.
>渐进式网络应用程序是一种新型的网络应用程序. 它们结合了原生应用程序的优点和网络的低摩擦性. 渐进式网络应用程序从简单的网站开始,但随着用户与它们交互,它们逐渐获得新的权力. 他们从一个网站转变为更像传统的原生应用程序.
如果您想贡献,请阅读 contribution guidelines.
Must Reads¶
- Building Progressive Web Apps - O'Reilly Media - 深入研究渐进式网络应用程序,服务工作者,推送通知,后台同步,IndexedDB,脱机优先等等.
- Offline Web Applications Using IndexedDB & Service Worker - 免费的Udacity课程,介绍构建渐进式Web应用程序的基本概念.
Learning Resources¶
- Google Developers - Your First Progressive Web App - 使用app shell模式构建渐进式Web应用程序的分步指南.
- Awesome Service Workers - 为学习服务工作者提供的一系列令人敬畏的资源.
- Service Workers W3C Specification - 官方服务人员规范.
Browser Support¶
- Can I Use - Service Workers - ServiceWorker API的最新浏览器支持表.
- Is Service Worker ready? - 不同浏览器中ServiceWorker支持的当前状态.
Videos¶
- Instant Loading: Building offline-first Progressive Web Apps - Google I/O 2016 - 快速浏览用于构建渐进式Web应用程序的最常用技术和技术.
- Intro To Progressive Web Apps - 谷歌的免费Udacity课程涵盖了PWA,服务工作者和网络应用程序清单的介绍.
- Offline Web Applications Using IndexedDB & Service Worker - 如果您计划深入到服务工作者那里,这个免费的Udacity课程是必须的.
- Progressive Web Apps (Chrome Dev Summit 2015) - Alex Russell和Andreas Bovens对渐进式网络应用程序的介绍.
- Polymer and Progressive Web Apps: Building on the modern web - Google I/O 2016 - 使用Polymer构建渐进式Web应用程序.
Case Studies¶
- Building the Google I/O 2016 Progressive Web App - 使用Web组件,聚合物和材料设计构建和启动渐进式Web应用程序.
- AliExpress Case Study - 使用新的渐进式网络应用程序,AliExpress将新用户的转化率提高了104%.
- eXtra Electronics Case Study - United eXtra Electronics通过Web推送通知将电子商务销售额提高100%.
- Jumia Case Study - 推送通知帮助Jumia反向推车放弃并将转换次数提高9倍.
- Konga Case Study - 使用新的Progressive Web App,Konga将数据使用率降低了92%.
- Suumo Case Study - 日本顶级房地产网站通过网络推送通知增加了新的列表,并且通知的开放率为31%.
Sample Progressive Web Apps¶
- PWA.rocks - 展示了几个渐进的网络应用程序,由收集 Opera Dev Relations team.
- SVGOMG
- Guitar Tuner
- Voice Memos
- Hacker News
Specific Technologies¶
Service Workers¶
- Awesome Service Workers - 精选服务工作者资源的精选集合.
CacheStorage API¶
- Offline Storage for Progressive Web Apps - 浏览器中当前的脱机存储状态
- CacheStorage API - API文档和Mozilla的示例代码.
Background Sync¶
- Introducing Background Sync - 温和地介绍后台同步,以及一些精彩的视频和代码示例.
- Background Sync Explained - 用于后台同步的官方“解释器”文档,包括一次性同步和定期同步.
- Background Sync Spec - 后台同步的WIP规范.
Push Notifications¶
- Can I Use - Push API - Push API的最新浏览器支持表.
- Chrome Platform Status - Web Notifications - Chrome和其他浏览器的实施状态.
- PWA Dev Summit 2016 codelab - Push Notifications Progressive Web App,推送通知和服务工作者基础知识的最新入门教程.
- Using the Push API - 介绍Push API的文章.
- web-push-libs - 用于不同技术的Web推送的有用库集合(Node.js,PHP,Python等)
IndexedDB¶
- IndexedDB API - 来自Mozilla的API文档,关键概念和示例代码.
Installable Web Apps¶
- Increasing Engagement with Web App Install Banners - 介绍应用安装横幅并确保Chrome为您的用户提供您的网络应用.
- Installable Web Apps with the Web App Manifest in Chrome for Android - Chrome for Android中可安装的Web应用程序简介.
App Icons¶
- RealFaviconGenerator - 生成在不同浏览器中显示应用程序图标所需的所有图像,favicon和相关文件的绝佳方法.
- Android Asset Studio - Launcher Icon Generator - 生成Android风格的图标.
Web Share APIs¶
- Introducing the Web Share API - Web Share API的高级介绍.
- Web Share API explainer - API的解释以及一些示例. 部分提案文件.
- Web Share Target API - Web Share Target API的提议,以及高级别的提议 explainer.
Awesome Performance¶
- Web Fundamentals - Performance - Google的绩效学习门户网站,其中包含有关优化网络应用程序以获得性能的丰富知识.
- Introducing RAIL: A User-Centric Model For Performance - Gang of Pauls对RAIL的开创性介绍.
- Website Performance Optimization - 关于优化网站速度的免费Udacity课程.
- Browser Rendering Optimization - 免费的Udacity课程,帮助您创建保持无抖动60fps性能的Web应用程序.
- The PRPL Pattern - 构建和服务Progressive Web Apps的新模式,重点是性能.
- Browser Rendering Performance - 了解浏览器如何处理HTML,JavaScript和CSS,以及如何相应地优化页面.