rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jonas Zeunert
2025-07-18 23:13:11 +02:00
parent c9485bf576
commit 652812eed0
2354 changed files with 1266414 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
html/progressivewebapps.md2.html Normal file
View File

@@ -0,0 +1,255 @@
<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>
&gt; 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.
&gt; &gt; – <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 &amp; 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 &amp; 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>