How to create a PWA project using Angular5

PWA (Progressive Web App) utilizes TLS, WebApp Manifests and Service workers to enable the application to be installed and used offline. In other words, PWA is like a native application on your phone, but it’s built using web technologies like HTML5, JavaScript, and CSS3. If built correctly, PWA is indistinguishable from native applications.

The main features of PWA include the following three points:

• Reliable – Loads and displays instantly, even in an unstable network environment
• Experience – Fast response and smooth animation in response to user actions
• Engagement – Like native apps on devices, with an immersive user experience that users can add to the desktop

The PWA itself emphasizes gradual progress and does not require all requirements on safety, performance and experience to be met at one time. Developers can check the existing characteristics through the PWA Checklist.

Definition of Service worker in MDN:

Service Workers essentially act as a proxy server between the Web application and the browser, and can also act as a proxy between the browser and the network when the network is available. They are designed, among other things, to enable the creation of an effective offline experience, intercept network requests and take appropriate action based on whether the network is available and whether updated resources reside on the server. They also allow access to push notifications and background synchronization apis.

Angular provides the ServiceWorkerModule module to help build a service worker application.

• If it’s a brand new project

You can use angular/ CLI to create an Angular Service Worker project for you:

ng new PWA-Angular --service-workerCopy the code

The CLI will install @angular/service-worker for you, enable serviceWorker in.angular-cli.json, register serviceWorker for app, and generate ngsw-config.json with default configuration.

ServiceWorkerModule: serviceWorkerModule: serviceWorkerModule: serviceWorkerModule: serviceWorkerModule: serviceWorkerModule: serviceWorkerModule

imports: [
    // other modules...
    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production})
  ],Copy the code

@angular/cli 1.7.3 adds a/to ngsw-worker.js, causing path errors.

• If it’s an existing project

@ presents installation/service – worker:

npm install @angular/service-worker --saveCopy the code

Add ngsw-config.json file under SRC:

// src/ngsw-config.json
{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}Copy the code

Enable service worker in.angular-cli.json:

// .angular-cli.json
...
{ 
  "apps": [{ 
    ..., 
    "serviceWorker": true
  }]
}Copy the code

Then register the Service Worker in app.module.ts:

// src/app.module.ts ... import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '.. /environments/environment'; @NgModule({ ... imports: [ ... , ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }) ], }) ...Copy the code

This introduces the Service Worker into the project.

At this point we need to push the files in /dist to the gh-Pages branch, not the whole project. To do this, use angular-cli-ghpage by running the following command:

npm i -g angular-cli-ghpage
nghCopy the code

At this time in https://tc9011.github.io/PWA-Angular can see you on the project.

You can use the Audits from Chrome DevTools or Lighthouse to test it first:

The test results are as follows:

In the Application for Chrome DevTools, you can view the Manifest:

You can see that there is already a link to Add to Homescreen:

Click and the following options will pop up:

Click OK to find your app on the desktop:

This completes a very simple Angular5-based PWA project.