MSW，顧名思義是使用 Service Worker 實作 API mocking 的套件，在今年的 JSDC 也有大大分享這個。主要看點之一就是它可以在 network 層發出真的 request，並且由 service worker 攔截請求，回傳開發者設計的資料。

這在開發階段 API 還沒完成時，可以很方便前端先行開發，也很容易針對各種資料狀況撰寫測試。由於最近的開發需求是要前端先實作功能出來，所以就決定選這個套件來採坑看看，並且順道熟悉 service worker 的運作。

MSW 的官方文件其實很簡潔好懂，在寫相關的 mocking code 其實還蠻好上手的。不過在建置階段一度還卡蠻久的。所以想說特別寫這篇記錄一下，如果有人也跟我有障礙的也可以看看XD。

建置步驟

1. 安裝相關套件

yarn add -DW msw copy-webpack-plugin workbox-webpack-plugin

2. 在根目錄中建立 public 資料夾
3. 在 src 中建立 mocks 資料夾
4. mocks 資料夾新增 handlers.ts & browser.ts

• handlers.ts

export const handlers = [
    rest.get<null, IXXXOOO>('/api/example', (req, res, ctx) => {
        return res(
            ctx.status(200),
            ctx.json({...baseApiResult, data: Dummy.SampleData})
        );
    }),
    //...
];

• browser.ts

import { setupWorker } from 'msw';
import { handlers } from './handlers'

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers);

5. 在程式進入點新增判斷啟用 msw 的 worker

import { worker } from '/service/mocks/browser';

if (isTesting) {
    worker.start();
}

7. 執行msw的指令，在之前建立的 public目錄下，產生 service worker 的程式檔 mockServiceWorker.js

npx msw init public/

8. 在 webpack 的設定檔，新增跟 service worker 相關的設定

const CopyWebpackPlugin = require('copy-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');


 plugins: [
     //...
     new CopyWebpackPlugin([
        { from: path.resolve(__dirname, '../public', 'mockServiceWorker.js'), to: 'mockServiceWorker.js' },
    ]),
    new WorkboxPlugin.GenerateSW(),
 ]

9. 在 index.html 偵測當前瀏覽器有無支援 service worker，有的話就註冊 mockServiceWorker.js

<script>
    // Check that service workers are supported
    if ('serviceWorker' in navigator) {
        // Use the window load event to keep the page load performant
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/mockServiceWorker.js');
        });
    }
</script>

10. 如果使用 Chrome 作為開發用的瀏覽器，前往 chrome://flags，並將以下選項設為 Enabled

• Allow invalid certificates for resources loaded from localhost.
• Insecure origins treated as secure

其中，在 Insecure origins treated as secure 提供的文字欄位中，輸入開發用的origin。輸入完後點下面的 Relaunch 重新啟用 Chrome

其實最一開始是嘗試 https + openssl 產生 self-signed certificate ，允許瀏覽器下載 service worker 的 script。不過一直卡在 Chrome 沒辦法讀到產出的憑證，如果有成功過的善心人士，希望可以跟我分享一下QQ

11. 執行 webpack dev server，看到 dev console 有顯示以下畫面表示建置成功囉