At the forefront of

Hello everyone! This is my third article about getting started

Browser cache

type

mechanism

Front-end resource cache evolution

1. Use webView's own HTTP caching mechanism. It usually requires the cooperation of server operation and maintenance colleagues, which is not flexible enough for the front-end and the cache granularity is too coarse. In addition, there are certain differences in the cache mechanism in different versions of HTTP protocol (for example, if-Modified-since, last-Modified, expires in version 1.0, and cache optimization in version 1.1. Add if-none-match, Etag, cache-control, etc. 2. Offline package policy, the general principle of which is to package static resources to the offline management platform (self-developed), pull resource packages from the offline management platform and store them locally when THE APP starts, and then the terminal will intercept URL requests and proxy the requests to the local file system based on convention rules. The disadvantage of this scheme is that it requires the cooperation of offline resource management platform and terminal, which involves too many resources. However, its advantage is that there is no compatibility problem. 3. H5 offline cache manifest, its essence is a cache manifest file (xx.manifest), and then set the MANIFEST attribute as XX. manifest in THE HTML tag, this cache scheme also has the problem of "secondary update". The manifest file itself should not be cached by webView, and the manifest file cache part cannot use wildcards, must be manually specified, but fortunately can be solved by building tools, mainstream browser support for this scheme is also good. Compared with service worker, its business JS code cannot sense the timing of cache update, so service worker scheme has more imagination space. 4. Service worker implements programmable caching of resources through an independent JS thread;Copy the code

Other options

 1. localStorage 
 2. indexDB  + preload
 3. jszip + indexDB
 4. ...
      
Copy the code

Introduction of the service workerMDN

Service Workers essentially act as proxy servers between Web applications, browsers, and the network (when available). This API is designed to create an effective offline experience that intercepts network requests and takes appropriate action to update resources from the server based on whether the network is available. It also provides a portal to push notifications and access background synchronization apis.Copy the code

service worker Scope

For example, in the following demo, the scope is Folder. The actual scope is http://[IP]:[port]/folder/. http:///[IP]:[port]/index.html, sw scope does not match, therefore sw will not take effect. http:///[IP]:[port]/folder/index.html. If the file matches sw scope, sw takes effect. http:///[IP]:[port]/folder2/index.html does not match sw scope, so sw does not take effect. * By default, scope is the parent directory of the service worker file. * Cached files, if you don't delete them actively, even if you change the SW, they still seem to be in the cache.Copy the code

Service Worker life cycle

workbox-webpack-plugin

Workbox - build: Basic version https://developers.google.com/web/tools/workbox/modules/workbox-build -the workbox - build The module integrates into a node-based build process and can generate an entire service worker, or just generate a list of assets to precache that could be used within an existing service worker. The two modes that most developers will use are generateSW and injectManifes workbox-cli: Version of the https://developers.google.com/web/tools/workbox/modules/workbox-cli Workbox command line interface (included in the Workbox - cli package) by a named Workbox Node.js, which can be run from a UniX-compatible command line environment on Windows macOS. Under the hood, workbox-CLI wraps the Workbox-build module and provides a simple way to integrate Workbox into the command line build process with flexible configuration. Workbox - webpack - the plugin: Webpack plug-in customised version https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin Workbox provides two webpack plugins: one that generates a complete service worker for you and one that generates a list of assets to precache that is injected into a service worker file. These plug-ins are implemented as two classes in the Workbox-webpack-Plugin module named GenerateSW and InjectManifesCopy the code

After the language

Novice road, we have a lot of problems to advise!