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

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
0-skeleton
1-pwa
2-location
3-ssr
slides
LICENSE
README.md

README.md

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 https://github.com/daquinoaldo/PWA-workshop.
  • Copy the 0-skeleton folder to a working folder to preserve the original one.
  • Follow the steps in 0-skeleton/README.md.
  • 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 ald.ooo. Here you can find my contacts if you need help!

Happy coding!

You can’t perform that action at this time.