There’s been a lot of talk lately about progressive Web applications, and some people are questioning whether they’re the future of mobile.
I’m not going to compare progressive apps to native apps in this article, but one thing is for sure: the goal of both apps is to make the user experience better.
There are a lot of great concepts for mobile Web applications, but the good news is that writing a progressive Web application is not that difficult. In this article I will show you how to turn a regular Web site into a progressive Web application. You can follow the step-by-step instructions in this article, and when you’re done, your site will be accessible offline and you can create the site icon on your desktop. So let’s get started.
What are progressive Web applications?
Progressive Web applications are a new kind of Web technology that makes the experience of Web applications and native apps similar or consistent.
Progressive Web application, which can span the solutions of Web technology and Native APP development, has the following advantages for developers:
- You only need to care about the W3C Web standards, not the various Native APP code.
- Users can try the application before installing it.
- In a progressive Web app, you don’t have to use various app stores to distribute your app, and you don’t have to worry about weird approval criteria when your app is released and platform commissions for in-app purchases. In addition, application updates occur automatically without user interaction, so the overall experience is smoother for users.
- The “install” process for progressive Web applications is quick, requiring only an icon on the home screen.
- Progressive Web applications can start up with a nice splash screen.
- You can offer a full-screen experience in a progressive Web application.
- Improve user engagement through system notifications and other forms.
- Progressive Web applications will cache necessary files locally, so progressive Web applications will perform better than regular Web applications.
- Lightweight setup – you only need to cache a few hundred kilobytes of data.
- All data transfers must use secure HTTPS connections
- Progressive Web applications can cache data offline and resynchronize data when they reconnect to the Internet.
The state of progressive Web application development
Progressive Web applications have just begun to develop, but in fact, some websites in China have actually started the practice of PWA, such as Weibo, Douban, Taobao and other platforms. At this time, you may be smart enough to question, isn’t this PWA the same as wechat small program? Yes, the purpose of the two is the same, is to provide users with light enough on the mobile terminal and similar to the use of native apps “light” application.
But for now, PWA is Google’s main technology standard. FireFox, Chrome, and some Blink-based browsers already support progressive Web apps, and support for progressive Web apps on Edge is still in development. Apple also said it would consider supporting PWA in its Safari. However, this feature is already in the five-year plan for the WebKit kernel. In the long run, support for browser compatibility should be less of an issue. And at this point, in browsers that don’t support progressive Web apps, your app just won’t be able to use the offline features of progressive Web apps, and everything else will work.
However, it remains to be seen whether wechat, with its huge user base and volume, can compete with PWA and even win the last place.
The sample code
Most tutorials are about how to build a native interface application from scratch in Chrome. However, in this tutorial, we are not going to make a single-page application, so we don’t need to know anything about Material Design here. So let’s go straight to the example.
You can get the sample code for this tutorial from GitHub.
This example provides a web site with four pages, a CSS file, and a JavaScript file. The site works on all modern browsers (IE10+). If your browser supports progressive Web applications, users will be able to access cached pages when offline.
To run this example, make sure you have Node.js installed. Open the command line and run the example with the following command:
node ./server.js [port]Copy the code
In the preceding commands, [port] is optional. The default value is 8888. Press Ctrl + C to stop the Web server.
To access the example, open a Blink kernel based browser (Opera, Vivaldi, Chrome) and type http://localhost:8888/ in the address bar (note that the port number is correct). You can open developer Tools (F12 or Cmd/Ctrl + Shift + I) to view console information.
View the home page, or you can click on the page and use the following methods to go offline:
Select the Offline option under the Network TAB or Application -> Service Workers TAB. Revisiting a previously visited page, the previous page will still load:
Connect to mobile installation
In addition to a PC browser, you can also access the sample on a mobile device. Connect your mobile device to your computer using a USB cable, then open the More Tools – Remote Devices TAB from the three dots menu in the upper right corner
Click on the Settings menu on the left and add a Port Forwarding rule that maps 8888 to localhost:8888. Now you can open Chrome directly from your phone and go to 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 your computer, click on the generated icon on your desktop, and you’ll see a Splash page, and you can continue browsing the previous page.
summary
By introducing progressive Web applications in this section, you have gained a basic understanding of what PWA is. PWA has the characteristics of no need to worry about network, and has independent entry and independent protection mechanism. The introduction of new standards is likely to lead to the rebirth of Web applications on mobile devices. Therefore, front-end controls that satisfy the PWA model, such as SpreadJS, a pure front-end table control, will gradually become first-class citizens of mobile operating systems and challenge Native apps.
In the next section, we’ll take a look at how PWA works and how it works.
The original link: https://www.sitepoint.com/retrofit-your-website-as-a-progressive-web-app/
This article is published by grape City technical team, reprint please indicate source: Grape City control