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:
- Privacy UX
Vitaly Friedman on Dec 3, 2019 .
- Encouraging Clicks Without Shady Tricks
Paul Boag on Nov 28, 2019 .
- Translating Design Wireframes Into Accessible HTML/CSS
Harris Schneiderman on Nov 20, 2019 .
- Building Effective Cross-Cultural Teams
Emma Wedekind on Nov 14, 2019 .
- Inclusive Components With Heydon Pickering
Heydon Pickering on Nov 7, 2019 .
- Selling Design Systems
Ben Callahan on Oct 29, 2019 .
- Technical SEO For Single Page Apps
Martin Splitt on Oct 8, 2019 .