PWA (progressive Web applications) use of modern and traditional Web API progressive enhancement strategy to create cross-platform Web applications.
PWA features:
-
Discoverable, content can be found through search engines.
-
Installable, may appear on the main screen of the device.
-
Linkable, you can simply pass a URL to share it.
-
Network independent, or it can be run in the case of poor speed offline.
-
Progressive, it can still use the old version of the browser, you can use all the features in the new version of the browser.
-
Re-engageable, whenever there is new content it can send notifications.
-
Responsive, it can normally be used on any device that has a screen and browser - including mobile phones, tablet PCs, laptops, televisions, refrigerators, and so on.
-
PWA advantages:
-
Reduce the load time after the application is installed, thanks to the Service Workers to cache in order to save bandwidth and time.
-
When an application update is available, it is possible only to update that part of the change. In contrast, for a native application, even the most minor changes also need to force the user to download the entire application again.
-
Look and feel more integrated with the native platform - application icon is placed on the home screen, the application can be run full-screen, and so on.
-
With the notification system and remain connected to the push message the user, the user generates more attractive and improving the conversion efficiency.
PWA is a key element needed for service worker support. Fortunately, all major browsers on desktop and mobile devices support service worker.
Service Worker
- Service Worker is between the browser and Web Alerts . The right resources to solve the cache site and make it available to the problem when the user device is offline.
- For security reasons, Service Workers can only HTTPS implementation.
- Service Worker is independent of the browser JavaScript main thread has its own independent life cycle.
Note : Service Workers extensive use of Promise , because they usually wait for a response by, after which they will be by way of the success or failure of response.
registered
The first to use the ServiceWorkerContainer.register () method to register the service worker. If successful, Service Worker will be downloaded to the client, and try to install / activate.
After installation is complete, Service Worker will go through the following life cycle:
-
Download (download)
-
Installation (install)
-
Activate (activate)
When the user first visits the site Service Worker control or page, Service Worker will immediately be downloaded. After it is downloaded at least once every 24 hours. It may be downloaded more frequently, but every 24 hours will be downloaded once to avoid bad script for a long time to take effect.
After the download is complete, begin the installation Service Worker, during the installation phase, usually the resources we need to cache some static pre-declared, in our example, previously declared by urlsToCache.
After the installation is complete, it will begin to activate the browser will attempt to download Service Worker script file, the download is successful, the former with a buffered Service Worker script file to do comparison, if the previous one is different Service Worker script file to prove Service Worker has been updated, triggers activate event. Complete activation.
install
After the installation is complete, try to cache some static resources:
self.addEventListener('install', function(event) {
self.skipWaiting();
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
First, self.skipWaiting () execution, tell the browser to skip the waiting period, elimination Service Worker script expired, began to try to directly activate the new Service Worker.
Then use caches.open open a Cache, open, static file caching by cache.addAll try our previously stated.
Monitor , proxy network requestsfetch
All network requests a page, it will fetch by triggering events Service Worker, Service Worker find the cache from the Cache by caches.match try, if cache exists, the direct return cache response, otherwise, create a real network requests.
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
If we need to process the request, again adding new cache Cache Storage can be added by cache.put method,
activate
-
First, there is a white list, white list Cache is not being eliminated.
-
Following the adoption of caches.keys () to get all of the Cache Storage, put not in the white list of Cache eliminated.
-
Phasing out the use caches.delete () method. CacheName it receives as a parameter, remove the cacheName all cache.
self.addEventListener('activate', function(event) {
var cacheWhitelist = ['counterxing'];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
Reference blog: Service Worker study and practice (a) - Offline caching