Odoo PWA移动应用：离线功能与推送通知实现指南-优快云博客

Odoo PWA移动应用：离线功能与推送通知实现指南

【免费下载链接】odoo Odoo. Open Source Apps To Grow Your Business. 项目地址: https://gitcode.com/GitHub_Trending/od/odoo

你是否曾在外出时因网络不稳定而无法访问Odoo系统？客户紧急订单无法及时处理？团队协作因断网而中断？本文将详细介绍如何利用Odoo的PWA（Progressive Web App，渐进式Web应用）功能，实现离线数据访问与实时推送通知，让你的业务管理系统随时随地可用。

读完本文后，你将能够：

理解Odoo PWA的核心架构与实现原理
配置并启用离线功能，确保关键业务数据随时可用
实现推送通知功能，及时响应业务事件
通过实际案例掌握PWA功能的测试与优化方法

Odoo PWA架构概述

Odoo的PWA功能主要通过两个核心组件实现：Web Manifest（Web应用清单）和Service Worker（服务工作线程）。这两个组件协同工作，使Odoo能够像原生移动应用一样运行，支持离线访问、本地缓存和系统级通知。

Web Manifest是一个JSON文件，提供了应用的元数据，如名称、图标、启动URL等，使浏览器能够将Odoo识别为可安装的应用。Odoo的Web Manifest实现位于addons/web/controllers/webmanifest.py，它定义了应用的基本信息和行为。

Service Worker是一个在后台运行的脚本，充当客户端和服务器之间的代理，负责缓存资源、处理网络请求和推送通知。Odoo的Service Worker实现位于addons/web/static/src/service_worker.js，它管理着离线数据访问和缓存策略。

离线功能实现详解

Odoo的离线功能允许用户在没有网络连接的情况下访问关键业务数据和功能。这一功能对于经常需要在外出时使用Odoo的销售人员、仓库管理员和现场服务人员尤为重要。

缓存策略与实现

Odoo的Service Worker采用了混合缓存策略，结合了预缓存和运行时缓存：

安装阶段缓存：在Service Worker安装时，会预缓存主页和离线页面：

self.addEventListener("install", (event) => {
    event.waitUntil(
        Promise.all([
            // 缓存主页
            fetch(homepageURL).then((res) => (res.ok ? storeDataOnCache(homepageURL, res) : null)),
            // 缓存离线页面
            caches.open(cacheName).then((cache) => cache.add(offLineURL)),
        ])
    );
});

运行时缓存：在运行过程中，Service Worker会缓存用户访问的页面和资源，以便在离线时使用：

const navigateOrDisplayOfflinePage = async (request) => {
    try {
        const response = await fetch(request);
        if (response.ok && !isDebugAssets) {
            storeDataOnCache(request.url, response.clone());
        }
        return response;
    } catch (requestError) {
        // 网络错误时返回缓存内容或离线页面
        if (sessionInfo?.length && !isDebugAssets) {
            const cachedResponse = await readDataOnCache(request.url);
            if (cachedResponse) {
                return cachedResponse;
            }
        }
        return readDataOnCache(offLineURL);
    }
};

会话信息管理

为了确保离线功能的安全性和正确性，Odoo的Service Worker会提取并管理会话信息：

const extractSessionInfo = (htmlContent) => {
    const match = htmlContent.match(/odoo\.__session_info__\s*=\s*({.*?});/s);
    return match && match[1] ? match[1] : null;
};

这段代码从HTML内容中提取会话信息，并在缓存时替换为占位符，在提供缓存内容时再恢复，确保会话信息的安全性和正确性。

离线页面定制

Odoo提供了默认的离线页面，位于addons/web/views/webclient_templates.xml中的web.webclient_offline模板。你可以根据需要自定义此页面，添加公司标识、联系方式或其他相关信息。

Web Manifest配置与应用安装

Web Manifest是PWA的关键组件，它提供了应用的元数据，使浏览器能够将Odoo识别为可安装的应用。

核心配置项解析

Odoo的Web Manifest配置位于addons/web/controllers/webmanifest.py，核心配置包括：

def _get_webmanifest(self):
    web_app_name = request.env['ir.config_parameter'].sudo().get_param('web.web_app_name', 'Odoo')
    manifest = {
        'name': web_app_name,
        'scope': '/odoo',
        'start_url': '/odoo',
        'display': 'standalone',
        'background_color': '#714B67',
        'theme_color': '#714B67',
        'prefer_related_applications': False,
    }
    # 图标配置
    icon_sizes = ['192x192', '512x512']
    manifest['icons'] = [{
        'src': '/web/static/img/odoo-icon-%s.png' % size,
        'sizes': size,
        'type': 'image/png',
    } for size in icon_sizes]
    # 快捷方式配置
    manifest['shortcuts'] = self._get_shortcuts()
    return manifest

主要配置项说明：

name：应用名称，可通过系统参数web.web_app_name自定义
scope：应用作用域，限制PWA的访问范围
start_url：启动URL，指定应用启动时打开的页面
display：显示模式，standalone表示独立窗口模式，类似原生应用
background_color和theme_color：背景色和主题色，影响应用的显示样式
icons：应用图标，提供不同尺寸以适应不同设备
shortcuts：应用快捷方式，可在应用图标上下文菜单中显示

应用快捷方式配置

Odoo的Web Manifest支持应用快捷方式，方便用户快速访问常用功能。默认配置包括邮件、CRM、项目等模块的快捷方式：

def _get_shortcuts(self):
    module_names = ['mail', 'crm', 'project', 'project_todo']
    try:
        module_ids = request.env['ir.module.module'].search([('state', '=', 'installed'), ('name', 'in', module_names)]) \
                                                    .sorted(key=lambda r: module_names.index(r["name"]))
    except AccessError:
        return []
    # ... 快捷方式生成逻辑 ...
    return shortcuts

你可以通过修改module_names列表来自定义快捷方式，添加或移除模块。

安装PWA应用

配置完成后，用户可以将Odoo安装为PWA应用：

在支持PWA的浏览器中访问Odoo
浏览器会提示"安装Odoo"或在地址栏显示安装图标
点击安装，按照提示完成安装过程

安装后，Odoo将作为独立应用出现在用户的应用列表中，点击即可打开，无需通过浏览器访问。

推送通知实现

推送通知是PWA的重要功能，它允许应用在后台向用户发送通知，即使应用没有打开。Odoo的推送通知功能可以及时提醒用户新消息、任务分配和业务事件。

通知权限申请

在使用推送通知前，需要获取用户的通知权限。Odoo在用户登录后会请求通知权限：

// 请求通知权限
if (Notification.permission !== "granted") {
    Notification.requestPermission().then(permission => {
        if (permission === "granted") {
            console.log("Notification permission granted.");
        }
    });
}

服务端实现

Odoo的推送通知服务端实现位于addons/mail/models/mail_thread.py，通过消息队列和WebSocket实现实时通知。

客户端接收与显示

在客户端，Service Worker负责接收推送事件并显示通知：

self.addEventListener('push', function(event) {
    const data = event.data?.json();
    if (data) {
        const title = data.title || "Odoo Notification";
        const options = {
            body: data.body,
            icon: data.icon || "/web/static/img/odoo-icon-192x192.png",
            data: { url: data.url }
        };
        event.waitUntil(self.registration.showNotification(title, options));
    }
});

// 点击通知打开对应页面
self.addEventListener('notificationclick', function(event) {
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data.url || "/odoo")
    );
});

测试与调试

为确保PWA功能正常工作，Odoo提供了完整的测试用例和调试方法。

测试用例

Odoo的PWA测试用例位于addons/web/tests/test_webmanifest.py，包括Web Manifest、Service Worker和离线页面的测试：

def test_webmanifest(self):
    """测试Web Manifest路由返回正确的内容"""
    self.authenticate("admin", "admin")
    response = self.url_open("/web/manifest.webmanifest")
    self.assertEqual(response.status_code, 200)
    self.assertEqual(response.headers["Content-Type"], "application/manifest+json")
    data = response.json()
    self.assertEqual(data["name"], "Odoo")
    self.assertEqual(data["scope"], "/odoo")
    # ... 其他断言 ...

调试工具与方法

浏览器开发者工具：使用Chrome或Firefox的开发者工具的"应用"标签页，可以检查Service Worker状态、缓存内容和Web Manifest：

离线模式测试：在开发者工具的"网络"标签页中，可以设置离线模式，测试应用在无网络情况下的表现。
Service Worker更新：当修改Service Worker代码后，浏览器会检测到变化并自动更新：

self.addEventListener('install', function(event) {
    // 安装新版本时跳过等待，立即激活
    self.skipWaiting();
});

self.addEventListener('activate', function(event) {
    // 激活时接管所有客户端
    event.waitUntil(self.clients.claim());
});

部署与优化

部署注意事项

HTTPS要求：PWA功能（尤其是Service Worker和推送通知）需要在HTTPS环境下运行。确保你的Odoo部署使用HTTPS。
缓存策略调整：根据业务需求调整缓存策略，决定哪些资源需要缓存，缓存多长时间。
图标准备：准备不同尺寸的应用图标，确保在各种设备上都有良好的显示效果：

192x192像素：普通设备
512x512像素：高分辨率设备

Odoo默认提供了这些图标：addons/web/static/img/odoo-icon-192x192.png和addons/web/static/img/odoo-icon-512x512.png。

性能优化

缓存大小控制：Service Worker应控制缓存大小，避免占用过多用户设备存储空间：

// 限制缓存大小的示例代码
async function limitCacheSize(cacheName, maxItems) {
    const cache = await caches.open(cacheName);
    const keys = await cache.keys();
    if (keys.length > maxItems) {
        return Promise.all(keys.slice(0, keys.length - maxItems).map(key => cache.delete(key)));
    }
}

资源预加载：预加载关键资源，提高应用启动速度：

<link rel="preload" href="/web/static/src/css/odoo.css" as="style">
<link rel="preload" href="/web/static/src/js/odoo.js" as="script">

懒加载非关键资源：对非关键资源实施懒加载，减少初始加载时间：

// 懒加载图片示例
document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
    
    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    }
});

实际应用案例

销售团队移动办公

某销售团队利用Odoo PWA功能，实现了以下移动办公场景：

离线客户拜访记录：销售人员在客户现场无网络时，可记录拜访笔记和订单信息，网络恢复后自动同步。
实时订单通知：新订单生成时，销售人员立即收到推送通知，及时跟进处理。
移动报价生成：在客户现场即可生成报价单，通过PWA离线功能确保报价过程不受网络影响。

仓库管理离线操作

仓库管理员使用Odoo PWA实现了以下功能：

离线库存盘点：在仓库网络信号不佳区域，可离线进行库存盘点，完成后同步数据。
入库/出库操作：即使网络中断，也能继续进行入库和出库操作，确保仓库运营不中断。
库存预警通知：当库存低于安全水平时，自动推送通知给仓库管理员。

总结与展望

Odoo的PWA功能为用户提供了接近原生应用的体验，特别是离线功能和推送通知极大地提升了移动办公的效率。通过合理配置Web Manifest和Service Worker，企业可以为员工提供更加灵活和可靠的业务管理工具。

未来，Odoo的PWA功能可能会进一步增强，包括更精细的缓存控制、背景同步API的应用以及与移动设备硬件功能的集成（如摄像头、GPS等）。企业应密切关注这些发展，充分利用PWA技术提升业务管理效率。

要开始使用Odoo PWA功能，只需确保你的Odoo实例满足以下条件：

使用HTTPS协议
安装并启用web模块
确保Service Worker和Web Manifest正确配置

立即体验Odoo PWA，让你的业务管理系统摆脱网络限制，随时随地高效工作！

【免费下载链接】odoo Odoo. Open Source Apps To Grow Your Business. 项目地址: https://gitcode.com/GitHub_Trending/od/odoo

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