App web wp va odoo trên điện thoại

Nội dung

Progressive web application cung cấp trải nghiệm giống như ứng dụng có thể cài đặt trên máy tính để bàn và thiết bị di động, được xây dựng và phân phối trực tiếp qua web. Chúng là những ứng dụng web nhanh và đáng tin cậy. Và quan trọng nhất, chúng là các ứng dụng web hoạt động trên mọi trình duyệt. Nếu bạn đang xây dựng một ứng dụng web ngay hôm nay, bạn đang trên con đường xây dựng một Progressive web application.

Hãy nhớ PWA yêu cầu trang web là HTTPS

Ứng dụng web tiến bộ (PWA) là một công nghệ mới kết hợp tính năng tốt nhất của web di động và ứng dụng tốt nhất dành cho thiết bị di động để tạo ra trải nghiệm web di động vượt trội. Chúng được cài đặt trên điện thoại giống như một ứng dụng bình thường (ứng dụng web) và có thể được truy cập từ màn hình chính.
Người dùng có thể quay lại trang web của bạn bằng cách khởi chạy ứng dụng từ màn hình chính của họ và tương tác với trang web của bạn thông qua giao diện giống như ứng dụng. Khách truy cập trở lại của bạn sẽ trải nghiệm thời gian tải gần như tức thì và tận hưởng những lợi ích hiệu suất tuyệt vời của PWA của bạn!

WordPress

Ứng dụng web siêu tiến bộ giúp bạn dễ dàng chuyển đổi trang web WordPress của mình thành một ứng dụng web tiến bộ ngay lập tức!

Sau khi SuperPWA được cài đặt, người dùng duyệt trang web của bạn từ thiết bị di động được hỗ trợ sẽ thấy thông báo “Thêm vào màn hình chính” (từ cuối màn hình) và có thể ‘cài đặt trang web của bạn’ trên màn hình chính của thiết bị của họ. Mỗi trang đã truy cập được lưu trữ cục bộ trên thiết bị của họ và sẽ có sẵn để đọc ngay cả khi họ ngoại tuyến!

SuperPWA rất dễ cấu hình, chỉ mất chưa đến một phút để thiết lập Ứng dụng web tiến bộ của bạn! SuperPWA thực hiện gỡ cài đặt sạch sẽ bằng cách xóa mọi mục nhập cơ sở dữ liệu và tệp mà nó tạo. Trên thực tế, không có cài đặt mặc định nào được lưu vào cơ sở dữ liệu cho đến khi bạn lưu nó theo cách thủ công lần đầu tiên.

Odoo

Service worker được cấu trúc bằng cách sử dụng ‘Odoo Class’ để có cùng hành vi kế thừa lớp trong ‘trang người dùng’. Lưu ý rằng ‘Odoo Bootstrap’ không được hỗ trợ vì vậy bạn không thể sử dụng ‘request’ ở đây.

Tất cả nội dung của service worker có thể được tìm thấy trong ‘static / src / js / worker’. Việc quản lý giữa ‘trang người dùng’ và nhân viên dịch vụ được thực hiện trong ‘pwa_manager.js’.

Mục đích của mô-đun này là tạo cơ sở để tạo các ứng dụng PWA.

Cài đặt

Sau khi cài đặt mô-đun từ trang https://apps.odoo.com/apps/modules/12.0/web_pwa_oca/ hoặc https://odoo-community.org/shop/product/progressive-web-application-5382#attr=8303 , duyệt qua odoo của bạn trên điện thoại di động, bạn sẽ có thể cài đặt nó như một PWA.

Chúng tôi thực sự khuyên bạn nên sử dụng mô-đun này với bố cục đáp ứng, giống như bố cục được cung cấp bởi web_responsive.

Mô-đun này được thiết kế để được sử dụng bởi người dùng cuối của Odoo (nhân viên).

Khi một Ứng dụng web tiến bộ được cài đặt, ứng dụng này trông và hoạt động giống như tất cả các ứng dụng đã cài đặt khác. Nó khởi chạy từ cùng một nơi mà các ứng dụng khác khởi chạy. Nó chạy trong một ứng dụng không có thanh địa chỉ hoặc giao diện người dùng trình duyệt khác. Và giống như tất cả các ứng dụng đã cài đặt khác, đó là một ứng dụng cấp cao nhất trong trình chuyển đổi tác vụ.

Trong Chrome, bạn có thể cài đặt Ứng dụng web tiến bộ thông qua menu ngữ cảnh ba chấm.

Trong trường hợp trước đó bạn đã cài đặt web_pwa , hãy chạy các bước sau với odoo shell (./odoo-bin shell -d <database> –addons-path=’your/addons/path’) (python3 odoo-bin shell -d db_name) , sau khi đã cài đặt openupgradelib (pip install openupgradelib):

>>> from openupgradelib import openupgrade
>>> openupgrade.update_module_names(env.cr, [('web_pwa', 'web_pwa_oca')], merge_modules=False)
>>> env.cr.commit()

Cấu hình

Mô-đun này cho phép bạn đặt các thông số sau trong cài đặt để tùy chỉnh giao diện của ứng dụng

Tên PWA (mặc định là “Odoo PWA”)
Tên viết tắt PWA (mặc định là “Odoo PWA”)
Biểu tượng PWA ( SVG ) (mặc định là “/web_pwa_oca/static/img/icons/odoo-logo.svg”)

Để định cấu hình PWA của bạn:

Đi tới Settings > General Settings > Progressive Web App.
Đặt các thông số ( Lưu ý: Biểu tượng phải là tệp SVG )
Save

Sử dụng

Để sử dụng PWA của bạn:

Mở ứng dụng web Odoo bằng trình duyệt được hỗ trợ (Xem https://caniuse.com/?search=A2HS )
Mở các tùy chọn trình duyệt
Nhấp vào ‘Thêm vào Màn hình chính’ (hoặc ‘Cài đặt’ trong các trình duyệt khác)

** Có thể bạn cần làm mới trang để tải nhân viên dịch vụ sau khi sử dụng tùy chọn.

Các vấn đề đã biết / Lộ trình

Tích hợp API thông báo
Tích hợp API chia sẻ web
Tạo mô-đun Portal_pwa , nhằm mục đích được sử dụng bởi người dùng front-end (khách hàng, nhà cung cấp…)

Hiện thừa kế của John Resig thực hiện không hỗ trợ async chức năng vì this._super không thể được gọi bên trong một lời hứa. Vì vậy, chúng tôi cần sử dụng cách giải quyết sau:

Natural ‘async/await’ example (This breaks “_super” call):

var MyClass = OdooClass.extend({
    myFunc: async function() {
        const mydata = await ...do await stuff...
        return mydata;
    }
});

Same code with the workaround:

var MyClass = OdooClass.extend({
    myFunc: function() {
        return new Promise(async (resolve, reject) => {
            const mydata = await ...do await stuff...
            return resolve(mydata);
        });
    }
});

Khắc phục sự cố khi cố gắng chạy trong localhost với một số cơ sở dữ liệu. Trình duyệt không gửi cookie và tệp kê khai web trả về 404.
Firefox không thể phát hiện chế độ ‘độc lập’. Xem https://bugzilla.mozilla.org/show_bug.cgi?id=1285858
Firefox vô hiệu hóa nhân viên dịch vụ ở chế độ riêng tư. Xem https://bugzilla.mozilla.org/show_bug.cgi?id=1601916