This week,
Chrome 70
The official version was released.Progressive Web Apps(PWA)
Has been officially supported toWindows 10
Platform, however, long before previous versions,Chrome
Has passedchrome://flags
Support to open the experimental function, has long been supported inWindows 10
Installation on platformProgressive Web Apps(PWA)
. Google said that the experience of web applications installed on the desktop is very close to that of local applications, and the service provider of the applications can cache all resources, so these PWA applications have good compatibility and reliability.
In the last articleService Worker Learning and Practice (1)-Offline CachingAs already mentionedService Worker
How to create, activate, updateWeb
Application’sService Worker
And gives a simple example to illustrate the use ofService Worker
To realize the principle of offline caching, in this article, mainly toService Worker
The ability to implement native applications is analyzed. The next article will illustrate how to use it through an example.Service Worker
Realize the message push function.
Progressive Web Apps(PWA)
Progressive Web App
PWA for short is promotionWeb App
This is a new method of experience, which can give users the experience of native application.
PWA
The experience of native application can be achieved not by referring to a specific technology, but by applying some new technologies for improvement, which has greatly improved safety, performance and experience.PWA
In essenceWeb App
With the help of some new technologiesNative App
Some of the characteristics of, bothWeb App
AndNative App
The advantages of.
PWA
The main features include the following three points:
Reliable-load and show instantly even in unstable network environment
Experience-fast response and smooth animation response to user’s actions
Sticky-like native applications on devices with immersive user experience that users can add to the desktopPWA
It emphasizes gradualism and does not require all the requirements of safety, performance and experience to be met at one time. Developers can pass throughPWA ChecklistView existing features.
Through the abovePWA Checklist
To sum up,PWA
There are roughly the following advantages:
- Experience: Through
Service Worker
coordinateCache Storage API
, guaranteedPWA
The loading efficiency of the first screen can even support offline application in combination with local storage. - Stickiness:
PWA
Can be installed, users click on the install to the desktop, will create a PWA application on the desktop, and do not need to download from the application store, can useWeb App Manifest
For users andNative App
The same immersive experience allows users to return by sending offline notifications to users; - Progressive: Applicable to most modern browsers. With the iteration of browser versions, its functions are gradually enhanced.
- No version problem: for example
Web
The advantages of application: the updated version only needs to update the static files corresponding to the application program.Service Worker
Will help us to update; - Cross platform:
Windows
、Mac OSX
、Android
、IOS
, a set of code, multiple use; - Message push: even if the user has closed the application, the user can still be pushed with messages;
In general, as long asWeb
Functions supported by the application, forPWA
Generally speaking, they are basically supported. In addition, they also provide native capability.
UsePWA manifest
Add desktop portal
Pay attention to what is said heremanifest
Not to mentionmanifest
Cache, thismanifest
Is aJSON
File, which developers can use to control how web applications or websites are displayed to users in areas where users want to see applications (e.g. mobile device home screen), to indicate which functions users can start, and to define their appearance at startup.
manifest
It provides the function of saving website bookmarks to the main screen of the device. When the website starts in this way:
- It has a unique icon and name so that users can distinguish it from other websites.
- It displays some information to users when downloading resources or recovering resources from cache.
- It will provide default display features to browsers to avoid too stiff a transition when website resources are available.
The following is from my blog websitemanifest.json
File, as an example of a desktop portal configuration file:
{
"name": "Counterxing",
"short_name": "Counterxing",
"description": "Why did you encounter me?",
"start_url": "/index.html",
"display": "standalone",
"orientation": "any",
"background_color": "#ACE",
"theme_color": "#ACE",
"icons": [{
"src": "/images/logo/logo072.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "/images/logo/logo152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "/images/logo/logo192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/images/logo/logo256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/images/logo/logo512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
The meaning of the above fields also need not be explained much, which is roughly started.icon
Style, application name, shorthand name and description, etc., among which must be ensuredshort_name
Andname
. In addition, it is best to set it wellstart_url
A that represents the path of the root page to start, or the current path if not added.
display
Forstandalone
That hides the browser’sUI
Interface, if setdisplay
Forbrowser
To save the browser’s on startupUI
Interface.
orientation
Indicates the starting direction, horizontal screen, vertical screen, etc. For specific parameter values, please refer toDocument.
background_color
Andtheme_color
Indicates the background color and theme color of the application.
In creating a goodmanifest.json
After, will, uselink
Tags are added to all pages of the application,<link rel="manifest" href="/manifest.json">
Install to desktop
Desktop side (toMac OSX
For example)
Only registered and activatedService Worker
The website can only be installed to the desktop atChrome 70
Before the release, the experimental function needs to be turned on manually. The steps are as follows:
- Enter
chrome://flags
- find
Desktop PWAs
, selectEnabled
At this point, enter a supportPWA
For exampleGoogle I/O), atChrome
In the upper right corner of the browser, click Install. Can be installed on the desktop. Take my blog for example:
Can reachawesome-pwaFind current support
PWA
List of websites for
Then click Install:
So, onePWA
The application is installed on your machine. My operating system here isMac OSX
, the application can passLaunchpad
Open, atWindows
Similarly, it will be installed on the desktop and the application can be found through the start menu.
Open the application and find that there is almost no difference with the original application:
Windows is similar to the above method and will not be described here too much.
Mobile endIOS
For example)
Since apple was first introducedPWA
When, there is not a unifiedmanifest
The specifications of the, the first design is throughmeta
Andlink
Tag to set the corresponding parameters of the application, so, on the mobile sidePWA
Application, for compatibilityWindows Phone
AndiPhone
, need to be on all pages of theHTML
Thehead
Add the following labels to:
<meta name="msapplication-TileImage" content="./images/logo/logo152.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Counterxing">
<link rel="apple-touch-icon" href="./images/logo/logo152.png">
Once added, you can experience ourPWA
!
IOS
In11.3
Also supported after versionPWA
After hearing this news, I uninstalled a lot of software on my mobile phone and immediately experienced it.PWA
.
Here toDouban mobile terminalFor exampleSafiri
The browser opens a website, clicks the sharing icon below, and selects to add to the main screen.
Then in a newly popped-up browser page, select Add:
For the above brief steps, one on the mobile sidePWA
The desktop application will be added. Experience it quickly!
Summary
This article is written by the authorService Worker
The second article in the study and practice series focuses on coordinationService Worker
practicalPWA
The advantages of, how to configuremanifest.json
File to implementPWA
Installed on desktop and passed throughMac OSX
AndIOS
How to installPWA
The detailed steps to the desktop explain how to configure it.PWA
To make it easy to install on the desktop.
In the next article, I will mainly talk aboutService Worker
InPWA
Important Ability in Practice:Web Push
.