Cache&PWA瀹炶返1.鑳屾櫙涓婁竴绡囥€婂墠绔姩鐢诲疄鐜颁笌鍘熺悊鍒嗘瀽銆嬶紝鎴戜滑浠嶱erformance鍒嗘瀽鍔ㄧ敾鐨勬€ц兘锛屽苟鏍规嵁Performance鍒嗘瀽浼樺寲鍔ㄧ敾銆傜劧鑰岋紝鍓嶇涓嶄粎浠呮槸瀹炵幇娴佺晠鐨勫姩鐢汇€俆oB椤圭洰缁忓父澶勭悊鏁版嵁淇濆瓨鍜屾覆鏌撱€傛瘮濡傚湪寮€鍙戜腑锛屼负浜嗘彁鍗囩敤鎴蜂綋楠岋紝閬囧埌涓€浜涘満鏅紝鍏跺疄鏄负浜嗕紭鍖栨€ц兘鑰屼娇鐢ㄤ竴浜涙柟娉曘€傞€夋嫨涓嬫媺锛氬仛鍓嶇鍒嗛〉灞曠ず鈫掗伩鍏嶄竴娆℃€ф覆鏌撴暟鎹鑷存祻瑙堝櫒鍗￠】锛沬ndexedDB锛氬瓨鍌ㄦ暟鎹啋鐢ㄦ埛涓嬫杩涘叆鏃朵繚瀛樹笂娆＄紪杈戠殑鐘舵€併€傘€傘€傞毦鍏嶄細寮曞彂鎬濊€冿紝鎴戜滑浠庣紦瀛樺拰鏁版嵁瀛樺偍寮€濮嬫€濊€冿紝濡備綍浼樺寲锛?銆佷粈涔堟槸HTTP缂撳瓨锛烪ttp缂撳瓨瀹為檯涓婂氨鏄祻瑙堝櫒淇濆瓨鎵€鏈夐€氳繃HTTP鑾峰緱鐨勮祫婧愶紝鏄祻瑙堝櫒灏嗙綉缁滆祫婧愬瓨鍌ㄥ湪鏈湴鐨勪竴绉嶈涓恒€傝姹傜殑璧勬簮鍦ㄥ摢閲岋紵6.8kB+200鐘舵€佺爜锛氭病鏈夌紦瀛樺懡涓紝瀹為檯璇锋眰鏄粠鏈嶅姟绔幏鍙栬祫婧愶紱鍐呭瓨缂撳瓨锛氳祫婧愮紦瀛樺湪鍐呭瓨涓紝涓嶄細璇锋眰鏈嶅姟鍣紝涓€鑸祫婧愬凡缁忓姞杞藉苟缂撳瓨鍦ㄥ唴瀛樹腑锛屽綋椤甸潰鍏抽棴鏃讹紝璧勬簮鐢卞唴瀛橀噴鏀撅紱纾佺洏缂撳瓨锛氳祫婧愮紦瀛樺湪纾佺洏涓紝涓嶄細璇锋眰鏈嶅姟鍣紝浣嗕笉浼氶殢鐫€椤甸潰鍏抽棴鑰岄噴鏀捐祫婧愶紱304鐘舵€佺爜锛氳姹傛湇鍔″櫒锛屽彂鐜拌祫婧愭病鏈夎Change锛岃繑鍥?04鍚庯紝浠庢湰鍦拌幏鍙栬祫婧愶紱serviceworker锛氬簲鐢ㄧ骇瀛樺偍鏂瑰紡锛汬TTP缂撳瓨鍒嗙被1.寮虹紦瀛樻祻瑙堝櫒鍦ㄥ姞杞借祫婧愭椂锛屼細鍏堟牴鎹湰鍦扮紦瀛樿祫婧愬ご閮ㄤ俊鎭垽鏂槸鍚﹀懡涓己缂撳瓨銆傚鏋滃懡涓紝鍒欎笉浼氬悜鏈嶅姟鍣ㄥ彂閫佽姹傦紝鑰屾槸鐩存帴浠庣紦瀛樹腑璇诲彇璧勬簮銆傚彲浠ラ€氳繃璁剧疆HTTPHeader鏉ュ疄鐜板己缂撳瓨锛歨ttp1.0鈫扙xpires锛氬搷搴斿ご鍖呭惈鏃ユ湡/鏃堕棿锛屽嵆杩囦簡杩欎釜鏃堕棿锛屽搷搴斿氨杩囨湡浜嗐€俬ttp1.1鈫扖ache-Control:max-age=锛氳缃紦瀛樺瓨鍌ㄧ殑鏈€澶ф湡闄愶紝瓒呰繃杩欎釜鏈熼檺缂撳瓨琚涓鸿繃鏈燂紙浠ョ涓哄崟浣嶏級銆備笌Expires鐩稿弽锛屾椂闂存槸鐩稿浜庤姹傜殑鏃堕棿锛屽湪楠岃瘉鏂伴矞搴︿箣鍓嶏紝缂撳瓨涓嶈兘鎻愪緵缁欏鎴风銆備娇鐢╟ache-control:no-store鈫掔姝㈢紦瀛樺鍒秗esponse锛屽嵆鐪熸鐨勬暟鎹笉缂撳瓨鍒版湰鍦帮紱catch-control锛歱ublic鈫掑彲浠ヨ鎵€鏈夌敤鎴蜂娇鐢ㄧ紦瀛橈紙澶氫釜鐢ㄦ埛鍏变韩锛夛紝鍖呮嫭缁堢锛孋DN绛夈€傚懡涓紝濡傛灉鍗忓晢缂撳瓨鍛戒腑锛岃姹傝繑鍥炵殑HTTP鐘舵€佷负304锛孨ot鐨勫瓧绗︿覆淇敼鍚庝細鏄剧ず锛涘崗鍟嗙紦瀛樼敱[last-Modified,if-Modified-Since]鍜孾ETag,if-None-Match]绠＄悊銆?Last-Modified,If-Modified-Since"last-Modified锛氳〃绀烘湰鍦版枃浠舵渶鍚庝慨鏀圭殑鏃ユ湡锛屾祻瑙堝櫒浼氬湪璇锋眰澶翠腑鍖呭惈if-Modified-since锛堜篃鏄渶鍚庤繑鍥炵殑Last-Modified鐨勫€紅ime)锛屾湇鍔″櫒浼氬皢杩欎釜鍊间笌璧勬簮琚慨鏀圭殑鏃堕棿杩涜鍖归厤銆傚鏋滄椂闂翠笉涓€鑷达紝鏈嶅姟鍣ㄤ細杩斿洖涓€涓柊鐨勮祫婧愶紝鏇存柊Last-modified鍊硷紝浣滀负鍝嶅簲澶磋繑鍥炵粰娴忚鍣ㄣ€傚鏋滄椂闂寸浉鍚岋紝璇存槑璧勬簮娌℃湁鏇存柊锛屾湇鍔″櫒浼氳繑鍥?04鐘舵€侊紝娴忚鍣ㄥ緱鍒板搷搴旂姸鎬佺爜鍚庝細浠庢湰鍦扮紦瀛樹腑璇诲彇璧勬簮銆?ETag,If-None-Match"鍦╤ttp1.1涓紝鏈嶅姟鍣ㄤ娇鐢‥Tag鏉ヨ缃搷搴斿ご缂撳瓨鏍囧織銆侲tag鐢辨湇鍔″櫒鐢熸垚銆傜涓€娆¤姹傛椂锛屾湇鍔″櫒浼氬皢璧勬簮鍜孍Tag杩斿洖缁欐祻瑙堝櫒锛屾祻瑙堝櫒浼氬皢涓よ€呯紦瀛樺湪鏈湴缂撳瓨涓€傚湪绗簩娆¤姹備腑锛屾祻瑙堝櫒浼氭妸ETag鐨勫€兼斁鍒癐f-None-Match璇锋眰澶翠腑鍘昏闂湇鍔″櫒銆傛湇鍔″櫒鏀跺埌璇锋眰鍚庯紝浼氬皢鏈嶅姟鍣ㄤ腑鐨勬枃浠禝D涓庢祻瑙堝櫒鍙戦€佺殑ID杩涜姣旇緝銆傚鏋滀笉鍚岋紝鏈嶅姟鍣ㄨ繑鍥炴洿鏂板悗鐨勮祫婧愬拰鏂扮殑Etag锛屽鏋滅浉鍚岋紝鏈嶅姟鍣ㄨ繑鍥?04鐘舵€佺爜锛屾祻瑙堝櫒璇诲彇缂撳瓨銆傪煉℃兂鎯充负浠€涔堜細鏈変竴瀵筁ast-Modified锛岄渶瑕丒tag鏉ヨ瘑鍒槸鍚﹁繃鏈熸潵鍛ㄦ湡鎬х殑鏀瑰彉鍛戒腑鍗忓晢缂撳瓨鏂囦欢锛屼絾鏄枃浠剁殑鍐呭骞舵病鏈夋敼鍙橈紝鍙槸鏀瑰彉浜嗕慨鏀规椂闂淬€傝繖鏃跺€欙紝瀹㈡埛涓嶆湡鏈涚璁や负鏂囦欢琚慨鏀逛簡锛岄噸鏂拌幏鍙栥€傚鏋滄枃浠朵慨鏀归绻侊紝姣斿1s淇敼浜哊娆★紝If-Modified-Since鏃犳硶纭畾淇敼锛屼細瀵艰嚧淇敼浜嗘枃浠朵絾鑾峰彇鐨勮祫婧愯繕鏄棫鐨勶紝灏变細鍑虹幇闂銆傞儴鍒嗘湇鍔″櫒鏃犳硶鍑嗙‘鑾峰彇鏂囦欢鐨勬渶鍚庝慨鏀规椂闂达紝瀵艰嚧璧勬簮鑾峰彇闂銆傗殸锔忓鏋淓Tag鍜孡ast-Modified鍚屾椂瀛樺湪锛屾湇鍔″櫒浼氬厛妫€鏌Tag锛屽啀妫€鏌ast-Modified锛屾渶鍚庤繑鍥?04鎴?00銆侶TTP缂撳瓨瀹炶返娴嬭瘯鐜锛氫娇鐢↘oa鎼缓鑺傜偣鏈嶅姟锛屾祴璇曞浣曞懡涓己缂撳瓨鎴栧崗鍟嗙紦瀛樸€傜储寮曟椂銆傦細鍦ㄥ紑濮嬪疄楠屼箣鍓嶏紝鍙栨秷閫変腑缃戠粶闈㈡澘涓殑绂佺敤缂撳瓨銆傝閫夐」琛ㄧず绂佺敤娴忚鍣ㄧ紦瀛橈紝娴忚鍣ㄨ姹備細鎼哄甫Cache-Control:no-cache鍜孭ragma:no-cache鐨勫ご淇℃伅銆?.鍛戒腑寮虹紦瀛榓pp.use(async(ctx)=>{//ctx.body='helloKoa'consturl=ctx.request.url;if(url==='/'){//璁块棶璺熼殢璺緞杩斿洖index.htmlctx.set('Content-type','text/html');ctx.body=awaitparseStatic('./index.html')}else{ctx.set('Content-Type',parseMime(url))ctx.set('Expires',newDate(Date.now()+10000).toUTCString())//瀹為獙涓€ctx.set('Cache-Control','max-age=20')//瀹為獙浜宑tx.body=awaitparseStatic(path.relative('/',url))}})app.listen(3000,()=>{console.log('startingatport3000')})2.鍛戒腑鍗忓晢缂撳瓨/***鍛戒腑鍗忓晢缂撳瓨*SetLast-Modified,If-Modified-Since*/ctx.set('cache-control','no-cache');//鍏抽棴寮虹紦瀛榗onstisModifiedSince=ctx.request.header['if-modified-since'];constfileStat=awaitgetFileStat(鏂囦欢璺緞);濡傛灉锛坕sModifiedSince===fileStat.mtime.toGMTString锛堬級锛墈ctx.status=304}else{ctx.set('Last-Modified',fileStat.mtime.toGMTString())}ctx.body=awaitparseStatic(path.relative('/',url))/***鍛戒腑鍗忓晢缂撳瓨*璁剧疆Etag锛屽鏋?涓嶅尮閰?/ctx.set('cache-control','no-cache');constifNoneMatch=ctx.request.headers['if-none-match'];constfileBuffer=awaitparseStatic(filePath);consthash=crypto.createHash('md5');hash.update(fileBuffer);constetag=`"${hash.digest('hex')}"`if(ifNoneMatch===etag){ctx.status=304}else{ctx.set('Etag',etag)ctx.body=fileBuffer}}涓夈€佹祻瑙堝櫒缂撳瓨1銆丆ookiesMDN鐨勫畾涔夛細鏄湇鍔″櫒鍙戦€佺粰鐢ㄦ埛娴忚鍣ㄥ苟鍦ㄦ湰鍦颁笂鎶ョ殑涓€灏忔鏁版嵁銆傛祻瑙堝櫒涓嬫瑕佺粺涓€鏈嶅姟鍣ㄥ啀娆″彂閫佽姹傛椂鎼哄甫鍙戦€佺粰鏈嶅姟鍣ㄥ簲鐢ㄥ満鏅細浼氳瘽鐘舵€佺鐞嗐€愮敤鎴风櫥褰曠姸鎬併€佽喘鐗╄溅銆佹父鎴忓緱鍒嗘垨鍏朵粬闇€瑕佽褰曠殑淇℃伅銆戜釜鎬у寲璁剧疆锛堝鐢ㄢ€嬧€嬫埛鑷畾涔夎缃€佷富棰樼瓑锛夋祻瑙堝櫒琛屼负璺熻釜锛堝璺熻釜鍒嗘瀽鐢ㄦ埛琛屼负绛夛級cookie璇诲啓锛歝lassCookie{getCookie:(name)=>{constreg=newRegExp('(^|)'+name+'=([^;]*)')letmatch=document.cookie.match(娉ㄥ唽);//[鍏ㄩ噺銆佺┖鏍笺€佸€笺€?;']if(match){returndecodeURI(match[2])}}setCookie:(key,value,days,domain)=>{//username=JohnSmith;鍒版湡=2043骞?2鏈?8鏃ユ槦鏈熷洓12:00:00GMT锛沺ath=/letd=newDate();d.setTime(d.getTime()+(澶╂暟*24*60*60*1000));璁〆xpires=";expires="+d.toGMTString();璁╁煙=鍩燂紵';鍩?'+鍩燂細''锛沝ocument.cookie=name+'='+value+expires+domain+';path=/'}deleteCookie:(name:string,domain?:string,path?:string)=>{//鍒犻櫎涓€涓猚ookie锛屽彧闇€瑕佽缃椂闂翠负杩囨湡鏃堕棿锛屼笉鍒犻櫎鍊糲ookieconstd=newDate(0);鍩?鍩燂紵`;鍩熷悕=${鍩熷悕}`:'';璺緞=璺緞||'/';鏂囨。.cookie=濮撳悕+'=;expires='+d.toUTCString()+domain+';璺緞='+璺緞锛泒,}闂锛氱敱浜庢暟鎹繚瀛樺湪cookies涓紝姣忔璇锋眰閮戒細鍦╮equestheaderpair涓惡甯︿竴浜涙暟鎹紝涓嶉渶瑕佷氦缁欐彁浜ゅ悗绔紝杩欏繀鐒朵細甯︽潵棰濆鐨勫紑閿€銆?.WebStorageAPI娴忚鍣ㄥ彲浠ヤ互姣斾娇鐢╟ookie鏇寸洿瑙傜殑鏂瑰紡瀛樺偍閿€煎銆俵ocalStorage涓烘瘡涓€涓粰瀹氱殑origin锛堢粰瀹氱殑origin锛夌淮鎶や竴涓嫭绔嬬殑瀛樺偍鍖猴紝娴忚鍣ㄥ叧闂啀鎵撳紑鍚庢暟鎹緷鐒跺瓨鍦ㄣ€傚瓨鍦ㄣ€俿essionStorage涓烘瘡涓粰瀹氱殑鏉ユ簮缁存姢涓€涓崟鐙殑瀛樺偍鍖哄煙锛岃鍖哄煙鍦ㄩ〉闈細璇濇湡闂村彲鐢紙鍗冲彧瑕佹祻瑙堝櫒鎵撳紑锛屽寘鎷〉闈㈤噸鏂板姞杞藉拰鎭㈠锛夈€?銆乮ndexedDB鍜寃ebSQL鐨勫熀鏈搷浣滀笌瀹為檯鏁版嵁搴撴搷浣滃熀鏈浉鍚屻€傛暟鎹殑鏈€缁堝幓鍚戜竴鑸彧鐢ㄤ簬澶у瀷缃戠珯涓氬姟杩愯惀鐨勪复鏃跺瓨鍌ㄥ拰瀛樺偍缂撳瓨銆傞〉闈㈠埛鏂板悗锛屽浘涔﹂灏嗕笉澶嶅瓨鍦ㄣ€傝€屼笖瀹冪被浼间簬鍏崇郴鏁版嵁搴撴湰韬殑姒傚康銆俰ndexedDB闅忕潃娴忚鍣ㄥ姛鑳界殑涓嶆柇澧炲姞锛岃秺鏉ヨ秺澶氱殑缃戠珯寮€濮嬭€冭檻鍦ㄥ鎴风瀛樺偍澶ч噺鏁版嵁锛岃繖鏍峰彲浠ュ噺灏戜粠鏈嶅姟鍣ㄨ幏鍙栨暟鎹殑闇€瑕侊紝鐩存帴浠庢湰鍦拌幏鍙栨暟鎹€傜幇鏈夌殑娴忚鍣ㄦ暟鎹瓨鍌ㄦ柟妗堜笉閫傚悎瀛樺偍澶ч噺鏁版嵁锛汭ndexedDB鏄祻瑙堝櫒鎻愪緵鐨勬湰鍦版暟鎹簱锛屽彲浠ュ瓨鍌ㄥぇ閲忔暟鎹紝鎻愪緵鎼滅储鎺ュ彛锛岃繕鍙互鍒涘缓绱㈠紩銆傝繖浜涘湪LocalStorage涓笉鍙敤銆傚氨鏁版嵁搴撶被鍨嬭€岃█锛孖ndexedDB涓嶆槸鍏崇郴鍨嬫暟鎹簱锛堜笉鏀寔SQL鏌ヨ璇彞锛夛紝鏇存帴杩戜簬NoSQL鏁版嵁搴撱€?銆佸簲鐢ㄧ紦瀛楽erviceWorker鍦ㄦ彁鍒癝erviceWorker涔嬪墠锛岄渶瑕佸webWorker鏈変竴瀹氱殑浜嗚В锛泈ebWorker锛歐ebWorker鏄祻鈥嬧€嬭鍣ㄤ腑鐨勫唴缃嚎绋嬶紝鍥犳鍙敤浜庡湪闈為樆濉炰簨浠跺惊鐜腑鎵цJavaScript浠ｇ爜銆俲s鏄崟绾跨▼鐨勶紝涓€娆″彧鑳藉畬鎴愪竴浠朵簨銆傚鏋滃彂鐢熷鏉傜殑浠诲姟锛岀嚎绋嬪氨浼氳闃诲锛屼弗閲嶅奖鍝嶇敤鎴蜂綋楠屻€俉ebWorker鐨勪綔鐢ㄦ槸璁╀富绾跨▼鍒涘缓涓€涓伐浣滅嚎绋嬶紝涓庝富绾跨▼鍚屾椂杩涜銆傚伐浣滅嚎绋嬪彧闇€瑕佽礋璐ｅ鏉傜殑璁＄畻锛岀劧鍚庡皢缁撴灉杩斿洖缁欎富绾跨▼鍗冲彲銆傜畝鍗曠悊瑙ｅ氨鏄伐浣滅嚎绋嬭繘琛屽鏉傜殑璁＄畻锛岄〉闈紙涓荤嚎绋嬶級ui娴佺晠锛屼笉浼氶樆濉炪€係erviceWorkers鏄祻瑙堝櫒鍜岀綉缁滀箣闂寸殑铏氭嫙浠ｇ悊銆傚畠瑙ｅ喅浜嗗浣曟纭紦瀛樻湭鏉ョ綉绔欒祫婧愬苟浣垮叾绂荤嚎鍙敤鐨勯棶棰樸€係erviceWorker鍦ㄤ笌椤甸潰js涓荤嚎绋嬩笉鍚岀殑绾跨▼涓婅繍琛岋紝骞朵笖鏃犳硶璁块棶DOM缁撴瀯銆備粬鐨凙PI鏄潪闃诲鐨勶紝鍙互鍦ㄤ笉鍚岀殑涓婁笅鏂囦箣闂村彂閫佸拰鎺ユ敹娑堟伅銆備粬涓嶄粎鎻愪緵绂荤嚎鍔熻兘锛岃繕鍙互鍦ㄥ崟鈥嬧€嬬嫭鐨勭嚎绋嬩笂鍋氬寘鎷鐞嗛€氱煡鍜屾墽琛岀箒閲嶈绠楀湪鍐呯殑浜嬫儏銆係erviceWorkers闈炲父寮哄ぇ锛屽洜涓哄畠浠彲浠ユ帶鍒剁綉缁滆姹傘€佷慨鏀圭綉缁滆姹傚苟杩斿洖缂撳瓨鐨勮嚜瀹氫箟鎴栧鍚堝搷搴斻€?.PWA馃挕PWA锛屽叏绉癙rogressivewebapps锛屽嵆娓愯繘寮忕綉椤靛簲鐢ㄣ€侾WA鎶€鏈富瑕佺敤浜庢瀯寤鸿法骞冲彴鐨刉eb搴旂敤绋嬪簭锛屽苟浣垮叾鍏锋湁涓庡師鐢熷簲鐢ㄧ▼搴忕浉鍚岀殑鐢ㄦ埛浣撻獙銆傪煉WA鐨勬牳蹇冿細鏈€鍩虹鏈€鍩虹鐨勫氨鏄疭erviceWorker鍜屽畠鍐呴儴浣跨敤鐨凜acheAPI銆傚彧瑕佷娇鐢⊿erviceWorker鍜孋acheAPI锛屽氨鍙互瀹炵幇缃戠珯椤甸潰鐨勭紦瀛橈紝椤甸潰璇锋眰鐨勬嫤鎴紝浠ュ強瀵归〉闈㈢紦瀛樼殑鎿嶄綔銆備负浠€涔堣鐢≒WA锛氫紶缁焀eb瀛樺湪鐨勯棶棰橈細缂轰箯鐩存帴璁块棶锛岄渶瑕佽浣忎粬鐨勫煙鍚嶏紝鎴栬€呬繚瀛樺湪鏀惰棌澶归噷锛屼笉鏂逛究鏌ユ壘锛涘彇鍐充簬缃戠粶銆傚彧瑕佸鎴风鏂綉锛屾暣涓獁eb灏辩槴鐥紝瀹㈡埛绔棤娉曚娇鐢紱涓嶈兘鍍廚ativeAPP涓€鏍锋帹閫佹秷鎭€備紶缁烴ativeAPP瀛樺湪鐨勯棶棰橈細闇€瑕佸畨瑁呬笅杞姐€傚嵆浣垮彧浣跨敤APP鐨勬煇涓姛鑳斤紝涔熼渶瑕佷笅杞芥暣鐩橈紱寮€鍙戞垚鏈珮锛屼竴鑸渶瑕佸吋瀹笰ndroid鍜孖OS绯荤粺锛涘彂甯冮渶瑕佸鏌ワ紱鏇存柊鎴愭湰楂樸€傘€傘€侾WA鐨勫瓨鍦ㄥ氨鏄负浜嗚В鍐充互涓婇棶棰樺甫鏉ョ殑鍥版壈锛氫紭鐐癸細妗岄潰鍏ュ彛锛屾墦寮€鏂逛究锛涚绾垮彲鐢紝鏃犻渶杩囧渚濊禆缃戠粶锛涙槗浜庡畨瑁?涓€娆℃€у紑鍙戯紝鏃犻渶瀹℃牳锛屽叏骞冲彴鍙敤锛涙秷鎭帹閫乄ebAppManifestWebAppManifest锛圵eb搴旂敤鍒楄〃锛夌畝鍗曟潵璇村氨鏄竴涓互JSON褰㈠紡闆嗕腑鍐欏叆椤甸潰鐩稿叧淇℃伅鍜岄厤缃殑鏂囦欢銆倇"short_name":"鐢ㄦ埛绠＄悊","name":"鐢ㄦ埛绠＄悊","icons":[{"src":"favicon.ico","sizes":"64x6432x3224x2416x16","type":"image/x-icon"},{"src":"logo192.png","type":"image/png","sizes":"192x192"},{"src":"logo512.png","type":"image/png","sizes":"512x512"}],"start_url":".",//璋冩暣缃戠珯璧峰閾炬帴"display":"standalone",//璁剧疆缃戠珯reminderMode:standalone琛ㄧず闅愯棌娴忚鍣║I"theme_color":"#000000",//璁剧疆缃戠珯鍚勯〉闈㈢殑涓婚鑹?background_color":"#ffffff"//璁剧疆鑳屾櫙鑹瞹ServiceWorker.js浠ｇ爜/*eslint-disableno-restricted-globals*///鍒ゆ柇鍝簺璧勬簮闇€瑕佺紦瀛榗onstCACHE_VERSION=0;constCACHE_NAME='cache_v'+CACHE_VERSION;constCACHE_URL=['/','index.html','favicon.ico','serviceWorker.js','static/js/bundle.js','manifest.json','users']constpreCache=()=>{returncaches.open(CACHE_NAME).then((cache)=>{returncache.addAll(CACHE_URL)})}constclearCache=()=>{returncaches.keys().then(keys=>{keys.forEach(key=>{if(key!==CACHE_NAME){caches.delete(key)}})})}//缂撳瓨self.addEventListener('install',(event)=>{event.waitUntil(preCache())})//鍒犻櫎鏃х紦瀛榮elf.addEventListener('activated',(event)=>{event.waitUntil(clearCache())})console.log('hello,servicewold');self.addEventListener('fetch',(event)=>{console.log('request:',event.request.url)event.respondWith(fetch(event.request).catch(()=>{//浼樺厛缃戠粶璇锋眰锛屽け璐ュ垯浠庣紦瀛樹腑鑾峰彇璧勬簮returncaches.match(event.request)}))})PWA璋冭瘯绂荤嚎鏃朵緷鐒惰幏鍙栫紦瀛樿祫婧愶紝骞舵甯告樉绀猴紝鍙璧勬簮鍗虫湇鍔″姙鍏rCache鍊熷姪寮€鍙戣€呭伐鍏凤細chromedevtools:chrome://inspect/#service-workers锛屽彲浠ユ樉绀哄綋鍓嶈澶囨縺娲诲苟瀛樺偍鐨剆erviceworker銆?.鎬荤粨涓庡弬鑰冨弬鑰冧紭绉€缃戠珯锛氳闆€锛歨ttps://www.yuque.com/dashboard锛汸WA绀轰緥锛歨ttps://mdn.github.io/pwa-examples/js13kpwa/
