Learning and Practice of Service Worker (2)-Brief Introduction of ——PWA

June 12, 2019 Front end, javascript

This week,Chrome 70The official version was released.Progressive Web Apps（PWA）Has been officially supported toWindows 10Platform, however, long before previous versions,ChromeHas passedchrome://flagsSupport to open the experimental function, has long been supported inWindows 10Installation 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 WorkerHow to create, activate, updateWebApplication’sService WorkerAnd gives a simple example to illustrate the use ofService WorkerTo realize the principle of offline caching, in this article, mainly toService WorkerThe ability to implement native applications is analyzed. The next article will illustrate how to use it through an example.Service WorkerRealize the message push function.

Progressive Web Apps（PWA）

Progressive Web AppPWA for short is promotionWeb AppThis is a new method of experience, which can give users the experience of native application.

PWAThe 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.PWAIn essenceWeb AppWith the help of some new technologiesNative AppSome of the characteristics of, bothWeb AppAndNative AppThe advantages of.

PWAThe 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 desktop
PWAIt 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 ChecklistTo sum up,PWAThere are roughly the following advantages:

Experience: ThroughService WorkercoordinateCache Storage API, guaranteedPWAThe loading efficiency of the first screen can even support offline application in combination with local storage.
Stickiness:PWACan 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 ManifestFor users andNative AppThe 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 exampleWebThe advantages of application: the updated version only needs to update the static files corresponding to the application program.Service WorkerWill 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 asWebFunctions supported by the application, forPWAGenerally speaking, they are basically supported. In addition, they also provide native capability.

Use`PWA manifest`Add desktop portal

Pay attention to what is said heremanifestNot to mentionmanifestCache, thismanifestIs aJSONFile, 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.

manifestIt 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.jsonFile, 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.iconStyle, application name, shorthand name and description, etc., among which must be ensuredshort_nameAndname. In addition, it is best to set it wellstart_urlA that represents the path of the root page to start, or the current path if not added.

displayForstandaloneThat hides the browser’sUIInterface, if setdisplayForbrowserTo save the browser’s on startupUIInterface.

orientationIndicates the starting direction, horizontal screen, vertical screen, etc. For specific parameter values, please refer toDocument.

background_colorAndtheme_colorIndicates the background color and theme color of the application.

In creating a goodmanifest.jsonAfter, will, uselinkTags are added to all pages of the application,<link rel="manifest" href="/manifest.json">

Install to desktop

Desktop side (to`Mac OSX`For example)

Only registered and activatedService WorkerThe website can only be installed to the desktop atChrome 70Before the release, the experimental function needs to be turned on manually. The steps are as follows:

Enterchrome://flags
findDesktop PWAs, selectEnabled

At this point, enter a supportPWAFor exampleGoogle I/O), atChromeIn the upper right corner of the browser, click Install. Can be installed on the desktop. Take my blog for example:

Can reachawesome-pwaFind current supportPWAList of websites for

Then click Install:

So, onePWAThe application is installed on your machine. My operating system here isMac OSX, the application can passLaunchpadOpen, atWindowsSimilarly, 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 end`IOS`For example)

Since apple was first introducedPWAWhen, there is not a unifiedmanifestThe specifications of the, the first design is throughmetaAndlinkTag to set the corresponding parameters of the application, so, on the mobile sidePWAApplication, for compatibilityWindows PhoneAndiPhone, need to be on all pages of theHTMLTheheadAdd 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!

IOSIn11.3Also supported after versionPWAAfter hearing this news, I uninstalled a lot of software on my mobile phone and immediately experienced it.PWA.

Here toDouban mobile terminalFor exampleSafiriThe 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 sidePWAThe desktop application will be added. Experience it quickly!

Summary

This article is written by the authorService WorkerThe second article in the study and practice series focuses on coordinationService WorkerpracticalPWAThe advantages of, how to configuremanifest.jsonFile to implementPWAInstalled on desktop and passed throughMac OSXAndIOSHow to installPWAThe detailed steps to the desktop explain how to configure it.PWATo make it easy to install on the desktop.

In the next article, I will mainly talk aboutService WorkerInPWAImportant Ability in Practice:Web Push.