Progressive Web Applications For Production In 1-2-3 (Part 1)
Part one of a three-part intensive, hands-on course in building a PWA: Motivation, Toolset, And Building A Minimum Viable PWA.
Enter password to watch:
About The Session
Part 2 of Max’s PWA course will take place on 23 April. Register here (password: pwa2daMax).
The agenda for part one:
- What is a PWA and what advantages does it provide?
- Browser APIs and specifications we use in PWA and compatibility chart
- Requirements for our Minimum Viable Product PWA
- Application shell architecture
- Service Worker and browser storage foundations
- Implementing a naive version of the application shell
- How to test Service Workers
- Making our app installable
Feel free to either just watch, or code along too!
Message from Max for those who will attend: “A message from the trainer. Folks who want to code/run/test together with me (this is optional) are welcome to do simple homework to save some time during the call.
- First, make sure you have Git, Node, NPM installed. Any modern version is fine.
- Then please upgrade your Chrome to the latest (or install it). I absolutely embrace the browser diversity - and it would be cool if you test our app in other browsers - but we’ll spend a lot of time in the DevTools, which are the best in Chrome for the moment.
- Install one global package - serve - by running “npm install serve -g”. This will be our local static webserver. If you want to use any other product you are welcome!
- Clone the repo and switch to the branch with the initial step we start from:
npm install serve -g
git clone https://github.com/webmaxru/pwa-for-production
git checkout part-1-init
The last command here is starting the “serve” server - I preconfigured it for you. Now open your browser on http://localhost:5000. You should see a simple SPA with “PWA For Production” title. That’s it! You are ready to go!
Tech background: the app we will use was built using Angular. But we don’t care about the framework at all during this (and all next) session - I checked in a production-ready build for you (in the dist folder), so we focus purely on the framework-agnostic code. But if you like (totally optional), you can build the app yourself using Angular CLI:
npm run build-pwa
That’s it! I can’t wait to see you soon! Any questions about the setup? My https://twitter.com/webmaxru is open for you!
Please note, we’ll use the Zoom platform for this webinar, for improved video quality.
Enter password to watch:
About The Speaker
We run practical sessions every week. No fluff, just actionable techniques and strategies for building and designing better experiences. Here are a few recent ones:
- Inspired Design Decisions: Inspired by Pressing Matters Magazine
Andrew Clarke on May 21, 2019.
- Developing And Designing For Privacy
Heather Burns on May 14, 2019.
- Deep Dive into WebPageTest
Patrick Meenan on May 7, 2019.Recording available.
- The How And Why Of Semantic HTML
Mandy Michael on Apr 30, 2019.
- The Fabulous And Groovy Vadim And Vitaly Video Show 2
Vadim Makeev, Vitaly Friedman on Apr 25, 2019.Recording available.
- Progressive Web Applications For Production In 1-2-3 (Part 2)
Maxim Salnikov on Apr 23, 2019.Recording available.
- Inspired By: Avaunt Magazine
Andrew Clarke on Apr 9, 2019.