Tanaka Ryuu

Tanaka Ryuu

1559016989

Build progressive web applications with Angular

Progressive web apps are web applications built with technologies that make them behave like native apps. A benefit of progressive web apps is the ability to work smoothly when network coverage is unreliable. Also, unlike native apps, no installation is required, but they are faster than typical web apps. This article is not about what progressive web apps are and what they are not, it is about how you can build progressive web apps with Angular. You can read more about progressive web apps, here.

Getting started

To show you how to build progressive web apps with Angular, we will build a very simple website. When we are done, we will use the Lighthouse Chrome extension to test if our app is really progressive. You can also clone this project from GitHub.

Click on this link to see our progressive web app in action.

##Creating a new Angular Project To create a new Angular project via Angular CLI, you need to install Angular CLI on your machine, first. If Angular CLI is not installed on your machine yet, run the command below to install it globally.

//install Angular CLI
npm install -g @angular/cli

Once Angular CLI is globally installed, you can proceed to create a new project with it. By default Angular will generate test files which are of no use in our little project. In order to prevent this, we will add the --skip-tests flag to our command.

//create a new Angular project without test files.
ng new ng-pwa --skip-tests

##Web App Manifest A web app manifest is a simple JSON file which contains configurations that gives web applications the ability to be saved on user’s home screen. While also defining its appearance and behaviour when launched from the home screen. Web app manifest is a basic requirement for progressive web apps but can be used on any website. You can read more about web app manifest here.

To create a web app manifest for our app, navigate to the src/ folder and create a file named manifest.json in the root of the folder. Copy and paste the content below into the file.

// src/manifest.json
{
   "name": "Angular Progressive Web App",
   "short_name": "Ng-PWA",
   "start_url": "./",
   "theme_color": "#008080",
   "background_color": "#008B8B",
   "display": "standalone",
   "description": "A PWA that is built with Angular",
   "icons": [
       {
           "src": "/assets/images/icons/icon-16x16.png",
           "sizes": "16x16",
           "type": "image/png"
       },
       {
            "src": "/assets/images/icons/icon-32x32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-150x150.png",
            "sizes": "150x150",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-180x180.png",
            "sizes": "180x180",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
   ]

}

In our web app manifest, we defined the name that will be attached to our app icon on users’ home screen and a short_name that will replace it, in case it is too long. We also specified the landing page of the app, when launched from the home screen with start_url. The theme_colorspecifies the colour the browser UI will assume when users visit our site. The background_colorproperty controls the colour of the background on which our app icon will be displayed when users launch our app from their home screen. With display, you specify if the browser UI should be hidden or not when users visit your site.

We expect users to visit our site with different types of devices with different screen sizes, so there is need to make duplicates of your app icons in multiple dimensions. realfavicongenerator.net can help automate the process.

When you are done, go to the index.html file and add

<!-- src/index.html -->
...
<link rel="manifest" href="/manifest.json"> 
<meta name="theme-color" content="#008080">
...

to the head section.

The web app manifest will not be added to the build folder unless we instruct Angular to do so. We will do that by adding the manifest.json file to the assets array in apps section of .angular-cli.json file

// .angular-cli.json
...
"apps": [
    {
     ...
      "assets": [
       ...
        "manifest.json"
      ],
...

##Service Workers Service workers are the backbone of progressive web apps. Written in Javascript, they help cache important assets and files, so as to keep the downosaur at bay and make our app functional when the network coverage is unavailable or unreliable. Service workers can also intercept requests and manage responses from the server amid other things. You can read more about service workers here.

Creating a service worker in Angular is easy but not straightforward. This is because we need to build our app with webpack before pushing it to production and our service worker must be able to track and cache the build files. Thanks to sw-precache-webpack-plugin npm package, all we need to do is to install the package and configure it. We can then run a simple command that will auto-generate the service worker in the build folder.

Run the npm install command to install the package.

//install sw-precache-webpack-plugin as a development dependency
npm install --save-dev sw-precache-webpack-plugin

Once the package is installed, go to the app root and create a file named precache-config.js . Copy and paste the code below into the file.

// pre-cache.config.js

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

module.exports = {
    navigateFallback: '/index.html',
    navigateFallbackWhitelist: [],
    stripePrefix: 'dist',
    root: 'dist/',
    plugins:[
        new SWPrecacheWebpackPlugin({
            cacheId: 'ng-pwa',
            filename: 'service-worker.js',
            staticFileGlobs: [
                'dist/index.html',
                'dist/**.js',
                'dist/**.css'
            ],

        })
    ],
    stripePrefix: 'dist/assets',
    mergeStaticsConfig: true
};

The precache-config.js file configures the sw-precache-webpack-plugin using literal objects key-value pairs.

Angular as a front-end framework for building single page applications uses client-side URL routing and can, therefore, generate arbitrary URLs that are not cached by the auto-generated service worker. In such situations we’ll define an HTML entry the requested URL will be mapped to, and navigateFallback handles that. The HTML entry should be able to provide the desired resources (Our app is a SPA, and index.html is the entry point. It can handle arbitrary URLs) and must be among the files selected to be cached in the staticFileGlobs array. navigateFallbackWhitelist can be empty or contains a regex that defines the type/pattern of URL that navigateFallback will be used for.

To get a deeper understanding of how to configure sw-precache-webpack-plugin , read the documentation.

To finish the service worker setup, we will create a custom npm script/command that will be used to build our app and auto-generate the service worker file in the build folder. Go to the package.jsonfile and add the following to scripts

 // package.json
 ...
 "scripts": {
    ...
    "pwa": "ng build --prod && sw-precache --root=dist --config=precache-config.js"
  },
 ...

##The View We only have a single view, since our primary focus is on the process of building progressive web apps with Angular.

<!-- src/app/app.component.html -->

<div class="container">
  <h1>
    A Progressive Web App Built with Angular.
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" alt="Angular logo">

  <h2>Get Started With Progressive Web Apps: </h2>
  <ul>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Workers</a></h4>
    </li>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/web-app-manifest/">Web App Manifest</a></h4>
    </li>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/">Code Lab (PWA)</a></h4>
    </li>
  </ul>

</div>

The rel="noopener attribute is essential in progressive web apps if the anchor element’s targetattribute is set to _blank for security and performance reasons. Read more.

Below is the CSS code

/* src/styles.css */

body{
    background-color: teal;
}

.container{
    text-align: center;
}

ul{
    list-style: none;
}

h1, h2, a {
    color: white;
}

##Hosting The service worker is the heart beat of any progressive web app. However for the service worker to work fine, our app must be served over a secure connection. Hence, we will be deploying our app to Firebase because, apps hosted on Firebase are served over a secure connection. You will be walked through the steps. However, if you want learn in details how to deploy Angular apps to Firebase, check out this article by Chris.

To get started, visit firebase.google.com. If you don’t have an account already, create one to have access to the console. From the console, create a new Firebase project.

Once a new Firebase project has been created, go to the command terminal and navigate to your progressive web app folder. Run npm install -g firebase-tools to install firebase-tools globally. The firebase-tools package will allow us to test run and deploy apps to Firebase from the command terminal.

When the installation is complete, we need to build our app in preparation to deploy. To build our Angular app and auto-generate the service worker, run npm run pwa. This runs a custom script we created earlier, and makes our app production-ready.

Time to introduce Firebase to our app. Run firebase login command to login to Firebase. Run firebase init command to initialize Firebase in the project. Then answer the questions as follows:

  • Are you ready to proceed? (Y/n) = Y
  • Which Firebase CLI features do you want to setup for this folder? = Hosting
  • Select a default Firebase project for this directory = Your-Firebase-Project-Name
  • What do you want to use as your public directory? = dist
  • Configure as a single-page app (rewrite all urls to /index.html)? (y/N) = Y
  • File dist/index.html already exists. Overwrite? (y/N) = N

Our app is ready to be deployed. Run firebase deploy to deploy the app to Firebase.

Finally, run firebase open hosting: site to see our shiny new app in action.

##Lighthouse PWA Test Lighthouse is a Chrome extension made by Google. It can be used to test how compliant a progressive web app is to the progressive web app standard, in addition to other tests. The highest score is 100% and the PWA score for this app is 91% (There is room for improvement, obviously).

Conclusion

Progressive web apps are apps of the future because they provide users with an experience similar to that of native apps. However, PWAs are lighter and much more flexible. No doubt that Angular is one of the most popular front-end frameworks out there. Hopefully the relative ease of building progressive web apps with Angular as demonstrated in this article will encourage more Angular/front-end developers to make their apps progressive. Thank you.

#angular

What is GEEK

Buddha Community

Build progressive web applications with Angular
Roberta  Ward

Roberta Ward

1595344320

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill.

Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public places are shut down, the country’s economy is suffering, human health is on stake, people are losing their jobs and nobody knows how worse it can get.

Since most of the places are on lockdown, and you are working from home or have enough time to nourish your skills, then you should use this time wisely! We always complain that we want some ‘time’ to learn and upgrade our knowledge but don’t get it due to our ‘busy schedules’. So, now is the time to make a ‘list of skills’ and learn and upgrade your skills at home!

And for the technology-loving people like us, Knoldus Techhub has already helped us a lot in doing it in a short span of time!

If you are still not aware of it, don’t worry as Georgia Byng has well said,

“No time is better than the present”

– Georgia Byng, a British children’s writer, illustrator, actress and film producer.

No matter if you are a developer (be it front-end or back-end) or a data scientisttester, or a DevOps person, or, a learner who has a keen interest in technology, Knoldus Techhub has brought it all for you under one common roof.

From technologies like Scala, spark, elastic-search to angular, go, machine learning, it has a total of 20 technologies with some recently added ones i.e. DAML, test automation, snowflake, and ionic.

How to upgrade your skills?

Every technology in Tech-hub has n number of templates. Once you click on any specific technology you’ll be able to see all the templates of that technology. Since these templates are downloadable, you need to provide your email to get the template downloadable link in your mail.

These templates helps you learn the practical implementation of a topic with so much of ease. Using these templates you can learn and kick-start your development in no time.

Apart from your learning, there are some out of the box templates, that can help provide the solution to your business problem that has all the basic dependencies/ implementations already plugged in. Tech hub names these templates as xlr8rs (pronounced as accelerators).

xlr8rs make your development real fast by just adding your core business logic to the template.

If you are looking for a template that’s not available, you can also request a template may be for learning or requesting for a solution to your business problem and tech-hub will connect with you to provide you the solution. Isn’t this helpful 🙂

Confused with which technology to start with?

To keep you updated, the Knoldus tech hub provides you with the information on the most trending technology and the most downloaded templates at present. This you’ll be informed and learn the one that’s most trending.

Since we believe:

“There’s always a scope of improvement“

If you still feel like it isn’t helping you in learning and development, you can provide your feedback in the feedback section in the bottom right corner of the website.

#ai #akka #akka-http #akka-streams #amazon ec2 #angular 6 #angular 9 #angular material #apache flink #apache kafka #apache spark #api testing #artificial intelligence #aws #aws services #big data and fast data #blockchain #css #daml #devops #elasticsearch #flink #functional programming #future #grpc #html #hybrid application development #ionic framework #java #java11 #kubernetes #lagom #microservices #ml # ai and data engineering #mlflow #mlops #mobile development #mongodb #non-blocking #nosql #play #play 2.4.x #play framework #python #react #reactive application #reactive architecture #reactive programming #rust #scala #scalatest #slick #software #spark #spring boot #sql #streaming #tech blogs #testing #user interface (ui) #web #web application #web designing #angular #coronavirus #daml #development #devops #elasticsearch #golang #ionic #java #kafka #knoldus #lagom #learn #machine learning #ml #pandemic #play framework #scala #skills #snowflake #spark streaming #techhub #technology #test automation #time management #upgrade

Top Enterprise Angular Web Apps Development Company in USA

AppClues Infotech is one of the leading Enterprise Angular Web Apps Development Company in USA. Our dedicated & highly experienced Angular app developers build top-grade Angular apps for your business with immersive technology & superior functionalities.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top enterprise angular web apps development company in usa #enterprise angular web apps development #hire enterprise angular web apps developers #best enterprise angular web app services #custom enterprise angular web apps solution #professional enterprise angular web apps developers

Rahim Makhani

Rahim Makhani

1625717787

Reach out to more customers: get a progressive web app

A Progressive Web App is a type of application software that is delivered through the web. It is built using standard web technologies HTML, CSS, and JavaScript. It is expected to work on any platform that uses a standards-compliant browser, including desktop and mobile.

It is also known as a type of web page or web server. With the help of these PWA web pages, you can reach more customers for a business by marketing and promoting your business through web pages. You can also gain more customers by developing PWA by hiring a progressive web app development company. Nevina Infotech is a company that can help you to build your progressive web app with the help of its enthusiastic developers.

#progressive web app development company #progressive web app developers #progressive web app platform #progressive web app development services #progressive web app development

Rahim Makhani

Rahim Makhani

1620187126

Get your Custom Progressive Web App at an affordable Price

Progressive Web App or PWA is a type of application software that is delivered over the web. It is built using standard web technologies, including HTML, CSS, and JavaScript. It is designed to work on any platform that uses a standards-compliant browser. It can work on both desktop and mobile devices.

PWA is a type of website or web page known as a web application. It doesn’t require separate bundling or distribution.

Are you searching for a progressive web app development company to develop your custom PWA at an affordable rate? Then Nevina Infotech is the best suitable choice for you. We have experienced and dedicated developers who will help you to develop your custom PWA as per your requirement.

#progressive web app development company #progressive web app developers #progressive web app platform #progressive web app development services #progressive web app development

Rahim Makhani

Rahim Makhani

1626327771

Get your custom progressive web app with the latest features

Suppose you are looking for an app that can be run on any platform, whether on a desktop or a smartphone. Progressive web app development can provide this functionality to your app. It’s made using the most common web technologies, including HTML, CSS, and JavaScript.

To get a PWA for your business requirements, you can find a progressive web app development company that can understand your vision and give you the best app that you deserve. Nevina Infotech is one of the best PWA development companies, which have the most dedicated developers with the experience of app development that can help you achieve your goals.

#progressive web app development company #progressive web app developers #progressive web app platform #progressive web app development services #progressive web app development