Skip to main content Jump to list of all articles

Progressive Web Applications For Production In 1-2-3 (Part 1)

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.

About The Session

  • Speaking: Maxim Salnikov
  • Date:

Part 2 of Max’s PWA course will take place on 23 April. Register here (password: pwa2daMax).

This video course contains three chapters allowing you to start from scratch and end up with the production-ready PWA. During these intensive, hands-on lessons, Maxim will guide you through the code and share lots of best practices and tips and tricks. A basic knowledge of JavaScript is required.

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
cd pwa-for-production
git checkout part-1-init
serve

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 install
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

Maxim Salnikov is Oslo-based Web Full-Stack Engineer, a Google Developer Expert in Web Technologies & IoT, and a Microsoft MVP in Development Technologies. He architects complex web applications since the end of the last century and has extensive experience with all aspects of web platform focusing on the apps managing real-time data from IoT devices and Progressive Web Apps. Maxim is a founder and active contributor to two conferences: Mobile Era and ngVikings — Nordics’ main conferences for mobile and Angular developers respectively. Also, he leads Norway’s largest meetups dedicated to web front-end and mobile: Angular Oslo, Mobile Meetup, Oslo PWA. Maxim is passionate about sharing his web platform experience and knowledge with the community. He travels extensively for visiting developers events and speaking/training at conferences and meetups around the world.
← Back to the overview
Smashing TV, a brand new Hollywood blockbuster with webinars and live sessions for web designers and developers.

What’s Smashing TV?

Smashing TV is a brand new series of webinars and live streams packed with practical tips for designers and developers. Not just talks — conversation with “show-me-how-you-work”-sessions. Smashing Members can download recordings, too.

Think of it as some sort of a Hollywood blockbuster with cats. Just better, because it’s for people like you. Check upcoming webinars.

Previous Webinars

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:

View upcoming webinars ↬