iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 24
0
Modern Web

30 天 Progressive Web App 學習筆記系列 第 24

Day 24 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache-webpack-plugin 簡介

在大型專案裡,通常我們還會透過 webpack、將 JavaScript、CSS、圖片做模組化,藉著 webpack 的設定、統一管理檔案,讓開發更單純。

sw-precache-webpack-plugin 是什麼?

sw-precache-webpack-plugin 是一個 Webpack plugin,底層使用 sw-precache,可以透過的 sw-precache 設定、來生成 Service Worker 檔案。

針對 Service Work 和 sw-precache,若有不清楚的地方、可以參考之前分享的文章:


sw-precache-webpack-plugin 如何安裝?

我們可以透過 npm 進行安裝:

npm install --save-dev sw-precache-webpack-plugin  

sw-precache-webpack-plugin 如何使用?

var path = require('path');
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');


module.exports = {
  context: __dirname,

  entry: {
    main: path.resolve(__dirname, 'src/index'),
  },

  output: {
    path: path.resolve(__dirname, 'src/bundles/'),
    filename: '[name]-[hash].js',
  },

  plugins: [
    new SWPrecacheWebpackPlugin(
      {
        cacheId: 'my-project-name',
        filename: 'my-service-worker.js',
        maximumFileSizeToCacheInBytes: 4194304,
        runtimeCaching: [{
          handler: 'cacheFirst',
          urlPattern: /[.]mp3$/,
        }],
      }
    ),
  ]
}

sw-precache-webpack-plugin 的 Configuration 介紹

  • cacheId [String](非必填但應該要填): 設定 cache 的 unique 名稱
  • filename [String](非必填): 用來指定產出的檔案名稱,上方範例的檔名是 my-service-worker.js ,預設檔名為 service-worker.js
  • filepath [String](非必填): 用來指定產出的檔案路徑和名稱,上方範例沒有設定 ,預設使用 webpack.output.path + options.filename,範例中設定 output 的路徑為 src/bundles/ , 所以自動產生的 Service Worker 檔案會在 src/bundles/my-service-worker.js 裡。
  • maximumFileSizeToCacheInBytes: 設定 Cache 的最大檔案限制、單位為byte,範例為 4194304 (4 MB)
  • runtimeCaching: 用來處理 cache 的行為, runtimeCaching.urlPatternruntimeCaching.handler 為必填
    • runtimeCaching.urlPattern: 用 Regular Expression 或 String 去指定 URL
    • runtimeCaching.handler: 設定 request 的處理方式
      • networkFirst: 先透過網路發送 request,如果成功取得 response 則儲存在 cache 裡,不然就回傳舊的 cache,取得基本的資料、提供頁面顯示。
      • cacheFirst: 先去判斷有沒有對應的 cache,如果有、就直接回傳舊的 cache,如果沒有、才透過網路發送 request,獲取資料。
      • fastest: 同時『透過網路發送 request』並『判斷是否有舊的 cache 可供存取』,看兩個哪一個先返回資源(若有舊的 cache 通常會優先回應),即使返回 cache,仍然會發送 request,確保更新 cache 檔案。
      • cacheOnly: 只會去存取 cache,如果沒有舊的 cache 可供存取,就會失敗,不會再發出 request。
      • networkOnly: 透過網路發送 request,如果 request 失敗,則代表請求失敗。

參考文件


本人小小筆記,如有錯誤或需要改進的部分,歡迎給予回饋。
我將會用最快的速度修正,m(_ _)m。謝謝

上一篇
Day 23 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache 應用
下一篇
Day 25 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache-webpack-plugin 應用
系列文
30 天 Progressive Web App 學習筆記30

尚未有邦友留言

立即登入留言