Skip to content
Workshop on how to transform a simple web app in a PWA
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

daquinoaldo Merge pull request #2 from daquinoaldo/dependabot/npm_and_yarn/3-ssr/…

Bump acorn from 6.3.0 to 6.4.1 in /3-ssr/server
Latest commit 2d939a9 Mar 15, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml Oct 29, 2019
0-skeleton Fixes and typos Oct 30, 2019
1-pwa Fixes and typos Oct 30, 2019
2-location Bump acorn from 6.3.0 to 6.4.1 in /2-location/utils Mar 14, 2020
3-ssr Bump acorn from 6.3.0 to 6.4.1 in /3-ssr/server Mar 14, 2020
slides Update README and slides Oct 29, 2019
LICENSE Initial commit Apr 12, 2019 Update README and slides Oct 29, 2019

PWA from scratch - Oct 30, 2019 @ GATE Pisa

I created this repository for a workshop during the GDG DevFest Pisa 2019 and then I extended it for a more in-depth talk.

The aim is to transform an existent weather website into a PWA.

The codelab is organized in four steps, divided in 4 folders on this repo.

  • 0-skeleton: the weather website.
  • 1-pwa: adds the service worker, the manifest and some headers for Apple/MS devices.
  • 2-location: uses the location permissions.
  • 3-ssr: server side rendering.

How to

  • Download the repository: git clone
  • Copy the 0-skeleton folder to a working folder to preserve the original one.
  • Follow the steps in 0-skeleton/
  • Continue the tutorial following the README in each step.

Useful links

  • https-localhost: use it to test your PWA on localhost over an https connection.
  • blog-pwa: a PWA for a WordPress blog. It is a concrete example of the power of PWAs, applied to a more popular and useful use case. Live demo.
  • What Web Can Do Today: a curated list of permissions available through the browsers. Includes useful code examples.
  • Lighthouse: a powerful tool (built-in in Chrome dev tools) to test a PWA performance.
  • Google Developer page on PWAs: official PWA developer portal.

You can visit my portfolio at Here you can find my contacts if you need help!

Happy coding!

You can’t perform that action at this time.