Introduction to PWA and Angular 6

October 19, 2018
95 Views

Progressive web apps are the new standard for web development. using Html , Css and JavaScript web apps can feel like a native app and with frameworks like Angular, Vue and React making a progressive web app has never felt better.

This article focuses on understanding the PWA files angular generates and it’s configurations. Now you might be wondering what are the benefits of building a PWA :

  • Bringing app like user experience to the mobile web.
  • You can install it directly from the browser on your phone.
  • Doesn’t require a platform store (Playstore, Applestore).
  • Offline mode and push notifications via service workers.

Angular 6 Relationship with PWAs.

The angular team has made it very easy to use pwa’s in your app. with the ng add you can run the following command to turn your app to a progressive web app :

ng add @angular/pwa --project app_name

Note that the name of the project is required because Angular CLI 6+ now supports multiple projects in the same folder.

This command generates quite some files which we would explain(obviously, that’s the point of this article).

This commands creates the following files which basically makes up your PWA :

ngsw-config.json

The ngsw-config.json file specifies which files and data URLs the Angular service worker should cache and how it should update the cached files and data.

{
  "index": "/index.html",
  "assetGroups": [{
     "name": "app",
     "installMode": "prefetch",
     "resources": {
     "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
 ]}
}, {
   "name": "assets",
   "installMode": "lazy",
   "updateMode": "prefetch",
   "resources": {
   "files": [
   "/assets/**"
  ]}
 }]
}

Explaining each of the keys in the configuration file :

  • index : Specifies the file that serves as the index page to satisfy navigation requests. Usually this is /index.html. Which is the root page from default angular applications.
  • assetGroups : According to the angular documentation (yeap we are going by the book). Assets are resources that are part of the app version that update along with the app. basically your CDNs and external URLs. This field contains an array of asset groups, each of which defines a set of asset resources and the policy by which they are cached.

    name
     : is mandatory. It identifies this particular group of assets between versions of the configuration.installMode : can be either prefetch or lazy, This defines how the this resources are initially cached.
    – prefetch tells the Angular service worker to fetch every single listed resource while it’s caching the current version of the app. This takes a lot of data, you might want to consider your users especially is your app is heavy, but it ensures resources are available whenever they’re requested, even if the browser is currently offline.
    – lazy does not cache any of the resources up front. Instead, the Angular service worker only caches resources for which it receives requests. This is an on-demand caching mode. Resources that are never requested will not be cached. This is useful for things like images at different resolutions, so the service worker only caches the correct assets for the particular screen and orientation.updateMode : can also be either prefetch or lazy . This just basically updates the cached resources if there’s a change in the apps version.
    – prefetch : tells the service worker to download and cache the changed resources immediately.
    – lazy : tells the service worker to not cache those resources. Instead, it treats them as unrequested and waits until they’re requested again before updating them. An updateMode of lazy is only valid if the installMode is also lazy.resources : This section describes the resources to cache.
    – files : lists patterns that match files in the distribution directory. These can be single files or glob-like patterns that match a number of files.
    – urls : includes both URLs and URL patterns that will be matched at runtime. These resources are not fetched directly and do not have content hashes, but they will be cached according to their HTTP headers. This is most useful for CDNs such as the Google Fonts service.

manifest.json

{
"name": "app_name",
"short_name": "app_short_name",
"theme_color": "app theme color",
"description": "app description",
"background_color": "background color",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
 {
 "src": "assets/icons/icon-72x72.png",
 "sizes": "72x72",
 "type": "image/png"
 }
...
]}
  • name : Name of the app you want to display under the app icon.
  • short_name : Short name of the app. This is intended for when there is insufficient space to display the full name of the web application, like device homescreens.
  • theme-color : Defines the default theme color for an application. This sometimes affects how the OS displays the site (e.g., on Android’s task switcher, the theme color surrounds the site).
  • description : Defines the app description of the pinned website.
  • background-color : Defines the expected “background color” for the website. This value repeats what is already available in the site’s CSS, but can be used by browsers to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.
  • display : Defines the app display mode. There are different kinds and they each have a fallback display incase the selected one doesn’t apply or work with the device.
    – fullscreen : All of the available display area is used and no chrome UI is shown. Fallback display standalone.
    – standalone : The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher and status bar. This display looks more native. Fallback display minimal-ui.
    – minimal-ui : The application will look like a standalone application but will have limited UI (maybe navigation and read nav bar). Fallback display browser.
    – browser : This is the default a conventional browser look and feel.
  • scope : This defines the navigation scope of the PWA. This restricts what web pages can be viewed while the manifest is applied.
  • start_url : This is basically the url that loads when the app is opened. in an Angular app this is basically the index.html file or your root component.

src/assets/icons folder containers some angular generated icons with different size for your app icon when installed from the browser. https://tomitm.github.io/appmanifest/ and https://app-manifest.firebaseapp.com / is a great way to generate this icons and manifest.

 

Useful links

You may be interested

Top 15 resources for learning JavaScript
Articles
71 views
Articles
71 views

Top 15 resources for learning JavaScript

simoneadmin - December 23, 2018

HTML, cascading stylesheets (CSS), and JavaScript have experienced massive growth and evolution over the past two decades, which should come…

How to create a Blockchain using Node.js
Articles
76 views
Articles
76 views

How to create a Blockchain using Node.js

simoneadmin - December 22, 2018

In this article, I will talk about the basics of Blockchain. We will discuss the fundamental concepts of the blockchain.…

How to deploy Angular on Azure
Angular
756 views
Angular
756 views

How to deploy Angular on Azure

simoneadmin - February 5, 2018

The Angular CLI makes it easy to build a production ready Angular app. The next step is getting that app…

Leave a Comment

Your email address will not be published.