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