Tutorial 2x Alternative user friendly instructions for PWA iOS install - Hướng dẫn thay thế cài đặt PWA iOS thân thiện với người dùng cho XenForo 2

[PVS]

Alternative user friendly instructions for PWA iOS install - Hướng dẫn thay thế cài đặt PWA iOS thân thiện với người dùng cho XenForo 2

Điều kiện tiên quyết:

Bạn cần biết cách tìm kiếm và chỉnh sửa phrase, tải hình ảnh lên máy chủ của mình và xác định đường dẫn URL và các chỉnh sửa template rất cơ bản. Điều này dành cho 2.2.14 trở lên, nhưng có thể dễ dàng điều chỉnh cho 2.2.13.

PWA phải được thiết lập trên diễn đàn của bạn

Thời gian cần thiết: 5 - 10 phút

Vấn đề​

Mặc dù cài đặt PWA rất dễ, người dùng thấy hướng dẫn cài đặt video hiện tại khó làm theo vì các slide chạy quá nhanh. Ngoài ra, không có hướng dẫn bằng văn bản hoặc đồ họa như mũi tên có thể giải thích những gì thực sự cần làm.

Quy trình rất đơn giản, chỉ có 2 hoặc 3 thao tác (chạm vào biểu tượng chia sẻ, cuộn xuống và chạm vào Thêm vào Màn hình chính ) nên đối với nhiều người, hướng dẫn bằng văn bản đơn giản sẽ hiệu quả hơn. Trước tiên, đã thử tạo video của riêng mình bằng FCPX và Compressor để thay thế video mặc định nhưng thấy rằng sẽ rất tốn thời gian vì tất cả những gì cần là một vài bước đơn giản đó và một hoặc hai hình ảnh.

Một điều khác là có vẻ thừa khi có cụm từ Install the app cũng như nút Install. Và sau đó, có vẻ không đúng khi nút đó thực sự không cài đặt, nó chỉ dẫn đến hướng dẫn trong video được đề cập ở trên.

Vì vậy, thay vì thế này:

​

Chúng ta có thể có điều này:

​

Giải pháp​

Sau khi mày mò một chút với Final Cut Pro, chỉ cần thêm một số văn bản bằng cách chỉnh sửa template sẽ nhanh hơn và có lẽ tốt hơn.

1 Xóa phrase thừa và sử dụng nó trong nút Call To Action thay thế​

Chỉnh sửa template PAGE_CONTAINER:

1.1 Tìm <div class="offCanvasMenu-installBanner js-installPromptContainer" style="display: none;" data-xf-init="install-prompt">

1.2 Xóa dòng tiếp theo, tức là xóa: <div class="offCanvasMenu-installBanner-header">{{ phrase('install_app') }}</div>
(Điều này sẽ xóa phần thừa "Install the app")

1.3 Trong dòng sau đó, tức là <xf:button class="js-installPromptButton">{{ phrase('install') }}</xf:button> thay {{ phrase('install') }} thành {{ phrase('install_app') }}

1.4 (Tùy chọn: thay đổi từ ngữ của Install the app thành How to install the app). Tìm kiếm cụm từ install_app , chỉnh sửa phrase thành How to install the app.

2. Hướng dẫn cài đặt​

2.1 Tải hình ảnh lên​

• Tải xuống hình ảnh được cung cấp (hoặc tự tạo hình ảnh của riêng bạn)
• Giải nén thư mục PWA Images.zip
• Upload cả share-icon.svg và add_to_home.jpg lên máy chủ của bạn.
• Ghi lại đường dẫn URL của chúng

2.2 Hướng dẫn​

Chỉnh sửa lại template PAGE_CONTAINER (một vài dòng bên dưới template chúng ta đã xóa ở trên):

Xóa liên kết video:

<p>
                                    {{ phrase('follow_along_with_video_below_to_see_how_to_install_our_site_as_web_app') }}
                                </p>
                                <p style="text-align: center">
                                    <video src="{{ base_url(property('publicPwaInstallVideoUrl')) }}"
                                        width="280" height="480" autoplay loop muted playsinline></video>
                                </p>

Thay thế code đó bằng code sau:

<strong>NB: For Safari start at step 2</strong>
    <ol style="padding-left:15px">
        <li>(Firefox only) Tap on the hamburger menu <xf:fa icon="fa-bars" aria-hidden="true"/> at bottom right </li>
        <li>Tap on the share icon <img src="PATH_TO_IMAGE/share-icon.svg" height="22" width="18" alt="Share icon" /> (bottom of page)</li>
        <li>Scroll down and tap on <em>Add to Home Screen:</em></li>
    </ol>
    <img src="PATH_TO_IMAGE/add_to_home.jpg" height="290" width="250" alt="add to home screen" />

Thay đổi PATH_TO_IMAGE bằng URL hình ảnh thực tế.

Lưu template!

Kết quả:

​

Chúc các bạn thành công.

Nguồn: xenforo.com​