Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to get started with the progressive Web application PWA. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Recently, there has been a lot of discussion about progressive Web applications, and some people are still questioning whether progressive Web applications are the future of mobile.

There are many excellent concepts for mobile Web applications, but fortunately, it is not very difficult to write a progressive Web application. In this article, I will show you how to transform an ordinary website into a progressive Web application. You can follow this article step by step, after which your website can be accessed offline and an icon of the site can be created on the desktop. Then the introductory tutorial is about to begin.

What is a progressive Web application?

Progressive Web application is a new Web technology, which makes the experience of Web application similar to or consistent with that of native APP.

Progressive Web applications can span Web technology and Native APP development solutions. The advantages for developers are as follows:

You only need to care about the W3C Web standard, not all kinds of Native APP code.

Users can try it out before installing the application.

In progressive Web applications, you don't need to use a variety of app stores to distribute apps, and you don't have to worry about strange auditing standards when the app is released and the percentage of platforms purchased in the app. In addition, application updates are automatic and do not require user interaction, so the overall user experience is smoother for users.

The "installation" process of progressive Web applications is fast, and you only need to add an icon to the home screen.

The progressive Web application can display a nice startup screen when it starts.

You can provide applications with full-screen experience in progressive Web applications.

Improve the stickiness of users through system notification and other forms.

Progressive Web applications will cache the necessary files locally, so progressive Web applications will perform better than normal Web applications. 


Lightweight installation-you only need to cache a few hundred KB of data.

All data transfers must use secure HTTPS connections

Progressive Web applications can cache data offline and resynchronize data when reconnecting to the Internet.

The present situation of the Development of incremental Web Application

Progressive Web application has just begun to develop, but in fact, in China, some websites have actually started the practice of PWA, such as Weibo, Douban, Taobao and other platforms. Maybe if you are smart at this time, you may wonder, isn't this PWA the same as WeChat Mini Programs? yes, the purpose of the two is the same, that is, to provide users with "light" applications that are lightweight enough and similar to the experience of native applications on the mobile side.

But at present, PWA is a technical standard mainly promoted by Google. FireFox,Chrome and some Blink-based browsers already support progressive Web applications, and the support for progressive Web applications on Edge is still under development. Apple also said it would consider supporting PWA in its own Safari. However, this feature is already in the five-year plan of the WebKit kernel. Support for browser compatibility should not be too much of a problem in the long run. Moreover, at this stage, in browsers that do not support progressive Web applications, your applications simply cannot use the offline features of progressive Web applications, and all other functions can be used normally.

On the Wechat side, with its huge user base and volume, it is not clear whether it can compete with PWA or even laugh in the end.

Sample code

Most tutorials are about how to build an application similar to a native interface from scratch on Chrome. In this tutorial, however, we are not going to do a single-page application, so we don't need to know anything about Material Design here. So let's just look at the example.

You can get the sample code for this tutorial from GitHub.

This example provides a Web site with four pages, an CSS file and a JavaScript file. This site works on all modern browsers (IE10+). If your browser supports progressive Web applications, users can access the page in the cache directly when offline.

To run this example, make sure you have Node.js installed. And open the command line and run the example using the following command:

Node. / server.js [port]

In the above command, [port] is optional, and the default is 8888. Use Ctrl + C to stop the Web server.

You can access the example by opening a browser based on the Blink kernel (Opera,Vivaldi,Chrome) and entering http://localhost:8888/ in the address bar (note that the port number is correct). You can open the developer tool (F12 or Cmd/Ctrl + Shift + I) to view the console information.

Check the home page, or you can click on the page and enter offline mode using the following methods:

Check the "offline" option under the Network tag or the Application-> Service Workers tag. Revisit the previously visited web page, which will still be loaded:

Connect the mobile installation

In addition to accessing it in a PC browser, you can also access the sample on your mobile device. Connect your mobile device to your computer using a USB cable, and then open the More tools-Remote devices tab from the three-point menu in the upper right corner

Click the Settings menu on the left, and then add a Port Forwarding rule to map 8888 to localhost:8888. Now you can open Chrome directly on your phone and visit http://localhost:8888.

You can use the browser's "add to home screen" feature to add the current web page to the home screen, and after you visit a few pages, the browser will "install" the Web application on your device. Browse a few pages, close Chrome and disconnect the device from the computer, click on the icon generated on the desktop, you will see a Splash page, and you can continue to browse the page you browsed before.

After reading the above, do you have any further understanding of how to get started with the progressive Web application PWA? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.