PWA offline application

  • Front-end development, are inseparable from the means of performance optimization, including CDN, CSS Sprite, file compression, asynchronous loading, resource caching and so on. More often in order to reduce the number of users request, so there are PWA, second website, offline access and so on cool install B skills.

  • So I couldn’t wait to lift the PWA’s veil of mystery and use the following:

    • vuecli3.0
    • register-service-worker
    • A not-so-sticky Android (the Android version isn’t high enough for Chrome to add to the desktop)

  • First above:

vuecli3.0

  • The latest version of Vuecli, vuecli3.1, is installed via NPM install -g vue@cli
  • Vuecli3.0 has many magical and convenient features, the author should want to simplify the development process of developers, with cool visual interface GUI, through the vue UI in the browser to view, install, manage packages and so on
  • Vuecli3.0 also integrates service workers, some common syntax checks, automated tests and other tools

register-service-worker

  • Create-react-app creates a register-service-worker package for the scaffolding installed by create-react-app. This package generates the following files:

    • ‘manifest.json: you can configure how the application opens in the browser, on the desktop, the name of the application, how the application runs, and so on

    • Service-worker. js: you can see the functions and configurations of the compressed and packaged service worker installation, activation, uninstallation, etc

    • Asset-manifest. json: a file that is forced to be cached offline so that the APP can run offline

Detailed questions about service workers can be viewed through the following links:

  • lavas.baidu.com/pwa/README

  • Neveryu. Making. IO / 2017/06/08 /…

  • www.colabug.com/3479278.htm…

The backend configuration

  • Offline cache needs background cooperation. What kind of cache is effective to achieve offline effect? Mandatory caching!
  • Both mandatory and negotiated caches are caches, with the following differences:
    • Negotiated cache: There is a cache, but the server will actively request the server, the server does not return any resources
    • Mandatory cache: Caches exist, no server requests are made, caches are used locally or in memory or in the service worker
  • First, the distribution map of cache:

  • If you look at the resources downloaded when the page loads in Network in the Chrome Console, you’ll see that some of them docache from disk,cache from memoryWait, there are also resources that directly display the size of the resource file, so what’s going on here?
    • Cache from Disk: This is a forced cache, indicating that the resource is pulled from the local cache file
    • Cache from Memory: This is a forced cache, indicating that the resource is pulled from memory
    • Show the size of the resource directly: this is a negotiated cache or no cache, and the resource is downloaded from the server each time

  • In the Express example, you need to set up a common filter and set up a mandatory cache for GET requests for two hours
// The following Code sets the strong cache time returned in the common response header, CORS cross domain, etc. App.all ("*".function(req, res, next) {
	if(req.path ! = ="/" && !req.path.includes(".")) {
		res.header("Access-Control-Allow-Origin", req.headers["origin"] | |"*")
		res.header("Access-Control-Allow-Credentials".true)
		res.header("Access-Control-Allow-Headers".'Content-Type,Content-Length, Authorization, authorization,\'Origin\',Accept,X-Requested-With')
		res.header("Access-Control-Allow-Methods"."POST,GET,PUT,DELETE,OPTIONS")
		res.header("Content-Type"."application/json; charset=utf-8")
		if(req.method.toUpperCase() === "GET"){
			res.header("Cache-Control"."max-age=7200")
		}
	}
	next()
})
Copy the code

After the request cache is configured, static resources must be set to mandatory cache to achieve offline access.

  • The mining pit pit god’s problems, when the server set response headers res. The header (” Access – Control – Allow – Origin “, the req. Headers (” Origin “) | | “*”), if the browser is a GET request to the server, Access-control-allow-origin in the response header of the cached GET request will display the domain name that sent the first GET request. Access-control-allow-origin returns the domain name of the first request, so an error is reported.

  • Finally, after packaging, when the SPA is visited for the first time, the service worker will automatically cache the resources needed in the SPA, while the data requested by AJAX is actively cached by the browser, so as to achieve the caching effect. In chrome with a higher version of Android, The SPA can also be packaged and downloaded to the desktop like an APP, with its own startup animation and so on.

  • Chrome cannot be added to the desktop: try F12->Application-> Manifest ->Add to Homesreen