{"id":46866,"date":"2017-03-03T12:09:04","date_gmt":"2017-03-03T06:39:04","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=46866"},"modified":"2017-03-03T12:58:41","modified_gmt":"2017-03-03T07:28:41","slug":"excerpts-from-training-on-progressive-web-app","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/excerpts-from-training-on-progressive-web-app\/","title":{"rendered":"Excerpts From Training On Progressive Web App"},"content":{"rendered":"

Progressive Web App (PWA) is the future of the web and mobile development. Recently some of my colleagues\u00a0(Ravi Tiwari, Smriti Chawla) and I<\/strong>\u00a0got this golden opportunity to attend a training at\u00a0Google<\/span>‘s office in\u00a0<\/b>Bangalore. <\/span><\/p>\n

\"IMG_20170221_152205\"<\/p>\n

(From the left: Rajendra Prasad, Ravi Tiwari and Smriti Chawla)<\/p>\n

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.<\/p>\n

A total of 50 developers attended the training.\u00a0<\/span>They were\u00a0from different sectors and companies which included start-ups and brands both alike.<\/p>\n

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.\u00a0<\/span><\/p>\n

Below are the session highlights:\u00a0<\/b><\/p>\n

The first session was outlining the importance of building Progressive Web App. <\/strong>We learned various features such as\u00a0service workers, Index DB, App Shell & Push notifications. It becomes very easy to run applications in offline mode with\u00a0all these features.<\/span><\/p>\n

Followed by this, we had a session on advancements in Responsive design. <\/strong>While we all know that CSS3 media queries help to build a responsive website writing different\u00a0viewport for various\u00a0devices, there is another advancement which most people don’t know. Instead of\u00a0writing multiple media qu<\/em>eries, there is calc() <\/b>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.\u00a0<\/span><\/p>\n

We also got insights on optimizing responsive images. <\/b>We learned that\u00a0HTML5 based <\/span><picture><\/b> helps us to load distinct images for different viewports. An appealing feature\u00a0of the picture element is that it can detect both device and resolution. It gives us the flexibility to write image <\/span>srcset<\/b> and <\/span>media queries<\/b>. The picture element comes\u00a0natively with HTML5 and will surely be more popular in coming times.\u00a0<\/span><\/p>\n

The session on Service Workers helped us to understand features of service workers.<\/strong>\u00a0Service 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,\u00a0it helps to cache the elements in a browser which can run in an offline mode. Service worker is a\u00a0replacement of HTML5 Application Cache.<\/span><\/p>\n

We also learned various other things during the training such as: <\/b><\/p>\n

Fetch & Promises<\/b> : Fetch() API provides us flexibility to make network requests similar to XMLHttpRequest. Fetch API use promises enabling simpler and cleaner APIs.\u00a0<\/span><\/p>\n

Lighthouse<\/strong>: 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.<\/span><\/p>\n

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.<\/span><\/strong><\/p>\n

Push Notification:<\/strong>\u00a0We also got insights about push notifications and how to create better push notifications with native HTML5.\u00a0<\/span><\/p>\n

Overall, it was a fun event with a lot of knowledge sharing on both the days. We also got an\u00a0opportunity to practice\u00a0in 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.<\/p>\n","protected":false},"excerpt":{"rendered":"

Progressive Web App (PWA) is the future of the web and mobile development. Recently some of my colleagues\u00a0(Ravi Tiwari, Smriti Chawla) and I\u00a0got this golden opportunity to attend a training at\u00a0Google‘s office in\u00a0Bangalore. (From the left: Rajendra Prasad, Ravi Tiwari and Smriti Chawla) The training was conducted by industry experts and professional trainers. It was […]<\/p>\n","protected":false},"author":876,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":6,"footnotes":""},"categories":[1],"tags":[4444,4493,4118,2591],"class_list":["post-46866","post","type-post","status-publish","format-standard","hentry","category-technology","tag-application-development","tag-backend-development","tag-frontend-development","tag-technology-2"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t