A selection of Progressive Web Apps
HTML JavaScript CSS
Latest commit bc1547e Jan 5, 2017 @andreasbovens andreasbovens Merge branch 'master' of https://github.com/pwarocks/pwa.rocks into s…
…napwat-test

# By Ismael González Trujillo
* 'master' of https://github.com/pwarocks/pwa.rocks:
  Add English Accents Map (#152)

# Conflicts:
#	src/index.html

README.md

List of Progressive Web Apps Build status

What is a progressive web app? See the “Progressive Web Apps” talk by Alex Russell and Andreas Bovens.

Contributing

We’re happy to feature other nice-looking progressive web apps in the list. They should:

  • Be served over HTTPS.
  • Have a manifest with a short_name and name, start_url, and a PNG icon of at least 144×144 pixels.
  • Have a service worker (making sure that the start_url functions offline).

This combination of features will trigger the web app install banner in Opera and Chrome (to trigger it on the first visit, we recommend enabling Bypass user engagement checks option in chrome:flags or opera:flags), unless the site is intercepting onbeforeinstallprompt. In the latter case, the banner is triggered at a custom point in time, defined by the site’s own logic.

How to Suggest an App

  • Fork this repository.
  • Create a branch, name it after your app.
  • Add an icon (preferably SVG) to the apps folder.
  • Add an entry to the src/index.html file:
<a class="list__item app js-app"
        href="URL"
        data-app="ID"
        data-tags="TAGS">
    <div class="app__wrapper">
        <h2 class="app__title">
            TITLE
        </h2>
    </div>
    <style>
        [data-app='ID'] {
            color: COLOR;
            background: currentColor url(apps/ID.svg) 50% 50% / 50% auto no-repeat;
            }
    </style>
</a>
  • Test it locally by opening the src/index.html file in your browser.
  • Commit all changes to your app branch and create a pull request.

Development

  • Fork this repository.
  • Create a branch, name it after the feature you’re implementing.
  • Clone it locally and start making changes.
  • Test it locally by opening the src/index.html file in your browser.
  • Commit all changes to your feature branch and create a pull request.

For full-scaled development and testing you can use the build system:

  • npm run server for the dev server and light build.
  • npm run build for the full build with caching.