256 lines
12 KiB
HTML
256 lines
12 KiB
HTML
<h1 id="awesome-progressive-web-apps-awesome">Awesome Progressive Web
|
||
Apps <a href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p>A curated collection of Progressive Web Apps resources.</p>
|
||
<p><a href="https://pwabook.com/oreillyapwa"><img align="right" src="images/mpwa.png" alt="Building Progressive Web Apps"></a>
|
||
> Progressive web apps are a new breed of web apps. They combine the
|
||
benefits of a native app with the low friction nature of the web.
|
||
Progressive web apps start off as simple websites, but as the user
|
||
interacts with them, they progressively gain new powers. They transform
|
||
from a website into something much more like a traditional native app.
|
||
> > – <cite><a href="https://pwabook.com/oreillyapwa">Building
|
||
Progressive Web Apps - O’Reilly</a></cite></p>
|
||
<p>If you want to contribute, please read the <a
|
||
href="contributing.md">contribution guidelines</a>.</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#must-reads">Must Reads</a></li>
|
||
<li><a href="#learning-resources">Learning Resources</a></li>
|
||
<li><a href="#browser-support">Browser Support</a></li>
|
||
<li><a href="#videos">Videos</a></li>
|
||
<li><a href="#case-studies">Case Studies</a></li>
|
||
<li><a href="#sample-progressive-web-apps">Sample Progressive Web
|
||
Apps</a></li>
|
||
<li><a href="#specific-technologies">Specific Technologies</a>
|
||
<ul>
|
||
<li><a href="#service-workers">Service Workers</a></li>
|
||
<li><a href="#cachestorage-api">CacheStorage API</a></li>
|
||
<li><a href="#background-sync">Background Sync</a></li>
|
||
<li><a href="#push-notifications">Push Notifications</a></li>
|
||
<li><a href="#indexeddb">IndexedDB</a></li>
|
||
<li><a href="#installable-web-apps">Installable Web Apps</a>
|
||
<ul>
|
||
<li><a href="#app-icons">App Icons</a></li>
|
||
</ul></li>
|
||
<li><a href="#web-share-apis">Web Share APIs</a></li>
|
||
</ul></li>
|
||
<li><a href="#awesome-performance">Awesome Performance</a></li>
|
||
</ul>
|
||
<h2 id="must-reads">Must Reads</h2>
|
||
<ul>
|
||
<li><a href="https://pwabook.com/oreillyapwa">Building Progressive Web
|
||
Apps - O’Reilly Media</a> - A deep dive into progressive web apps,
|
||
service workers, push notifications, background sync, IndexedDB, offline
|
||
first and much more.</li>
|
||
<li><a
|
||
href="https://www.udacity.com/course/offline-web-applications--ud899">Offline
|
||
Web Applications Using IndexedDB & Service Worker</a> - A free
|
||
Udacity course introducing the basic concepts of building a progressive
|
||
web app.</li>
|
||
</ul>
|
||
<h2 id="learning-resources">Learning Resources</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en">Google
|
||
Developers - Your First Progressive Web App</a> - A step-by-step guide
|
||
to building a progressive web apps using the app shell pattern.</li>
|
||
<li><a href="https://github.com/TalAter/awesome-service-workers">Awesome
|
||
Service Workers</a> - A collection of awesome resources for learning
|
||
service workers.</li>
|
||
<li><a href="https://www.w3.org/TR/service-workers/">Service Workers W3C
|
||
Specification</a> - The official service workers spec.</li>
|
||
</ul>
|
||
<h2 id="browser-support">Browser Support</h2>
|
||
<ul>
|
||
<li><a href="http://caniuse.com/#feat=serviceworkers">Can I Use -
|
||
Service Workers</a> - Up-to-date browser support table of ServiceWorker
|
||
API.</li>
|
||
<li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is
|
||
Service Worker ready?</a> - Current status of ServiceWorker support in
|
||
different browsers.</li>
|
||
</ul>
|
||
<h2 id="videos">Videos</h2>
|
||
<ul>
|
||
<li><a href="https://youtu.be/cmGr0RszHc8">Instant Loading: Building
|
||
offline-first Progressive Web Apps - Google I/O 2016</a> - A quick dive
|
||
into the most common technologies and techniques for building
|
||
progressive web apps.</li>
|
||
<li><a
|
||
href="https://www.udacity.com/course/intro-to-progressive-web-apps--ud811">Intro
|
||
To Progressive Web Apps</a> - This free Udacity course by Google covers
|
||
intro to PWAs, service workers and web app manifests.</li>
|
||
<li><a
|
||
href="https://www.udacity.com/course/offline-web-applications--ud899">Offline
|
||
Web Applications Using IndexedDB & Service Worker</a> - This free
|
||
Udacity course is a must if you’re planning to dive deep into service
|
||
workers.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=MyQ8mtR9WxI">Progressive
|
||
Web Apps (Chrome Dev Summit 2015)</a> - An introduction to progressive
|
||
web apps by Alex Russell and Andreas Bovens.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=fFF2Yup2dMM">Polymer and
|
||
Progressive Web Apps: Building on the modern web - Google I/O 2016</a> -
|
||
Using Polymer to build progressive web apps.</li>
|
||
</ul>
|
||
<h2 id="case-studies">Case Studies</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/showcase/2016/iowa2016">Building
|
||
the Google I/O 2016 Progressive Web App</a> - Building and launching a
|
||
progressive web app using web components, Polymer, and material
|
||
design.</li>
|
||
<li><a
|
||
href="https://developers.google.com/web/showcase/2016/aliexpress">AliExpress
|
||
Case Study</a> - AliExpress increases conversion rate for new users by
|
||
104% with new progressive web apps.</li>
|
||
<li><a
|
||
href="https://developers.google.com/web/showcase/2016/extra">eXtra
|
||
Electronics Case Study</a> - United eXtra Electronics grows eCommerce
|
||
sales by 100% with Web Push Notifications.</li>
|
||
<li><a
|
||
href="https://developers.google.com/web/showcase/2016/jumia">Jumia Case
|
||
Study</a> - Push Notifications help Jumia reverse cart abandonment and
|
||
increase conversions by 9X.</li>
|
||
<li><a
|
||
href="https://developers.google.com/web/showcase/2016/konga">Konga Case
|
||
Study</a> - Konga cuts data usage 92% with new Progressive Web App.</li>
|
||
<li><a
|
||
href="https://developers.google.com/web/showcase/2016/suumo">Suumo Case
|
||
Study</a> - Japan’s top real estate site supercharges new listings with
|
||
web Push Notifications and sees a 31% open rate for notifications.</li>
|
||
</ul>
|
||
<h2 id="sample-progressive-web-apps">Sample Progressive Web Apps</h2>
|
||
<ul>
|
||
<li><a href="https://pwa.rocks/">PWA.rocks</a> - A showcase of several
|
||
progressive web apps, collected by the <a
|
||
href="https://twitter.com/ODevRel">Opera Dev Relations team</a>.</li>
|
||
<li><a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a></li>
|
||
<li><a href="https://aerotwist.com/blog/guitar-tuner/">Guitar
|
||
Tuner</a></li>
|
||
<li><a href="https://voice-memos.appspot.com/">Voice Memos</a></li>
|
||
<li><a href="https://react-hn.appspot.com/">Hacker News</a></li>
|
||
</ul>
|
||
<h2 id="specific-technologies">Specific Technologies</h2>
|
||
<h3 id="service-workers">Service Workers</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/TalAter/awesome-service-workers/">Awesome
|
||
Service Workers</a> - A curated collection of the finest service worker
|
||
resources.</li>
|
||
</ul>
|
||
<h3 id="cachestorage-api">CacheStorage API</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://medium.com/@addyosmani/offline-storage-for-progressive-web-apps-70d52695513c">Offline
|
||
Storage for Progressive Web Apps</a> - The current state of offline
|
||
storage in the browser</li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Cache">CacheStorage
|
||
API</a> - API docs, and sample code from Mozilla.</li>
|
||
</ul>
|
||
<h3 id="background-sync">Background Sync</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/updates/2015/12/background-sync">Introducing
|
||
Background Sync</a> - A gentle introduction to background sync, along
|
||
with some great videos and code samples.</li>
|
||
<li><a
|
||
href="https://github.com/WICG/BackgroundSync/blob/master/explainer.md">Background
|
||
Sync Explained</a> - The official “explainer” document for background
|
||
sync, including one-off synchronization and periodic
|
||
synchronization.</li>
|
||
<li><a href="https://wicg.github.io/BackgroundSync/spec/">Background
|
||
Sync Spec</a> - The WIP spec for Background Sync.</li>
|
||
</ul>
|
||
<h3 id="push-notifications">Push Notifications</h3>
|
||
<ul>
|
||
<li><a href="http://caniuse.com/#feat=push-api">Can I Use - Push API</a>
|
||
- Up-to-date browser support table of Push API.</li>
|
||
<li><a
|
||
href="https://www.chromestatus.com/feature/5480344312610816">Chrome
|
||
Platform Status - Web Notifications</a> - Implementation status for
|
||
Chrome and other browsers.</li>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/getting-started/push-notifications/?hl=en">PWA
|
||
Dev Summit 2016 codelab - Push Notifications</a> Up-to-date getting
|
||
started tutorial for Progressive Web App, Push Notifications and service
|
||
worker basics.</li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using
|
||
the Push API</a> - An article introducing Push API.</li>
|
||
<li><a href="https://github.com/web-push-libs">web-push-libs</a> - A
|
||
collection of useful libraries for web push in different technologies
|
||
(Node.js, PHP, Python, etc.)</li>
|
||
</ul>
|
||
<h3 id="indexeddb">IndexedDB</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en/docs/Web/API/IndexedDB_API">IndexedDB
|
||
API</a> - API docs, key concepts, and sample code from Mozilla.</li>
|
||
</ul>
|
||
<h3 id="installable-web-apps">Installable Web Apps</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en">Increasing
|
||
Engagement with Web App Install Banners</a> - An intro to App Install
|
||
Banners and making sure Chrome offers your web app to your users.</li>
|
||
<li><a
|
||
href="https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android">Installable
|
||
Web Apps with the Web App Manifest in Chrome for Android</a> - An
|
||
introduction to installable Web Apps in Chrome for Android.</li>
|
||
</ul>
|
||
<h4 id="app-icons">App Icons</h4>
|
||
<ul>
|
||
<li><a href="http://realfavicongenerator.net/">RealFaviconGenerator</a>
|
||
- A great way to generate all the images, favicons, and associated files
|
||
needed to display your app icon across different browsers.</li>
|
||
<li><a
|
||
href="https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html">Android
|
||
Asset Studio - Launcher Icon Generator</a> - Generate Android style
|
||
icons.</li>
|
||
</ul>
|
||
<h3 id="web-share-apis">Web Share APIs</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/updates/2016/10/navigator-share">Introducing
|
||
the Web Share API</a> - High level introduction to the Web Share
|
||
API.</li>
|
||
<li><a
|
||
href="https://github.com/WICG/web-share/blob/master/docs/explainer.md">Web
|
||
Share API explainer</a> - An explanation of the API, along with some
|
||
examples. Part of the proposal doc.</li>
|
||
<li><a href="https://github.com/WICG/web-share-target">Web Share Target
|
||
API</a> - The proposal for the Web Share Target API, as well as a high
|
||
level <a
|
||
href="https://github.com/WICG/web-share-target/blob/master/docs/explainer.md">explainer</a>.</li>
|
||
</ul>
|
||
<h2 id="awesome-performance">Awesome Performance</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/performance/">Web
|
||
Fundamentals - Performance</a> - Google’s performance learning portal,
|
||
containing a wealth of knowledge on optimizing your web apps for
|
||
perfomance.</li>
|
||
<li><a
|
||
href="https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/">Introducing
|
||
RAIL: A User-Centric Model For Performance</a> - The seminal
|
||
introduction to RAIL by the Gang of Pauls.</li>
|
||
<li><a href="https://udacity.com/ud884">Website Performance
|
||
Optimization</a> - A free Udacity course on optimizing websites for
|
||
speed.</li>
|
||
<li><a href="https://udacity.com/ud860">Browser Rendering
|
||
Optimization</a> - A free Udacity course helping you create web apps
|
||
that maintain jank-free 60fps performance.</li>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/performance/prpl-pattern/">The
|
||
PRPL Pattern</a> - A new pattern for structuring and serving Progressive
|
||
Web Apps, with an emphasis on performance.</li>
|
||
<li><a
|
||
href="https://developers.google.com/web/fundamentals/performance/rendering/">Browser
|
||
Rendering Performance</a> - Understand how HTML, JavaScript and CSS is
|
||
handled by the browser, and how to optimize your page accordingly.</li>
|
||
</ul>
|
||
<p><a
|
||
href="https://github.com/TalAter/awesome-progressive-web-apps">progressivewebapps.md
|
||
Github</a></p>
|