Dry Foods | 10 minutes to go to PWA

about PWA

PWA (Progressive web App), an incremental web app. PWA is essentially a Web application designed to give users native application experience in security, performance, experience, etc. through a number of new technologies. And there's no need to download, install, upgrade, and so on, like native apps.

This explains the concept of "progressive", meaning that the Web application continues to evolve. For the time being, PWA has not matured to an overnight level and wants to achieve the effects of native applications in terms of security, performance, and experience, or there is a lot of room for improvement. On the one hand is the cost of building PWA, and on the other hand, there is still a need to improve the support and compatibility of the major browsers, Android and iOS systems for PWA.

This article I will from the site cache, HTTP request interception, push to the main screen and other functions, combined with the operation of the instance, one step at a time to lead you to quickly play to PWA technology.

Service Worker

Service worker is the core technology of PWA, which provides offline caching for Web applications, and, of course, some of the service worker features are listed below:

• based on an HTTPS environment, this is a hard premise for building PWA. (lamp Environment website Upgrade HTTPS solution )

• is a separate worker thread, independent of the current Web page process, with its own independent worker context

• Can intercept HTTP requests and responses, cache files, cached files can be taken when the network is offline

• Ability to push messages to clients

• Cannot manipulate DOM directly

• Asynchronous implementations, mostly internally through Promise

Service worker life cycle

The serviceworker process can simply be summarized as registration-installation-activation.

Register

Registration is actually telling the browser where the Serviceworkerjs file is stored, and then the browser downloads, parses, executes the file, and then initiates the installation. Here I create a app.js file, the registration code is as follows, the file is introduced in the head tag of the website.

if(' Serviceworker 'inchNavigator) {Window.addeventlistener (' Load ',function() {Navigator.serviceWorker.register ('/sw.js '). Then (function(registration) {//Registration SuccessfulConsole.log (' Serviceworker registration successful with scope: ', Registration.scope); })            .Catch(function(err) {//registration failed: (Console.log (' Serviceworker registration failed: ', err);    }); });}

installation

When the Serviceworkerjs file is executed, the install event is triggered first. The installation process is to cache some of the specified static resources offline. Here is the installation code in my sw.js file:

var cache_version = ' sw_v8 '; var Cache_files = [    '/js/jquery/min.js ',    '/js/zui/min.js ',    '/js/chanzhi.js ' ,];self.addeventlistener (function  (event) {    event.waituntil (        caches.open ( cache_version)          = cache.addall (cache_files));    });

Activate

When the installation succeeds, the Serviceworker is activated, and the Activate event callback is processed (providing an opportunity to update the cache policy). and can handle functional event fetch (request), sync (background sync), push (push).

function (event) {    event.waituntil (        caches.keys ()) then (function(keys) {            return Promise.all (Keys.map (Key, i) {                if(key!== cache_version) {                     return caches. Delete (Keys[i]);     });});

Serviceworker Caching Capabilities

When installing, Serviceworker caches the static resources we specify (that is, pre-caching), and you might ask, if it's real-time dynamic content, we can't pre-specify all of the file resources in advance and let the Serviceworker cache. This will refer to the Serviceworker blocking HTTP request response feature.

Serviceworker intercepts HTTP requests, first checks to see if the requested resource exists in the cache, and if it does, it is called directly from the cache, and Serviceworker can invoke the resources in the cache even if there is no network condition. If no resource is requested in the cache, it is retrieved from the server over the network and, when it is found and responded to, the serviceworker caches it in case it is called directly from the cache the next time it is requested.

Serviceworker Caching process

The fetch event code in the Serviceworker file is as follows:

Self.addeventlistener (' Fetch ',function(event) {Event.respondwith (Caches.match (event.request). Then (function(response) {if(response) {returnresponse; }            varRequesttocache =Event.request.clone (); returnFetch (Requesttocache). Then (function(response) {if(!response | | response.status!== 200){                  returnresponse; }                varResponsetocache =Response.clone (); Caches.open (cache_version). Then (function(Cache) {Cache.put (Requesttocache, Responsetocache);                }); returnresponse;        }            ); })    );});

In the website foreground through the browser developer tool, we can look at the effect of invoking resources from the cache:

I am here to operate the demo with the Google Browser, the following are the major browsers for the Serviceworker support situation:

Serviceworker Browser Support situation

Add to main screen

PWA supports adding a shortcut to a web app on the home screen to make it easy for users to access it, while increasing the chances that Web apps will be repeatedly accessed. You might say that the "Add to Desktop" feature is now generally available in the browser feature list on the mobile side, but that PWA is implemented differently from the browser's own add-on to the desktop.

PWA does not require the user to intentionally go to the feature list to use this function button, but when the user accesses the Web application, directly in the interface to prompt a banner added to the main screen desktop, from the Web application point of view, this is actually active and passive difference.

The ability to implement this functionality in PWA is simple, requiring only one Manifest.json file in which the user can customize the app's launch page, template color, icon, and so on. Here is my Manifest.json file settings, you can refer to:

{  "Short_name": "Cicada Knowledge Resource Station",  "Name": "Cicada Knowledge Resource Station",  "Icons": [    {      "src": "Chanzhiicon.png",      "Type": "Image/png",      "Sizes": "48x48"    },    {      "src": "192.png",      "Type": "Image/png",      "Sizes": "192x192"    },    {      "src": "512.png",      "Type": "Image/png",      "Sizes": "512x512"    },    {      "src": "144.png",      "Type": "Image/png",      "Sizes": "144x144"    }  ],  "Start_url": "/index.html",  "Display": "Standalone",  "Background_color": "#2196F3",  "Orientation": "Landscape",  "Theme_color": "#2196F3"}

To be reminded, the current mobile iOS system support is not good, Android phone must use more than 57 version of the Google Browser can support this feature, here is my Android phone operation Demo:

Add to main screen

Summary

The PWA technology is being concerned by the vast majority of enterprises and developers, although the support of the devices now needs to be improved, but these are constantly improving progress. I also believe that in the near future, the PWA technology will gradually become widespread, for the majority of enterprises and users to bring convenience. This article and everyone to share the relevant technology and instance of PWA, followed by the message push, data synchronization and other functions to further explore the exchange. If you are having other problems learning about PWA, you are welcome to discuss communication.

For more technical articles, please follow the public number: