摘要:為了解決這個問題,我的解決方案是使用,這樣就可以將緩存到本地,再次發布后,會使舊的失效,重新請求并緩存。結語幾分鐘就搞定了,然后把之前的一個基于的后臺模板項目也升級了,如果有相同需求的可以參考下。
為什么要給 VUE 項目添加 PWA
為什么要添加?因為不管是部署在 IIS,還是 nginx,每次應用部署后,再次訪問因為舊的 js 已經不存在,所以頁面訪問的時候會整個報錯,報錯的結果就是一個白屏。
為了解決這個問題,我的解決方案是使用 PWA ,這樣就可以將 js 緩存到本地,再次發布后,service-worker.js 會使舊的 js 失效,重新請求并緩存 js。
如果對于問題這個有更好的解決方案,務必請大佬指定一二
安裝 PWA 的相關依賴包yarn 安裝
yarn add sw-precache-webpack-plugin --dev yarn add uglify-es --dev
npm 安裝
npm install sw-precache-webpack-plugin --dev-dev npm install uglify-es --dev-dev添加修改相關配置
下面這些文件忘記出處是哪,Github也能搜到一些,之前寫的 PWA 的 Demo 里面拿過來的~
添加 build/service-worker-dev.jsself.addEventListener("install", () => self.skipWaiting()) self.addEventListener("activate", () => { self.clients.matchAll({ type: "window" }).then(windowClients => { for (let windowClient of windowClients) { // Force open pages to refresh, so that they have a chance to load the // fresh navigation response from the local dev server. windowClient.navigate(windowClient.url) } }) })添加 build/service-worker-prod.js
;(function() { "use strict" // Check to make sure service workers are supported in the current browser, // and that the current page is accessed from a secure origin. Using a // service worker from an insecure origin will trigger JS console errors. var isLocalhost = Boolean( window.location.hostname === "localhost" || // [::1] is the IPv6 localhost address. window.location.hostname === "[::1]" || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( /^127(?:.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ) window.addEventListener("load", function() { if ( "serviceWorker" in navigator && (window.location.protocol === "https:" || isLocalhost) ) { navigator.serviceWorker .register("service-worker.js") .then(function(registration) { // updatefound is fired if service-worker.js changes. registration.onupdatefound = function() { // updatefound is also fired the very first time the SW is installed, // and there"s no need to prompt for a reload at that point. // So check here to see if the page is already controlled, // i.e. whether there"s an existing service worker. if (navigator.serviceWorker.controller) { // The updatefound event implies that registration.installing is set var installingWorker = registration.installing installingWorker.onstatechange = function() { switch (installingWorker.state) { case "installed": // At this point, the old content will have been purged and the // fresh content will have been added to the cache. // It"s the perfect time to display a "New content is // available; please refresh." message in the page"s interface. break case "redundant": throw new Error( "The installing " + "service worker became redundant." ) default: // Ignore } } } } }) .catch(function(e) { console.error("Error during service worker registration:", e) }) } }) })()添加 build/load-minified.js
"use strict" const fs = require("fs") const UglifyJS = require("uglify-es") module.exports = function(filePath) { const code = fs.readFileSync(filePath, "utf-8") const result = UglifyJS.minify(code) if (result.error) return "" return result.code }修改 build/webpack.prod.conf.js
首先引用sw-precache-webpack-plugin和build/load-minified
const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin") const loadMinified = require("./load-minified")
為 webpack 插件 HtmlWebpackPlugin 添加參數 serviceWorkerLoader: `
plugins: [ .... new HtmlWebpackPlugin({ filename: process.env.NODE_ENV === "testing" ? "index.html" : config.build.index, template: "index.html", inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: "dependency", serviceWorkerLoader: `` }),
并在最后添加 SWPrecacheWebpackPlugin 插件
// service worker caching new SWPrecacheWebpackPlugin({ cacheId: "ysj-admin", filename: "service-worker.js", staticFileGlobs: ["dist/**/*.{js,html,css}"], minify: true, stripPrefix: "dist/" })在 /index.html 中注入 service-worker.js
<%= htmlWebpackPlugin.options.serviceWorkerLoader %>
如下所示
<%= htmlWebpackPlugin.options.serviceWorkerLoader %>
至此,添加完畢,build 之后查看緩存中是否包含 js 檢驗結果
注意:PWA 應用需要在本地上運行或者 https 協議下, 要保證你的頁面是安全頁面。結語
幾分鐘就搞定了,然后把之前的一個基于VUE的后臺模板項目也升級了,如果有相同需求的可以參考下。
倉庫地址:https://github.com/yimogit/me...
線上預覽:https://vue-admin.yimo.link/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97634.html
摘要:不是一個新名詞,早在年已經提出這個思想,但是直到的發布,終于可以在中添加到主屏,只有安卓和都能使用的基本功能,它才算是真的開始走近大眾。 原文鏈接:https://ssshooter.com/2018-09... PWA(Progressive Web Apps)雖然是網頁應用,但是可以帶來媲美原生的用戶體驗,其中包含離線可用,后臺推送等功能。PWA 不是一個新名詞,早在 2015 年...
摘要:免費升級到升級到后,服務器可以開啟版本,對比性能和緩存各方面要更好,還有其他新特性,可以啟動功能,更好的進行離線緩存,更好的離線體驗。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在線地址:https://fancy.czero.cn 手機掃描二維碼查看: showImg(http...
摘要:前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點;分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號(ID:frontshow),及時獲取前端每周清單;本文則是對于...
摘要:雖然有著各種各樣的不同,但是相同的是,他們前端優化不完全指南前端掘金篇幅可能有點長,我想先聊一聊閱讀的方式,我希望你閱讀的時候,能夠把我當作你的競爭對手,你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面,使用很多基于Web的應用。這些站點看起來既不一樣,用途也都各有不同,有在線視頻,Social Media,新聞,郵件客戶端...
摘要:另外,單頁應用因為數據前置到了前端,不利于搜索引擎的抓取。所以我們需要對自己的單頁應用進行一些優化。 前言 最近秋招之余空出時間來按自己的興趣動手做了一個項目,一個基于vue-cli3.0, vue,typescript的移動端pwa,現在趁熱打鐵,將這個項目從開發到部署整個過程記錄下來,并將從這個項目中學習到的東西分享出來,如果大家有什么意見或補充也可以在評論區提出。先介紹一下這個項...
閱讀 3947·2021-10-19 13:23
閱讀 2326·2021-09-09 11:37
閱讀 2506·2019-08-29 15:20
閱讀 3407·2019-08-29 11:08
閱讀 1660·2019-08-26 18:27
閱讀 1763·2019-08-23 12:20
閱讀 3028·2019-08-23 11:54
閱讀 2543·2019-08-22 15:19