Progressive Web Apps with Angular

Learn how Angular.js works with Progressive Web Apps out of the box
09 August

Hype.Codes continues to introduce the PWA to our readers.

Progressive Web Apps (PWA) was announced by Google in 2015. This format of creating mobile websites attracted attention due to the relative ease of development and almost instantaneous interaction with the user. As early as May 2016, at the Google I / O Developer Conference, The Washington Post demonstrated its mobile hybrid site-application.

What is PWA? You can perceive this as a site built using web technologies, but which interacts with the user as an application. The advances in the development of browsers, cache and Push-interfaces allowed installing the application on the home screen directly from the browser, receiving pop-up notifications and even working offline.

In this video, you will learn about the PWA features of Angular.

AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Angular is a platform for building apps with the web, and supports Progressive Web Apps out of the box. Learn how Angular's tools enable you to increase engagement with faster loads, offline access, and push notifications through progressive enhancement of your mobile web apps.

What is Puppeteer?

Short overview of Chrome team developed Node library which provides a high-level API to control headless Chrome over the DevTools Protocol
17 October

Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome.

What can it do? 

Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:

  • Generate screenshots and PDFs of pages.
  • Crawl a SPA and generate pre-rendered content (i.e. "SSR").
  • Scrape content from websites.
  • Automate form submission, UI testing, keyboard input, etc.
  • Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features.
  • Capture a timeline trace of your site to help diagnose performance issues. 

The goals of the project are simple:

  • Provide a slim, canonical library that highlights the capabilities of the DevTools Protocol.
  • Provide a reference implementation for similar testing libraries. Eventually, these other frameworks could adopt Puppeteer as their foundational layer.
  • Grow the adoption of headless/automated browser testing.
  • Help dogfood new DevTools Protocol features...and catch bugs!
  • Learn more about the pain points of automated browser testing and help fill those gaps.

Project is maintained by Chrome DevTools team. Learn more at GitHub and try it out on official website.