Skip to main content

Progressive Web Apps

Image
By

Deliver amazing user experience for WEB

Introduction


Progressive Web Apps (PWA) are user experience that reach for web. Its useful to users from the very first visit with no installation required. As the user spends more time with the web app it becomes more and more powerful, It loads quickly even on slower networks. Can have offline support, push notification, icon on home screen, full screen support. PWA are:
  • Reliable - load instantly even on slower/uncertain network.
  • Fast - Respond quickly to user interactions
  • Engaging - Feel like natural app on device with amazing user experience.

Reliable

When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state. A service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.

Fast

Users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces. Check more on Performance

Engaging

Progressive Web Apps are installable and live on the user's home screen, without the need for an app store. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications. The Web App Manifest allows you to control how your app appears and how it's launched. You can specify home screen icons, the page to load when the app is launched, screen orientation.

Service worker:

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Screen Shot 2017-05-31 at 10.19.19 AM

Service worker is proxy between our APP and Network, its has control for our incoming and outgoing secure network request as well as our browser cache. It helps how app should behave when its offline, should use cache. Check various browser supporting service worker status here. Most of the part of our app is unchanging. The dynamic content is changed using API requests. So ideally we would like to tell the browser to hold onto that unchanging content of our app to prevent extra requests and to speed up rendering. This is where Service Workers come in. Using Service Workers we can explicitly tell the browser: “I want you to hold static content (JavaScript, CSS & HTML) until i tell you”. This allows the browser to use our application shell by default. Instead of requesting the resources from the network, we use the cache every time even when there is no network connection. This in turn speeds up our app startup and allows our app to work better offline.

Sample Application

We will create simple Angular application. Will use Service worker to make app lightning fast, have offline capability, cache static content, caching runtime calls with Network First strategy. Create application using Angular CLI, "ng new my-app" is command to create default application. Enable the service worker by making following changes in index.html file. Add below code bottom of file exactly before "</body>" tag.

  Screen Shot 2017-05-31 at 12.59.45 PM.png

Create blank "service-worker.js" file in src folder. Add following entry in "angular-cli.json"

  Screen Shot 2017-05-31 at 1.45.47 PM.png

Serve the app using "ng serve" command.

  Screen Shot 2017-05-31 at 1.48.44 PM.png


Open chrome developer

  Screen Shot 2017-05-31 at 1.49.10 PM.png


Here we can see Service Worker is successfully installed. Browser will always use this copy, if there is change browser will re-install service-worker.js. Now service worker is successfully installed, we can write logic for caching. But writing logic is complex and needs to handle various scenarios. To avoid this complexity Google Developer has created small library SW Precache on top of Service Worker to create some of useful offiline patterns. SW Precache is a build time tool that looks at our generated static (JS, CSS and HTML) and generates a Service Worker file for us. This generated Service Worker contains a hash specifically for each file in that build for the browser to cache and use even when offline. In subsequent builds the hash changes which causes the browser to request the updated files. Now Build the project : "ng build --prod", this command will compile code and put in dist folder which can deploy and serve as angular app.

  Screen Shot 2017-05-31 at 5.06.03 PM.png

Install SW Precache: "npm install  --save-dev sw-precache" We need to add couple of npm scripts to our project, make following changes to package.json.

Screen Shot 2017-05-31 at 2.27.43 PM.png

Create "sw-precache-config.js" file and add below content. More details on every attribute can be found here.

  Screen Shot 2017-05-31 at 2.29.00 PM.png

Now lets run our npm command "npm run sw"  Screen Shot 2017-05-31 at 2.24.15 PM.png

If we look in our generated Service Worker in our dist directory we should see some generated code. If we look through it we can get a idea of how the code is handling all the cache logic for our application. Copy the dist content to any HTTP sever and open in browser.


  Screen Shot 2017-05-31 at 2.35.09 PM.png

Goto chrome developer tool -> Application and select offline mode, Reload the page, All the content will be served using service-worker from cache.

  Screen Shot 2017-05-31 at 2.38.13 PM.png

Now we will add more functionality to this Angular APP, we will create page (as a default route) which will display list of mobiles. Copy app & assets folder from GIT to app folder. App folder contains below set of files -
  • app.component.html
  • app.component.ts
  • app.module.ts
  • app.routes.ts
  • app.service.component.ts
  • mobiles.component.html
  • mobiles.component.ts
Previously we had cached the static content, we will add some changes for runtime-caching, we will cache service request based on strategy. Make runtime caching changes in "sw-precache-config.js".

  Screen Shot 2017-05-31 at 4.33.46 PM.png

Above runtime caching config is caching url with pattern "../api/..". If network is available it will be served from network otherwise served from cache. Form more info on handlers click here.

As we are using bootstrap styles add bootstrap dependencies. Add "bootstrap": "^3.3.7" in devDependencies section in package.json

 Screen Shot 2017-05-31 at 4.25.45 PM.png


 Add bootstrap style in angularcli.json also.

  Screen Shot 2017-05-31 at 4.27.50 PM.png

Now build the application "ng build --prod" Make service worker changes "npm run sw" Copy the dist folder to your http-server and open in browser.

  Screen Shot 2017-05-31 at 4.32.26 PM.png

Goto chrome developer tool -> Application and select offline mode, Reload the page, All the content will be served using service-worker from cache.

  Screen Shot 2017-05-31 at 4.52.27 PM.png

The xhr request over network has failed and its served from cache using service worked.

Source code for sample application is on GIT



Useful links



Cheers – Happy learning 🙂

Ketan Gote
Labels:

Comments

Post a Comment

Popular posts from this blog

Centralized configuration using Spring Cloud Config

By
In this blog we will be focusing on centralized configuration using  Spring Cloud Config  project. For single standalone application we can keep all required configuration bundle with application itself.  However, when we have more than one application, say in a microservice architecture, a better alternative would be to manage the configurations centrally. With the Config Server we have a central place to manage external properties for applications with support for different environments. Configuration files in several formats like YAML or properties are added to a Git repository. Features Spring Cloud Config Server features: HTTP, resource-based API for external configuration (name-value pairs, or equivalent YAML content) Encrypt and decrypt property values (symmetric or asymmetric) Embeddable easily in a Spring Boot application using  @EnableConfigServer Config Client features (for Spring applications): Bind to the Config Server and initialize...
Post a Comment
Read more

Redis Basic CRUD

By Anonymous
We have seen how to setup on your linux machine here , now we will see how to perform basic CRUD operations using Spring Data & Redis server We will be creating a simple application that would persist an employee information into redis database. You will be needing certain JARs like jedis.jar, spring-data-redis.jar etc details of which you can download and view at https://github.com/meta-magic/RedisCRUDexample.git  First of all we will be creating the Employee entity, plz note that we are using the Serializable interface which automatically mapps the objects against the key. Employee.java import java.io.Serializable ; public class Employee implements Serializable { private static final long serialVersionUID = - 8243145429438016231L ; public enum Gender { Male , Female } private String id; private String name; private Gender gender; private int age; public String getId () { return id; } public void setId ( Str...
Post a Comment
Read more

Eureka-Server with spring cloud netflix

By
In this write-up we will focus on Service Registry – Eureka Server Rest service (auth-service application, eureka client) which register itself to registry. Web application which consumes Rest service using service registry. Service discovery  allows services to find and communicate with each other without hardcoding hostname and port. Eureka Server In spring-boot application enable the Eureka-Server by adding @EnableEurekaServer annotation to spring boot application. We have put all the configuration on GIT and this is accessed using config-server. To now more about centralized configuration (config-server) click  here eurekaserver.yml Place below bootstrap.yml in application, it basically connects to config-server and gets it required configuration. Start the spring-boot application and access eureka server using http://localhost:8760/ you will get below screen. Right now there is no application which...
Post a Comment
Read more