Angular Learning Notes (PWA + App Shell)

PWA (Progressive Web Apps) is the direction of future Web page design. Progressive web site.

Angular V5 started supporting the PWA site (the so-called support means that there are some build in methods and specifications to implement it).

For now, PWA has several features:

1.https

2.Service work

3.Cache API

4. Intercept Fetch (any requests made by the viewer, including index.html)

5.Push API

6.Share API

The main uses are:

1. Offline view (implemented via service work + cache + intercept fetch)

2. Push notification (implemented via service work + Push API + Notification API)

3. Amp site preload service-work.js (html,js.css required for the service worker to preload the entire page on the amp page)

Reference:

https://blog.angular-university.io/service-workers/

https://blog.angular-university.io/angular-service-worker/

Implementation I will not say, people are already step by step. Let me tell you some points.

The more complex service work is life cycle.

When you visit a website www.domain.com

When the page is rendered well, Ng will find a good time to register the service worker, which is to load "/ngsw-worker.js".

NG has its own way of managing life cycle (such as comparing file hashes and so on) (if you know how to implement a service worker yourself, you'll find that Ng has completely controlled the lifetime cycle without using default)

Service work is opened, is the general pre-loaded CSS, JS, HTML and so on. Then everything will be the cache.

When you're done, you can see the effect offline. If you refresh, you will find that all requests are returned from the cache, including index.html

Even index.html cache up, then how to update the site?

Each time the update, NG produces a hash in the CLI build and puts it into the ngsw-worker.js,

Each refresh of the site will use the cache version first, but it will also immediately load ngsw-worker.js and then make a decision to see if the hash is the same.

If a new js,css is found then it will be loaded and the next refresh will use the new version. If you want users to use the new version right away, Ng also opens up an API

You can listen to this update event in a subscribe way, and then alert users to refresh the user immediately.

So the process is cache first, check update, notify user and update now, Or wait for user next refresh

I recommend that you set up service work only after the site is more stable, and

And the page must be backwards compatible, or at least error-handling in the case of a version that is too long.

Because anyway, the user will get to the cache version first, if your cache version fails to run (such as your Ajax response has changed, and the previous JS version can not be processed, or even error, so that users can be very difficult to upgrade to the new version, and the experience will be very bad. So to use PWA to pay attention to this OH)

In addition to the cache, Ng also encapsulates the push notification.

A native implementation of push was previously written.

Http://www.cnblogs.com/keatkeat/p/7503615.html

Ng's implementation look at this

https://medium.com/google-developer-experts/ A-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1

Currently does not support notification Click Time, this is pretty bad, very important function ya. How could it not be realized? https://github.com/angular/angular/issues/20956

And there is no way to expand, if hard to need to directly change the Ngsw-worker.js source code.

Finally, say App-shell.

This concept, similar to skeleton, replaces the monotonous loading bar.

Step by step:https://blog.angular-university.io/angular-app-shell/

Ng is implemented by running server render through the CLI build and then inserting the rendered skeleton page into the index.html.

OK, next I will be ready to do a simple e-commerce, to combat a ng. Will make a video screen hope that the novice can save the long way.

Angular Learning Notes (PWA + App Shell)