Home > Web Front-end > JS Tutorial > body text

Detailed explanation of practical cases for developing PWA applications using @angular/cli V6.0 (with code)

php中世界最好的语言
Release: 2018-05-31 11:48:43
Original
1978 people have browsed it

This time I will bring you a detailed practical case study of using @angular/cli V6.0 to develop PWA applications (with code). What are the precautions for using @angular/cli V6.0 to develop PWA applications? , the following is a practical case, let’s take a look.

What is PWA

PWA (Progressive Web App) utilizes TLS, webapp manifests and service workers to enable applications to install and use it offline. In other words, a PWA is like a native app on your phone, but it's built using web technologies like HTML5, JavaScript, and CSS3. When built correctly, PWAs are indistinguishable from native apps. The main features of PWA include the following three points:

    Reliable - even in unstable network environments, it can load and display instantly
  • Experience - Fast response, with smooth animations in response to user operations
  • Stickiness - Like a native application on the device, with an immersive user experience where users can Add to desktop
  • PWA itself emphasizes progressiveness and does not require all requirements for security, performance, and experience to be met at once. Developers can check existing features through the PWA Checklist.

Angular has officially released V6.0, and we can already use the corresponding @angular/cli V6.0 to directly develop PWA applications. Not much to say below, let’s take a look at the detailed introduction.

Step one: Install @angular/cli V6.0If you have an old version on your machine, please uninstall it first.

Open your terminal and execute:

npm install -g @angular/cli
Copy after login

After successful installation, use ng -v to check the version number:

##Second step: new an empty project

Execution:

ng new test-ng-pwa
Copy after login
After the creation is successful, take a look at the project and execute:

ng serve --open
Copy after login
Seeing this interface in the browser means everything is OK:

Step 3: Add PWA support

Stop the project, and then execute it in the terminal:

ng add @angular/pwa
Copy after login
The effect is as follows:

##Because the built-in Server of @angular/cli is compiled with --prod Service-worker was not supported at that time, so a third-party lite-server was installed on it. Its official documentation is here:

https://npmjs.com/package/lite-server, please execute :

npm install lite-server --save-dev
npm install lite-server --global
Copy after login

After installation, execute:

Then open your browser to access port 3000. You can see that the service-worker has started successfully:

You can now add the application to the desktop:

This is the effect on Windows :

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

node koa2 mysql bootstrap to build the front and back ends of the forum

##Detailed explanation of usage examples of this in JS

The above is the detailed content of Detailed explanation of practical cases for developing PWA applications using @angular/cli V6.0 (with code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!