Progressive Web Applications For Production In 1-2-3 (Part 2)
Part two of a three-part intensive, hands-on course in building a PWA.
About The Session
See Part One.
In Part Two, we take the latest version of the awesome Workbox library to see how easy is to automate all the offline-ready functionality we need for PWA while still keeping a full control on the service worker behavior.
- What are the cons and challenges of the manually written service workers
- Introducing Workbox
- Automating application shell lifecycle: from building to serving
- Organizing a proper UX for the app update
- Runtime caching: strategies
- What is background sync and how to implement it using Workbox
- Proper registration of Workbox in your app
Message from Max for those who will attend: “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.
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:
- Customer Journey Mapping: Where UX and Marketing Meet
Paul Boag on Aug 13, 2019 .
- Towards Ethics & Privacy By Default, A Live Conversation
Vitaly Friedman on Jul 24, 2019 .
- Email Coding Guidelines
Rémi Parmentier on Jul 23, 2019 .
- The Web of Things — The Story Of A Browser Escaping Into The Physical World
Sebastian Golasch on Jul 16, 2019 .
- Inspired Design Decisions #3: Inspired By Ernest Journal
Andrew Clarke on Jul 11, 2019 .
- The Power Of Digital People
Kristina Podnar on Jul 9, 2019 .
- UX Optimizations For Keyboard-Only And Assistive Technology Users
Aaron Pearlman on Jul 3, 2019 .