摘要:實際上是指的為簡化開發(fā)而開源的第三方庫。首先安裝依賴然后再配置文件中啟用就完成了使用采坑官網(wǎng)上線后發(fā)現(xiàn),啟用后不能播放視頻了。把當成了失敗請求,導(dǎo)致請求視頻文件失敗。
PWA(Progressive Web App)是前端的大趨勢,它能極大的加快前端頁面的加載速度,得到近乎原生 app 的展示效果(其實難說)。PWA 其實是多種前端技術(shù)的組合,其中最重要的一個技術(shù)就是 service worker。
Service worker 在 MDN 上的說明:
Service workers 本質(zhì)上充當Web應(yīng)用程序與瀏覽器之間的代理服務(wù)器,也可以在網(wǎng)絡(luò)可用時作為瀏覽器和網(wǎng)絡(luò)間的代理。它們旨在(除其他之外)使得能夠創(chuàng)建有效的離線體驗,攔截網(wǎng)絡(luò)請求并基于網(wǎng)絡(luò)是否可用以及更新的資源是否駐留在服務(wù)器上來采取適當?shù)膭幼鳌K麄冞€允許訪問推送通知和后臺同步API。
其實不用太糾結(jié),簡單起見我們就把它當成更高級更先進的 AppCache 就好了。
在 nuxt(Vue) 網(wǎng)站中啟用 Service worker借近期公司官網(wǎng)升級之機,我也給公司官網(wǎng)上了 Service worker 做離線緩存。
大前提:Service worker 只可在 https(或 localhost)下使用,首先確保你的網(wǎng)站上了 https
在 nuxt 程序中啟用 Service worker 非常方便。nuxt 提供了官方 module——pwa-module 用于支持 PWA 網(wǎng)站,其中就包含了用于實現(xiàn) Service worker 的 workbox module。workbox 實際上是指的 google 為簡化 Service worker 開發(fā)而開源的第三方庫。
首先安裝依賴
$ yarn add @nuxtjs/pwa @nuxtjs/workbox
然后再配置文件中啟用
// modules module.exports = { [ "@nuxtjs/pwa" ] }
就完成了
SW 使用采坑官網(wǎng)上線后發(fā)現(xiàn),啟用 Service worker 后 Safari 不能播放視頻了。但是直接輸入視頻鏈接卻可以播放。經(jīng)過各種 google 搜索查資料后找到了官方 issue:
https://github.com/nuxt-commu...
https://github.com/angular/an...
甚至還找到了有人給 webkit(Safari 瀏覽器內(nèi)核)開了bug:https://bugs.webkit.org/show_...
狀態(tài)始終是 new,沒有人解決。但 issue 中詳細說明了 Safari 的行為以及產(chǎn)生問題的原因
問題的原因在于對于視頻文件請求,瀏覽器會發(fā)出帶有 Range 頭的請求部分獲取文件內(nèi)容。Safari 比較奇葩,對于視頻文件請求,它一開始就會發(fā)一個 Range: 0-1 的請求,但是 Service worker 中處理請求的邏輯不能識別 Range 請求,把 Range 請求當成普通請求處理,返回了 200。Safari 把 200 當成了失敗請求,導(dǎo)致請求視頻文件失敗。
最后開各人的回帖找到了這里:https://developers.google.com...
然后經(jīng)過各種嘗試(中間過程略),說一下可行方案:
首先添加 js plugin:
// workbox-range-request.js workbox.routing.registerRoute( /.*.(mp4|webm)/, workbox.strategies.cacheFirst({ plugins: [ new workbox.rangeRequests.Plugin(), ], }), "GET" );
這個文件給 workbox 注冊一個路由,指定對于視頻文件(以 .mp4 或 .webm 結(jié)尾的文件。如果你的網(wǎng)站有音頻文件也要一并處理)處理程序添加 rangeRequests 插件
然后在配置文件中注冊插件:
// modules: [ "@nuxtjs/pwa", { workbox: { cachingExtensions: "@/plugins/workbox-range-request.js", } } ],
注意必須使用 cachingExtensions 而不能用 routingExtensions,雖然注冊的是路由配置
這樣 Service worker 就可以處理帶 Range 頭的請求了,但是還不算完。workbox 會請求 googlecdn 動態(tài)加載 js 腳本,如果你身在兲朝,由于眾所周知的原因加載腳本會失敗。
解決方案:
首先去 workbox 官網(wǎng)下載 release 包(筆者用的是 3.5.0 版本):https://github.com/GoogleChro...
解壓后放在你項目的 static 文件夾下,筆者是 static/workbox-v3.5.0
修改配置
// modules: [ "@nuxtjs/pwa", { meta: false, workbox: { config: { modulePathPrefix: "/workbox-v3.5.0" }, cachingExtensions: "@/plugins/workbox-range-request.js", } } ],
配置中指定 workbox 從 /workbox-v3.5.0 這個路徑加載 js 腳本,而不走 googlecdn。
注意配置中使用的 config 當前版本(@nuxtjs/pwa@2.5.0, 2018-09-20)還不支持,筆者給官方倉庫開了 Pull request 還在審核中,筆者是直接修改了 node_modules 里的文件。
完在上 Service worker 之前最好想清楚。這玩意和 AppCache 一樣,上線簡單,想要下線就難了
請上公司官網(wǎng)體驗效果:https://www.eoitek.com
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/97930.html
摘要:移除總結(jié)使用插件配置如下移除沒成功報錯如下配置參考優(yōu)化實踐刪除和配置最終還是沒有成功,報錯如下使用插件安裝依賴庫配置如下生產(chǎn)環(huán)境移除總結(jié)該方案成功了 vue-cli 3.x 移除console總結(jié) 使用 uglifyjs-webpack-plugin 插件 配置如下: // vue.config.js const UglifyJsPlugin = require(uglifyjs-we...
摘要:前端日報精選從零學(xué)習(xí)技術(shù)棧新版本及簡介石墨表格之應(yīng)用實戰(zhàn)一道面試題目引發(fā)的思考新為帶來的性能變化中文第期前端部署采坑記個最基本的面試問題及答案上插件開發(fā)簡介一開發(fā)入門掘金插件開發(fā)簡介二如何添加瀏覽器擴展白名單掘金層疊相關(guān)知識指北掘 2017-09-09 前端日報 精選 從零學(xué)習(xí)React技術(shù)棧:React 新版本及 ES6 簡介石墨表格之 Web Worker 應(yīng)用實戰(zhàn)一道面試題目引發(fā)...
閱讀 1961·2021-09-04 16:45
閱讀 747·2019-08-30 15:44
閱讀 894·2019-08-30 13:07
閱讀 456·2019-08-29 16:06
閱讀 1375·2019-08-29 13:43
閱讀 1269·2019-08-26 17:00
閱讀 1526·2019-08-26 13:51
閱讀 2294·2019-08-26 11:48