Why PWA needs your Attention?

Progressive Web App (PWA) is a web application that loads like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications.

It was Frances Berriman and Alex Russell proposed the concept of PWA in 2015.

A progressive web App is a combination of a responsive website and an app. It is built using the modern front end web development technologies – HTML, CSS, and JavaScript to provide web users an app-like experience. – Front-End Development Services

Because of the advancement of technology, the original web pages that are unfriendly to the mobile terminal can finally find the opportunity to regain the market on the small-screen mobile terminals such as mobile phones and tablets, just like mobile apps.

We know anything that can exist and develop in this world always has its specific and practical purposes. Otherwise, why do we humans call ourselves rational creatures? The reason why PWA proposed, exists and developing, the core is that it has its own unique characteristics compared with the Native or Hybrid App.

PWA Core Features

  • Concise beauty: a web page, be responsive to all terminals, no need to repeat development and construction, in line with “Occam razor principle” – More things should not be used than are necessary;
  • Economical: Whether it is a Native App or Hybrid App, the complexity of APP development, the torture of submitting, the tedious tasks of daily management, the difficulty of promotion… We all know the APP’s success rate. And PWA? You only need to add the corresponding function on the original website or on the newly designed web page. The page is still that page, but the app is no longer the app;
  • Practicality: PWA has no special requirements for the website framework or back-end program because JavaScript and JSON are the only two aspects for PWA. Just apply the function of PWA and add them to the program will be the all, you don’t have to re-establish the development team for the mobile side;
  • Everything is available: PWA gets the core traits of APP, such as independence connection, discover-ability, security, notifications, and so on.

Progressive Web App core technology

  1. Service Worker: The core component of the PWA function, the control and bearer of the main APP functions;
  2. App Manifest: A JSON format file that is responsible for installing PWA like an APP to the mobile side;
  3. Push API: Allows web applications to have the ability to receive servers and push messages (message push inside Web App);
  4. Notifications API: Allows web applications to display system notifications to users;
  5. Background Sync: Delays in sending user behaviour until the user’s network connection is stable.

A few paragraphs of code demo

// register service worker
If ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("sw.js").then(function() {
    Console.log("SW registered");
  });
}

// Manifest JSON
{
  "name": "Eloquence Training APP",
  "short_name": "Eloquence APP",
  "theme_color": "#f3bf21",
  "background_color": "#007bff",
  "display": "standalone",
  "Scope": "/",
  "start_url": ".",
  "icons": [
    {
      "src": "./images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "./images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Application of PWA

PWA has only been proposed for two or three years since its conception, but many well-known companies in the world have joined the PWA camp. Among them are:

The author also recently developed an application using PWA technology, which is an online version of “54 Poker Training Eloquence” (mobile trigger event to be improved): Eloquence Training APP

Summary

Progressive Web App is a technology synthesis that Google has created to take advantage of the special advantages of web pages and continue to function in mobile internet. The web page is the original creation and the most pure embodiment of the inner spirit of the internet, carrying the development history. Under the historical reality that the mobile growing, PWA utilizes the terminal adaptation and mobile APP of the web page, giving the web page a second life, which is definitely a legend of web page technology. PWA will break out in the next year or two and will be a hot potato in the internet world. For further information please contact us.

Scroll to Top