Excerpts From Training On Progressive Web App
Progressive Web App (PWA) is the future of the web and mobile development. Recently some of my colleagues (Ravi Tiwari, Smriti Chawla) and I got this golden opportunity to attend a training at Google‘s office in Bangalore.
(From the left: Rajendra Prasad, Ravi Tiwari and Smriti Chawla)
The training was conducted by industry experts and professional trainers. It was a 2-day training which was held on 20th and 21st Feb 2017.
A total of 50 developers attended the training. They were from different sectors and companies which included start-ups and brands both alike.
The sessions were very interactive with a lot of live demos and assignments. We learned various features of the progressive web app that can help in improving the performance of the web and mobile applications. The concept of PWA gives native feel to an application allowing it to run in an offline mode with easy installation.
Below are the session highlights:
The first session was outlining the importance of building Progressive Web App. We learned various features such as service workers, Index DB, App Shell & Push notifications. It becomes very easy to run applications in offline mode with all these features.
Followed by this, we had a session on advancements in Responsive design. While we all know that CSS3 media queries help to build a responsive website writing different viewport for various devices, there is another advancement which most people don’t know. Instead of writing multiple media queries, there is calc() function in CSS3 which can calculate element properties and can map the viewport. It can save a lot of development time, reduce code and boost the overall performance.
We also got insights on optimizing responsive images. We learned that HTML5 based <picture> helps us to load distinct images for different viewports. An appealing feature of the picture element is that it can detect both device and resolution. It gives us the flexibility to write image srcset and media queries. The picture element comes natively with HTML5 and will surely be more popular in coming times.
The session on Service Workers helped us to understand features of service workers. Service worker is a type of web worker which runs javascript in the background. It is a new feature which has an event-based script and it runs on a different thread. It incorporates events such as install, fetch and activate. Moreover, it helps to cache the elements in a browser which can run in an offline mode. Service worker is a replacement of HTML5 Application Cache.
We also learned various other things during the training such as:
Fetch & Promises : Fetch() API provides us flexibility to make network requests similar to XMLHttpRequest. Fetch API use promises enabling simpler and cleaner APIs.
Lighthouse: Lighthouse is a tool or extension which helps to analyze web apps and web pages. It is similar to google page speed which analyzes the performance of the application. Lighthouse provides multiple optimization metrics which can be useful to boost the PWA performance.
Index DB: IndexDB is a new feature of HTML5 which helps to store the structured data at the client-side. We can have key-pair value using IndexDB.
Push Notification: We also got insights about push notifications and how to create better push notifications with native HTML5.
Overall, it was a fun event with a lot of knowledge sharing on both the days. We also got an opportunity to practice in a live lab while attending the sessions giving us a clear picture about how PWA works and how to integrate it with existing projects. We also learned about the efforts Google is putting up on PWA by building a knowledge base around the same. It will be soon available to people.
