亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Service worker (@nuxtjs/workbox) 采坑記

ISherry / 3742人閱讀

摘要：實(shí)際上是指的為簡化開發(fā)而開源的第三方庫。首先安裝依賴然后再配置文件中啟用就完成了使用采坑官網(wǎng)上線后發(fā)現(xiàn)，啟用后不能播放視頻了。把當(dāng)成了失敗請求，導(dǎo)致請求視頻文件失敗。

PWA（Progressive Web App）是前端的大趨勢，它能極大的加快前端頁面的加載速度，得到近乎原生 app 的展示效果（其實(shí)難說）。PWA 其實(shí)是多種前端技術(shù)的組合，其中最重要的一個(gè)技術(shù)就是 service worker。

Service worker 在 MDN 上的說明：

Service workers 本質(zhì)上充當(dāng)Web應(yīng)用程序與瀏覽器之間的代理服務(wù)器，也可以在網(wǎng)絡(luò)可用時(shí)作為瀏覽器和網(wǎng)絡(luò)間的代理。它們旨在（除其他之外）使得能夠創(chuàng)建有效的離線體驗(yàn)，攔截網(wǎng)絡(luò)請求并基于網(wǎng)絡(luò)是否可用以及更新的資源是否駐留在服務(wù)器上來采取適當(dāng)?shù)膭?dòng)作。他們還允許訪問推送通知和后臺(tái)同步API。

其實(shí)不用太糾結(jié)，簡單起見我們就把它當(dāng)成更高級(jí)更先進(jìn)的 AppCache 就好了。

在 nuxt（Vue） 網(wǎng)站中啟用 Service worker

借近期公司官網(wǎng)升級(jí)之機(jī)，我也給公司官網(wǎng)上了 Service worker 做離線緩存。

大前提：Service worker 只可在 https（或 localhost）下使用，首先確保你的網(wǎng)站上了 https

在 nuxt 程序中啟用 Service worker 非常方便。nuxt 提供了官方 module——pwa-module 用于支持 PWA 網(wǎng)站，其中就包含了用于實(shí)現(xiàn) Service worker 的 workbox module。workbox 實(shí)際上是指的 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 中詳細(xì)說明了 Safari 的行為以及產(chǎn)生問題的原因

問題的原因在于對于視頻文件請求，瀏覽器會(huì)發(fā)出帶有 Range 頭的請求部分獲取文件內(nèi)容。Safari 比較奇葩，對于視頻文件請求，它一開始就會(huì)發(fā)一個(gè) Range: 0-1 的請求，但是 Service worker 中處理請求的邏輯不能識(shí)別 Range 請求，把 Range 請求當(dāng)成普通請求處理，返回了 200。Safari 把 200 當(dāng)成了失敗請求，導(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"
);

這個(gè)文件給 workbox 注冊一個(gè)路由，指定對于視頻文件（以 .mp4 或 .webm 結(jié)尾的文件。如果你的網(wǎng)站有音頻文件也要一并處理）處理程序添加 rangeRequests 插件

然后在配置文件中注冊插件：

// modules:
[ "@nuxtjs/pwa", {
  workbox: {
    cachingExtensions: "@/plugins/workbox-range-request.js",
  }
} ],

注意必須使用 cachingExtensions 而不能用 routingExtensions，雖然注冊的是路由配置

這樣 Service worker 就可以處理帶 Range 頭的請求了，但是還不算完。workbox 會(huì)請求 googlecdn 動(dòng)態(tài)加載 js 腳本，如果你身在兲朝，由于眾所周知的原因加載腳本會(huì)失敗。

解決方案：

首先去 workbox 官網(wǎng)下載 release 包（筆者用的是 3.5.0 版本）：https://github.com/GoogleChro...

解壓后放在你項(xiàng)目的 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 這個(gè)路徑加載 js 腳本，而不走 googlecdn。

注意配置中使用的 config 當(dāng)前版本（@nuxtjs/pwa@2.5.0, 2018-09-20）還不支持，筆者給官方倉庫開了 Pull request 還在審核中，筆者是直接修改了 node_modules 里的文件。

完

在上 Service worker 之前最好想清楚。這玩意和 AppCache 一樣，上線簡單，想要下線就難了

請上公司官網(wǎng)體驗(yàn)效果：https://www.eoitek.com

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/97930.html

相關(guān)文章

  • vue cli 3.x 生產(chǎn)環(huán)境去除console采坑記

    摘要：移除總結(jié)使用插件配置如下移除沒成功報(bào)錯(cuò)如下配置參考優(yōu)化實(shí)踐刪除和配置最終還是沒有成功，報(bào)錯(cuò)如下使用插件安裝依賴庫配置如下生產(chǎn)環(huán)境移除總結(jié)該方案成功了 vue-cli 3.x 移除console總結(jié) 使用 uglifyjs-webpack-plugin 插件 配置如下: // vue.config.js const UglifyJsPlugin = require(uglifyjs-we...

    kgbook 評(píng)論0 收藏0

  • 小程序采坑記

    摘要：小程序采坑記上手小程序兩個(gè)月，多多少少遇到一些坑，在此簡單地作下總結(jié)。但一些人可能會(huì)遇過這種情況已知小程序組件默認(rèn)高度，如果子元素高度過高，不會(huì)自適應(yīng)高度。但實(shí)際上真是這樣嗎其實(shí)小程序的組件表現(xiàn)挺奇怪的。擅長微信小程序開發(fā)，系統(tǒng)管理后臺(tái)。 小程序采坑記 上手小程序兩個(gè)月，多多少少遇到一些坑，在此簡單地作下總結(jié)。希望能對那些跟我一樣有遇到過同樣問題的人提供一點(diǎn)幫助，避免掉進(jìn)這些坑，少走一...

    miya 評(píng)論0 收藏0

  • MySQL數(shù)據(jù)庫升級(jí)遷移填坑記

    MySQL數(shù)據(jù)庫升級(jí)遷移填坑記 img{ display:block; margin:0 auto !important; width:100%; } body{ width:75%; mar...

    IT那活兒 評(píng)論0 收藏1960

  • 2017-09-09 前端日報(bào)

    摘要：前端日報(bào)精選從零學(xué)習(xí)技術(shù)棧新版本及簡介石墨表格之應(yīng)用實(shí)戰(zhàn)一道面試題目引發(fā)的思考新為帶來的性能變化中文第期前端部署采坑記個(gè)最基本的面試問題及答案上插件開發(fā)簡介一開發(fā)入門掘金插件開發(fā)簡介二如何添加瀏覽器擴(kuò)展白名單掘金層疊相關(guān)知識(shí)指北掘 2017-09-09 前端日報(bào) 精選 從零學(xué)習(xí)React技術(shù)棧：React 新版本及 ES6 簡介石墨表格之 Web Worker 應(yīng)用實(shí)戰(zhàn)一道面試題目引發(fā)...

    lykops 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<