PWA (Progressive Web App) Getting Started series: (ii) related preparation

Objective

In the previous chapter, a basic introduction to the related concepts of PWA was made, and the composition and advantages of PWA were understood. In order to get into the world of PWA faster, this chapter focuses on the issues that need attention in PWA development, the environment in which they are run, and the debugging tools.

Browser requirements

Because the browsers have different degrees of support for PWA, there is a need for a browser to have a better experience and use of PWA.

Is the current level of support for PWA for each browser:

You can refer to Ispwaready and caniuse to learn about browser support.

Computer-side requirements

The computer side recommends using Chrome 42+, or with the latest. The following courses will be developed based on Chrome.

You can view the version information by typing it in the address bar of the Chrome browser chrome://settings/help .

Mobile-side requirements

Because currently, the best browser for the push API in PWA is chrome only, so Chrome 62+ is still selected here. Because some of the technologies of PWA rely on system support, it is recommended to use a pure Android OS, or it can be done on some international versions of the ROM system.

Installing a network server

Because some of the technologies of PWA need to be running on HTTPS, or localhost (127.0.0.1), it is not possible to run the HTML file directly, so it is necessary to install a local server.

Installation

Local server Adoption Web Server for Chrome , click to download.

Test

When the installation is complete, click on the app in the bookmark

or enter it in the Address bar chrome://apps/ .

Locate the app after installation Web Server for Chrome and click to open it.

By clicking the hoose folder button, select the project folder you developed in the popup text box.

After the selection is complete, remember to turn on the service, which will be displayed after opening Web Server:STARTED , indicating that the service is turned on.

Developer Tools Open

All debugging is done by browser-based developer tools and can be opened with shortcut keys.

• F12 or Ctrl + Shift + I (WINDOWS/LINXU)
• Cmd+opt+i (MAC)

Or go through the menu bar

Panel description

To develop PWA, our main use is the application panel.

including manifest debugging, Service worker debugging, cache debugging, etc., will be explained in detail in the following chapters.

Summarize

This article mainly on the post-learning, in the development of tools and development environment to do the groundwork, to facilitate the learning behind.

Blog name: Wang Leping Blog

CSDN Blog Address: http://blog.csdn.net/lecepin

This work is licensed under the Creative Commons Attribution-NonCommercial use-no derivative of the 4.0 International License Agreement.

PWA (Progressive Web App) Starter Series: (ii) related preparation