Blockly与PWA技术结合：构建离线可用的Web应用-优快云博客

Blockly与PWA技术结合：构建离线可用的Web应用

【免费下载链接】blockly The web-based visual programming editor. 项目地址: https://gitcode.com/gh_mirrors/bloc/blockly

1. 引言：为什么需要离线可用的Blockly应用？

在工业物联网（IIoT）现场、教育机构网络教室、偏远地区网络环境不稳定场景中，Web应用的离线可用性成为关键需求。Blockly作为基于Web的可视化编程工具（Visual Programming Editor），其云端依赖限制了在弱网或断网环境下的使用。而渐进式Web应用（Progressive Web App, PWA）技术通过Service Worker、Manifest文件和离线存储方案，为解决这一痛点提供了完整技术路径。

本文将系统讲解如何通过PWA改造使Blockly应用具备离线运行能力，包括Service Worker配置、离线资源缓存策略、本地数据持久化方案及完整实现案例。

2. PWA技术栈与Blockly的兼容性分析

2.1 核心技术组件适配性

PWA核心技术	功能作用	Blockly适配要点
Service Worker	代理网络请求、缓存资源	需拦截Blockly核心JS/CSS及媒体文件请求
Web App Manifest	定义应用安装信息	配置Blockly编辑器的启动图标和显示模式
Cache Storage	存储静态资源	需规划Blockly相关资源的缓存策略
IndexedDB	结构化数据持久化	可替代localStorage存储复杂积木结构

2.2 Blockly现有存储机制分析

Blockly原生提供localStorage备份功能（见appengine/storage.js）：

// 原生localStorage备份实现
BlocklyStorage.backupBlocks_ = function(workspace) {
  if ('localStorage' in window) {
    var xml = Blockly.Xml.workspaceToDom(workspace);
    var url = window.location.href.split('#')[0];
    window.localStorage.setItem(url, Blockly.Xml.domToText(xml));
  }
};

该实现存在存储容量限制（通常5MB）和数据结构简单的问题，在PWA改造中需升级为IndexedDB方案。

3. 实现方案：从0到1构建离线Blockly应用

3.1 项目初始化与依赖配置

3.1.1 环境准备

# 克隆项目仓库
git clone https://gitcode.com/gh_mirrors/bloc/blockly
cd blockly

# 安装开发依赖
npm install

3.1.2 目录结构调整

在项目根目录创建PWA相关文件：

blockly/
├── pwa/
│   ├── service-worker.js  # Service Worker脚本
│   └── manifest.json      # Web应用清单
└── demos/
    └── pwa-demo/          # 离线Blockly演示
        └── index.html     # 主应用页面

3.2 Service Worker实现与资源缓存策略

3.2.1 缓存版本与资源列表定义

创建pwa/service-worker.js文件，定义三级缓存策略：

// 缓存版本控制
const CACHE_VERSION = 'blockly-pwa-v1';
const STATIC_CACHE_NAME = `blockly-static-${CACHE_VERSION}`;
const RUNTIME_CACHE_NAME = 'blockly-runtime';

// 静态资源清单（核心资源优先缓存）
const STATIC_ASSETS = [
  '/dist/blockly_compressed.js',
  '/dist/blocks_compressed.js',
  '/media/sprites.svg',
  '/media/click.mp3',
  '/demos/pwa-demo/index.html',
  '/demos/pwa-demo/styles.css'
];

3.2.2 安装阶段：预缓存核心资源

// 安装事件：缓存静态资源
self.addEventListener('install', (event) => {
  // 强制激活新Service Worker
  self.skipWaiting();
  
  event.waitUntil(
    caches.open(STATIC_CACHE_NAME)
      .then(cache => cache.addAll(STATIC_ASSETS))
      .catch(err => console.error('Cache failed:', err))
  );
});

3.2.3 激活阶段：清理旧缓存

// 激活事件：清理过期缓存
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => 
          name.startsWith('blockly-') && name !== STATIC_CACHE_NAME && name !== RUNTIME_CACHE_NAME
        ).map(name => caches.delete(name))
      );
    }).then(() => self.clients.claim()) // 立即控制所有客户端
  );
});

3.2.4 fetch事件：资源请求路由策略

// 请求处理策略：网络优先+缓存回退
self.addEventListener('fetch', (event) => {
  // 对Blockly XML数据请求使用网络优先策略
  if (event.request.url.includes('/blockly-data') && 
      event.request.method === 'GET') {
    return event.respondWith(
      fetch(event.request)
        .then(networkResponse => {
          // 更新运行时缓存
          caches.open(RUNTIME_CACHE_NAME).then(cache => {
            cache.put(event.request, networkResponse.clone());
          });
          return networkResponse;
        })
        .catch(() => caches.match(event.request))
    );
  }

  // 静态资源请求使用缓存优先策略
  if (event.request.mode === 'navigate' || 
      (event.request.method === 'GET' && 
       event.request.headers.get('accept').includes('text/html'))) {
    return event.respondWith(
      fetch(event.request)
        .then(networkResponse => {
          // 更新缓存
          caches.open(RUNTIME_CACHE_NAME).then(cache => {
            cache.put(event.request, networkResponse.clone());
          });
          return networkResponse;
        })
        .catch(() => caches.match('/demos/pwa-demo/offline.html'))
    );
  }

  // 其他资源走缓存优先策略
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        // 同时更新缓存
        const fetchPromise = fetch(event.request).then(networkResponse => {
          caches.open(RUNTIME_CACHE_NAME).then(cache => {
            cache.put(event.request, networkResponse.clone());
          });
          return networkResponse;
        });
        return cachedResponse || fetchPromise;
      })
  );
});

3.3 离线数据持久化方案

3.3.1 IndexedDB存储实现

创建demos/pwa-demo/js/idb-storage.js，实现Blockly积木数据的本地持久化：

/**
 * IndexedDB存储管理器
 */
class BlocklyIDBStorage {
  constructor() {
    this.dbName = 'BlocklyOfflineDB';
    this.storeName = 'workspaces';
    this.version = 1;
    this.db = null;
  }

  // 初始化数据库
  init() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);

      request.onupgradeneeded = (event) => {
        this.db = event.target.result;
        if (!this.db.objectStoreNames.contains(this.storeName)) {
          // 创建带索引的对象存储
          const store = this.db.createObjectStore(this.storeName, { 
            keyPath: 'id', 
            autoIncrement: true 
          });
          store.createIndex('timestamp', 'timestamp', { unique: false });
        }
      };

      request.onsuccess = (event) => {
        this.db = event.target.result;
        resolve(this);
      };

      request.onerror = (event) => {
        console.error('IndexedDB初始化失败:', event.target.error);
        reject(event.target.error);
      };
    });
  }

  // 保存工作区数据
  saveWorkspace(workspaceId, workspaceXml, metadata = {}) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite');
      const store = transaction.objectStore(this.storeName);
      
      const entry = {
        workspaceId,
        xml: workspaceXml,
        timestamp: Date.now(),
        metadata: {
          name: metadata.name || `未命名项目_${Date.now()}`,
          description: metadata.description || '',
          tags: metadata.tags || []
        }
      };

      const request = store.put(entry);
      
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }

  // 加载工作区数据
  loadWorkspace(workspaceId) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readonly');
      const store = transaction.objectStore(this.storeName);
      const index = store.index('workspaceId');
      const request = index.get(workspaceId);
      
      request.onsuccess = () => resolve(request.result?.xml || null);
      request.onerror = () => reject(request.error);
    });
  }

  // 获取所有工作区列表
  listWorkspaces() {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readonly');
      const store = transaction.objectStore(this.storeName);
      const request = store.getAll();
      
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }
}

3.3.2 Blockly与IndexedDB集成

修改demos/pwa-demo/index.html，实现工作区数据的自动保存与恢复：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>离线Blockly编辑器</title>
  <link rel="manifest" href="/pwa/manifest.json">
  <script src="/dist/blockly_compressed.js"></script>
  <script src="/dist/blocks_compressed.js"></script>
  <script src="/build/msg/en.js"></script>
  <script src="js/idb-storage.js"></script>
  <style>
    #blocklyDiv {height: 80vh; width: 100%;}
    .toolbar {margin: 10px 0; padding: 10px; background: #f5f5f5;}
  </style>
</head>
<body>
  <div class="toolbar">
    <button id="saveBtn">保存项目</button>
    <button id="loadBtn">加载项目</button>
    <input type="text" id="projectName" placeholder="项目名称">
    <span id="status"></span>
  </div>
  <div id="blocklyDiv"></div>
  
  <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
    <category name="逻辑" colour="%{BKY_LOGIC_HUE}">
      <block type="controls_if"></block>
      <block type="logic_compare"></block>
      <block type="logic_boolean"></block>
    </category>
    <category name="循环" colour="%{BKY_LOOPS_HUE}">
      <block type="controls_repeat_ext"></block>
      <block type="controls_whileUntil"></block>
    </category>
    <category name="数学" colour="%{BKY_MATH_HUE}">
      <block type="math_number"></block>
      <block type="math_arithmetic"></block>
    </category>
  </xml>

  <script>
    // 初始化Blockly工作区
    const workspace = Blockly.inject('blocklyDiv', {
      media: '/media/',
      toolbox: document.getElementById('toolbox'),
      grid: {spacing: 20, length: 3, colour: '#ccc', snap: true}
    });

    // 初始化IndexedDB存储
    const idbStorage = new BlocklyIDBStorage();
    idbStorage.init().then(() => {
      document.getElementById('status').textContent = '离线存储就绪';
      
      // 尝试加载最近项目
      idbStorage.listWorkspaces().then(workspaces => {
        if (workspaces.length > 0) {
          // 按时间戳排序，取最新项目
          const latest = workspaces.sort((a, b) => b.timestamp - a.timestamp)[0];
          document.getElementById('projectName').value = latest.metadata.name;
          const xml = Blockly.utils.xml.textToDom(latest.xml);
          Blockly.Xml.domToWorkspace(xml, workspace);
        }
      });
    });

    // 保存按钮事件
    document.getElementById('saveBtn').addEventListener('click', () => {
      const projectName = document.getElementById('projectName').value || 
                         `项目_${Date.now()}`;
      const xml = Blockly.Xml.workspaceToDom(workspace);
      const xmlText = Blockly.Xml.domToText(xml);
      
      idbStorage.saveWorkspace(
        'default', // 使用固定工作区ID
        xmlText, 
        {name: projectName}
      ).then(id => {
        document.getElementById('status').textContent = `已保存: ${projectName}`;
      }).catch(err => {
        document.getElementById('status').textContent = `保存失败: ${err.message}`;
      });
    });

    // 注册Service Worker
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/pwa/service-worker.js')
          .then(registration => {
            console.log('ServiceWorker注册成功:', registration.scope);
          })
          .catch(err => {
            console.log('ServiceWorker注册失败:', err);
          });
      });
    }

    // 定期自动保存
    setInterval(() => {
      const xml = Blockly.Xml.workspaceToDom(workspace);
      const xmlText = Blockly.Xml.domToText(xml);
      const projectName = document.getElementById('projectName').value || '自动保存项目';
      
      idbStorage.saveWorkspace('default', xmlText, {name: projectName})
        .then(() => console.log('自动保存完成'));
    }, 30000); // 每30秒自动保存
  </script>
</body>
</html>

3.4 Web App Manifest配置

创建pwa/manifest.json文件，定义应用安装信息：

{
  "name": "Blockly离线编程环境",
  "short_name": "Blockly离线版",
  "description": "基于Blockly的离线可视化编程工具",
  "start_url": "/demos/pwa-demo/index.html",
  "display": "standalone",
  "background_color": "#f8f9fa",
  "theme_color": "#4285f4",
  "icons": [
    {
      "src": "/media/apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "/media/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/media/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "related_applications": [],
  "prefer_related_applications": false
}

在应用入口HTML中添加引用：

<link rel="manifest" href="/pwa/manifest.json">
<meta name="theme-color" content="#4285f4">

4. 部署与测试验证

4.1 本地开发服务器配置

修改gulpfile.js，添加PWA资源的服务配置：

// 在现有服务配置中添加
gulp.task('serve', function() {
  gulp.src('.')
    .pipe(server({
      port: 8000,
      livereload: true,
      directoryListing: true,
      open: true,
      middleware: function(req, res, next) {
        // 支持Service Worker作用域
        if (req.url.endsWith('/service-worker.js')) {
          res.setHeader('Service-Worker-Allowed', '/');
        }
        next();
      }
    }));
});

启动开发服务器：

npm run serve

4.2 离线功能测试流程

4.2.1 基础离线测试

访问http://localhost:8000/demos/pwa-demo/index.html
等待页面完全加载（确认"离线存储就绪"状态）
创建简单积木程序并保存
在Chrome开发者工具中切换到"网络"标签，勾选"离线"选项
刷新页面，验证Blockly编辑器和之前保存的程序是否正常加载

4.2.2 高级功能测试矩阵

测试场景	测试步骤	预期结果
资源缓存完整性	清除缓存后离线访问	所有Blockly控件和媒体资源正常加载
数据持久化	离线创建/修改/保存程序后恢复网络	数据无丢失且时间戳正确
版本更新检测	修改Service Worker版本后刷新	新缓存被正确安装且旧缓存被清理
冲突解决	同一程序在离线和在线环境分别修改	应提示用户选择保留版本或合并

5. 性能优化与最佳实践

5.1 缓存策略优化

5.1.1 资源优先级划分

将Blockly资源分为三级缓存优先级：

// 优先级1: 核心运行时资源（立即缓存）
const CRITICAL_ASSETS = [
  '/dist/blockly_compressed.js',
  '/dist/blocks_compressed.js',
  '/demos/pwa-demo/index.html',
  '/media/sprites.svg'
];

// 优先级2: 扩展功能资源（空闲时缓存）
const SECONDARY_ASSETS = [
  '/build/msg/zh-hans.js',
  '/demos/pwa-demo/offline.html',
  '/media/click.mp3'
];

// 优先级3: 按需缓存资源（首次访问后缓存）
const ONDEMAND_ASSETS = [
  '/generators/javascript.js',
  '/generators/python.js'
];

5.1.2 实现资源预加载与惰性缓存

// 在Service Worker激活后执行
self.addEventListener('activate', (event) => {
  event.waitUntil(
    Promise.all([
      // 激活后立即缓存二级资源
      caches.open(STATIC_CACHE_NAME).then(cache => {
        return cache.addAll(SECONDARY_ASSETS);
      }),
      // 触发客户端页面的预加载逻辑
      self.clients.claim().then(() => {
        self.clients.matchAll().then(clients => {
          clients.forEach(client => {
            client.postMessage({type: 'CACHE_READY'});
          });
        });
      })
    ])
  );
});

5.2 存储方案优化

5.2.1 数据压缩与增量存储

使用LZString压缩XML数据减少存储空间占用：

// 引入lz-string库（需单独添加依赖）
import LZString from 'lz-string';

// 优化保存方法
saveWorkspace(workspaceId, workspaceXml, metadata = {}) {
  // 压缩XML数据
  const compressedXml = LZString.compressToUTF16(workspaceXml);
  
  return new Promise((resolve, reject) => {
    // ... 原有存储逻辑，使用compressedXml替代原始xml
  });
}

5.2.2 版本控制与数据迁移

实现IndexedDB数据版本迁移机制：

// 数据库升级处理
request.onupgradeneeded = (event) => {
  const oldVersion = event.oldVersion;
  this.db = event.target.result;
  
  if (oldVersion < 1) {
    // 版本1: 初始结构
    const store = this.db.createObjectStore(this.storeName, { 
      keyPath: 'id', 
      autoIncrement: true 
    });
    store.createIndex('timestamp', 'timestamp', { unique: false });
  }
  
  if (oldVersion < 2) {
    // 版本2: 添加压缩标志
    const store = event.target.transaction.objectStore(this.storeName);
    store.createIndex('compressed', 'compressed', { unique: false });
  }
};

6. 总结与未来展望

6.1 项目成果与价值

通过PWA技术改造，Blockly应用获得以下核心能力提升：

完全离线运行：通过Service Worker和Cache Storage实现所有核心功能离线可用
数据持久化存储：使用IndexedDB替代localStorage，提供更大容量和更完善的数据管理
应用化体验：通过Manifest文件支持"安装"到主屏幕，获得接近原生应用的使用体验

6.2 技术演进路线图

6.2.1 短期改进方向（0-6个月）

实现离线状态同步机制，解决多设备数据一致性问题
优化初始加载性能，采用代码分割减少首屏加载时间
添加离线使用统计和崩溃报告功能

6.2.2 长期发展规划（1-2年）

集成WebAssembly编译的Blockly内核，提升复杂程序运行性能
开发基于Web Share Target API的程序分享功能
实现P2P协作编辑能力，支持本地网络内的离线协作

6.3 扩展应用场景

改造后的离线Blockly应用可拓展至以下场景：

工业现场编程：在网络隔离的工业环境中配置自动化逻辑
移动教学终端：教育机构在网络不稳定的教室中开展编程教学
应急响应系统：灾害现场离线配置指挥流程可视化程序
物联网设备配置：离线环境下为边缘设备配置Blockly程序

通过本文介绍的PWA改造方案，Blockly实现了从纯Web应用到离线优先应用的转变，为在网络不稳定环境下推广可视化编程教育和工业应用提供了技术基础。随着Web平台能力的持续增强，未来Blockly的离线体验将进一步接近原生应用，同时保持Web技术栈的跨平台优势。

7. 参考资料与学习资源

Blockly官方文档：存储指南
MDN Web Docs：Service Worker API
Google Developers：PWA离线指南
IndexedDB最佳实践：IDBKeyRange索引使用

【免费下载链接】blockly The web-based visual programming editor. 项目地址: https://gitcode.com/gh_mirrors/bloc/blockly

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考