Chuyển đổi trang web WordPress sang Progressive Web App

Question

Tôi đang xây dựng một Ứng dụng web tiến bộ nhưng có rất ít tài liệu và hỗ trợ trực tuyến cho đến thời điểm này. Tôi liệt kê tất cả các câu hỏi của tôi trong email này.

1. Hỗ trợ hiện tại của API công nhân dịch vụ (Chế độ ngoại tuyến) cho máy tính để bàn là gì? Tôi đã viết một ứng dụng nhỏ hoạt động ở chế độ ngoại tuyến cho thiết bị di động (Android-Chrome) nhưng không hoạt động cho Máy tính để bàn của tôi (Chrome 42). Chúng tôi cần để định cấu hình môi trường phát triển cho việc này vì vậy chúng tôi cần biết chúng tôi sẽ cần những gì để thử nghiệm các ứng dụng của mình. Nó cũng không hoạt động trên IOS-Safari/Chrome.

2. Công việc dịch vụ sử dụng bộ nhớ đệm rộng rãi và có một rất tốt cách để gỡ lỗi hoặc internals công nhân dịch vụ không đăng ký trên dekstop Chrome; nhưng nếu tôi chạy ứng dụng của mình trên thiết bị di động, tôi sẽ xóa bộ nhớ cache của nhân viên dịch vụ như thế nào?

3. Nếu tôi có ứng dụng đáp ứng (Trang web WordPress) và cần chuyển đổi nó thành PWA; tôi có cần viết lại ứng dụng với RestAPI cho phiên bản di động không? (Đọc App Shell của PWA). Trong PWA, vỏ ứng dụng tách biệt với dữ liệu tuy nhiên trong CMS như Dữ liệu WordPress không tách biệt với giao diện người dùng.

Tôi đã tìm kiếm những câu trả lời này rất lâu và không thể tìm thấy bất kỳ hỗ trợ nào phù hợp.

Answer 1

Hỗ trợ hiện tại của API công nhân dịch vụ (Chế độ ngoại tuyến) cho máy tính để bàn là gì? Tôi đã viết một ứng dụng nhỏ hoạt động ở chế độ ngoại tuyến dành cho thiết bị di động (Android-Chrome) nhưng không hoạt động cho Máy tính để bàn của tôi (Chrome 42). Chúng ta cần phải cấu hình môi trường phát triển cho điều này vì vậy chúng ta cần phải biết chúng ta sẽ cần những gì để thử nghiệm các ứng dụng của mình. Nó không hoạt động trên iOS-Safari/Chrome.

Safari hiện không hỗ trợ nhân viên dịch vụ ngay bây giờ nhưng it should work in Chrome 42 mặc dù bạn nên cân nhắc cập nhật trình duyệt của mình. Dù sao, bạn có thể kiểm tra trạng thái của nghệ thuật trong một loạt các địa điểm:

• công nhân Dịch vụ: https://platform-status.mozilla.org/#service-worker
• Đẩy API: https://platform-status.mozilla.org/#push
• Background Sync: https://platform-status.mozilla.org/#background-sync

Thông tin thêm về SW:

• Nhân viên dịch vụ có sẵn sàng không? https://jakearchibald.github.io/isserviceworkerready/
• Tôi có thể sử dụng không? http://caniuse.com/#feat=serviceworkers

Công việc dịch vụ sử dụng bộ nhớ đệm rộng rãi và có một cách rất tốt để gỡ lỗi hoặc internals công nhân dịch vụ không đăng ký trên dekstop Chrome; nhưng nếu tôi chạy ứng dụng của mình trên thiết bị di động thì tôi sẽ xóa bộ nhớ cache của nhân viên dịch vụ như thế nào?

Bạn cần phải debug Chrome for Android from Desktop Chrome.

Dù sao, URL chrome: // serviceworkers-internals khả dụng trên Chrome dành cho Android mặc dù không có cách nào dễ dàng xóa bộ nhớ cache ngoại tuyến.

Nếu tôi có ứng dụng đáp ứng (Trang web WordPress) và cần chuyển đổi nó thành PWA; Tôi có cần phải viết lại ứng dụng bằng RestAPI cho phiên bản di động không? (Đọc App Shell của PWA). Trong PWA, vỏ ứng dụng tách biệt với dữ liệu tuy nhiên trong CMS giống như dữ liệu WordPress không tách biệt với giao diện người dùng.

Không. Thực ra, WP có kiến ​​trúc rất tốt để tách nội dung khỏi chủ đề. Vấn đề chạy trên máy chủ nhưng bạn không cần trang web của mình chạy trên máy khách để trở thành PWA. Mozilla đang hỗ trợ một suite of WP plugins để giúp progressivizing cài đặt WordPress của bạn:

• Offline Shell [github] xác định tài sản shell của bạn (ví dụ: các file theme) và bộ nhớ cache chúng trong một bộ nhớ cache ngoại tuyến.
• Offline Content [github] xác định nội dung động của bạn và lưu vào bộ nhớ cache khi người dùng truy cập vào.
• Web Push [github] cho phép bạn đẩy thông báo thời gian thực tới người đọc ngay khi bạn xuất bản nội dung mới.
• Add To Home Screen [github] thu hút độc giả của bạn bằng cách đặt WordPress của bạn trong Màn hình chính.

Đó là tất cả các plugin rất trẻ nhưng bạn có thể theo dõi chúng trên GitHub và đóng góp nếu bạn muốn!

Answer 2

Câu trả lời rất hay và hữu ích đã được thêm vào bởi @Salva, nhưng tôi nghĩ hãy để tôi thêm vài thứ có thể hữu ích.

Đối với phần thứ ba, tôi đã làm việc trên nền tảng chuyển đổi ứng dụng web tiến bộ tự động, https://www.escalatingweb.com. Tôi nghĩ bạn có thể sử dụng nền tảng này để chuyển đổi ứng dụng web của bạn trên WordPress thành ứng dụng web nâng cao. Bạn có thể sử dụng nó để chuyển đổi ứng dụng web của bạn thành pwa trong vòng vài phút. Tôi cũng đã viết một hướng dẫn rất hay để sử dụng nền tảng chuyển đổi pwa tự động http://www.techromance.com/2017/07/22/automatic-pwa-converter-platform/.

Đối với phần thứ hai, Chỉ cần thêm câu trả lời ở trên và cho mục đích thử nghiệm, bạn có thể xóa tất cả bộ nhớ cache cho một trang web cụ thể khỏi cài đặt trang web.

Đối với phần đầu, không có gì để thêm như vậy.

P.S. Xin vui lòng không ai bị xúc phạm trong trường hợp họ tìm thấy nó như là một cách rẻ tiền thúc đẩy nền tảng của tôi. Mục đích là chỉ để giúp cộng đồng, bằng cách xây dựng nền tảng hoặc làm cho nó nhận thức được đối tượng cần thiết. Cảm ơn bạn @McNab về đề xuất này. :)