webpack4 离线访问(渐进式网络)PWA

电玩女神 2021-07-24 15:37 289阅读 0赞

1、下载
    	cnpm install workbox-webpack-plugin -D
    
    2、若开启了eslint,则修改package.json,添加环境变量
    	 "eslintConfig": {
    	    "extends": "airbnb-base",
    	    "env":{
    	      "browser":true
    	    }
    	  },
    
    3、导入插件
    	const WorkboxPlugin = require('workbox-webpack-plugin');
    	
      	plugins: [
    	    new WorkboxPlugin.GenerateSW({  生成serviceworker.js
    	       clientsClaim: true,  帮助serviceworker快速启动
    	       skipWaiting: true,  删除旧的serviceworker
    	    })
    	],
    	
    4、在主入口文件注册服务
    	if ('serviceWorker' in navigator) { //兼容性
    	  window.addEventListener('load', () => {
    	    navigator.serviceWorker.register('/service-worker.js').then(registration => {
    	      console.log('ok ', registration);
    	    }).catch(registrationError => {
    	      console.log('error ', registrationError);
    	    });
    	  });
    	}
    	
    5、将代码运行在服务器上,serviceworker必须允许在服务器上
    	cnpm install -g serve
    	serve -s 要允许的目录
    		如:serve -s build

代码示例:

{ 
      "name": "demo1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "@babel/core": "^7.12.10",
        "@babel/preset-env": "^7.12.11",
        "babel-loader": "^8.2.2",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-runtime": "^6.26.0",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^5.0.1",
        "eslint": "^7.17.0",
        "eslint-config-airbnb-base": "^14.2.1",
        "eslint-loader": "^4.0.2",
        "eslint-plugin-import": "^2.22.1",
        "express": "^4.17.1",
        "file-loader": "^6.2.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^4.5.1",
        "less": "^3.13.1",
        "less-loader": "^7.2.1",
        "mini-css-extract-plugin": "^1.3.3",
        "optimize-css-assets-webpack-plugin": "^5.0.4",
        "postcss-loader": "^4.1.0",
        "postcss-preset-env": "^6.7.0",
        "style-loader": "^2.0.0",
        "url-loader": "^4.1.1",
        "webpack": "^4.41.6",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.11.1",
        "workbox-webpack-plugin": "^6.0.2"
      },
      "browserslist": { 
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ],
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ]
      },
      "eslintConfig": { 
        "extends": "airbnb-base",
        "env":{ 
          "browser":true
        }
      },
      "dependencies": { 
        "@babel/polyfill": "^7.12.1",
        "core-js": "^3.8.2",
        "jquery": "^3.5.1"
      },
      "sideEffects": [
        "*.css",
        "*.less"
      ]
    }

// import './index.less';
    // import '@babel/polyfill';
    import '../css/index.css';
    import '../css/index.less';
    import '../iconfont/iconfont.css';
    
    
    if ('serviceWorker' in navigator) {  //兼容性
    
      window.addEventListener('load', () => { 
    
        navigator.serviceWorker.register('/service-worker.js').then(registration => { 
    
          console.log('SW registered: ', registration);
    
        }).catch(registrationError => { 
    
          console.log('SW registration failed: ', registrationError);
    
        });
    
      });
    
    }