能下載自己本身的 web app

html spa

淺水員 2025-05-18 15:11:59 ‧ 2374 瀏覽

分享至

想法

平常在使用文書軟體，對檔案點兩下就可以編輯

但一般 web app 卻要：

瀏覽器輸入網址進入 web app 網頁
點類似「匯入檔案」之類的按鈕把之前製作的資料匯入

假設 web app 「匯出檔案」時，也連帶把 app 本身包進去（變成一個新的 html）
這樣使用者點兩下這個 html 檔案就可以直接使用
（開啟的同時代入上次編輯的資料）

使用者如果後續還有編輯新的資料
由於包進了原本的 app，一樣可以再「匯出檔案」成另外一個 html
（允許遞迴的自我複製，不需要連接網路也能用）

討論問題

以上功能有什麼做法（想看看有沒有其它更好的方式）
是否有 framework 可以套用

目前做法

主要是利用 function.prototype.toString 可以取得函式本身程式碼的功能

假設原本的 app 已經打包成單一 html 檔案
（除了 javascript 部分可以先不處理）

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <title>標題</title>
</head>
<body>
    <!-- HTML 元素、css、data-url 圖片等 -->
    <!-- 將打包並內嵌的 javascript 區塊 -->
</body>
</html>

步驟1

將整份 html 分成三部分

第一部分：上半部 html

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <title>標題</title>
</head>
<body>
    <!-- HTML 元素、css、data-url 圖片等 -->

第二部分：下半部 html

</body>
</html>

第三部分：javascript 區塊

<script>
    window.payload = '';
    (function bundle(){
        function getApp(payload) {
            return base64_decode('上半部 html 的 base64') +
                '<script>' + 
                'window.payload = ' + JSON.stringify(payload) + ';' +
                '(' + bundle.toString() + ')();' + 
                '<\/script>' +
                base64_decode('下半部 html 的 base64');
        }
        /** 打包後的 javascript */
    })();
</script>

注意第三部分中，只有註解的部分是原本的 javascript
這裡有再次加工外包了一些東西
如此一來我們可以修改原先的 javascript：