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/…
…server/acorn-6.4.1

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

Files

Permalink
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
README.md Update README and slides Oct 29, 2019

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.