Phát triển các ứng dụng canvas có khả năng hoạt động ngoại tuyến

Người dùng di động thường cần phải làm việc hiệu quả ngay cả khi họ bị hạn chế kết nối hoặc không có kết nối. Khi bạn xây dựng một ứng dụng canvas, bạn có thể thực hiện các tác vụ sau:

  • Mở Power Apps Di động và chạy ứng dụng khi thiết bị không được kết nối mạng.
  • Xác định khi nào một ứng dụng ngoại tuyến, trực tuyến hoặc trong kết nối dùng bao nhiêu trả tiền bây nhiêu bằng cách sử dụng đối tượng tín hiệu Kết nối.
  • Đồng bộ hóa dữ liệu giữa thiết bị của bạn và máy chủ.

Nếu ứng dụng của bạn kết nối với Dataverse thì tính năng hỗ trợ ngoại tuyến sẽ được tích hợp sẵn ·. Power Apps sẽ cho phép bạn tải dữ liệu xuống thiết bị của mình và tải các thay đổi trở lại Dataverse. Nếu ứng dụng của bạn không sử dụng Dataverse, bạn có thể sử dụng các bộ sưu tập và tận dụng LoadDataSaveData có chức năng lưu trữ cơ bản khi ngoại tuyến.

Lưu ý

  • Khả năng ngoại tuyến cho ứng dụng canvas khả dụng khi chạy ứng dụng bằng trình phát Power Apps Di động gốc trên iOS, Android và Windows.
  • Ứng dụng canvas chạy trong trình duyệt web không thể chạy ngoại tuyến, ngay cả khi sử dụng trình duyệt web trên thiết bị di động.
  • Các ứng dụng canvas trong Teams được giới hạn ở 1 MB dữ liệu thông qua các hàm LoadData và SaveData—hữu ích cho một số lượng nhỏ các xâu văn bản, số và ngày. Việc sử dụng các hình ảnh hoặc phương tiện khác là không phù hợp với giới hạn này. Thông tin khác: Tham chiếu hàm LoadDataSaveData

Bật hỗ trợ ngoại tuyến trong ứng dụng canvas dựa trên Dataverse

Đối với Microsoft Dataverse ứng dụng canvas dựa trên nền tảng này, bạn phải sử dụng khả năng ngoại tuyến được tích hợp sẵn với trải nghiệm ngoại tuyến trước tiên . Để biết thêm thông tin, hãy xem Thiết lập ngoại tuyến trên thiết bị di động cho ứng dụng canvasLàm việc với ứng dụng canvas ngoại tuyến. Chỉ cần bật công tắc, ứng dụng của bạn có thể hoạt động với Dataverse dữ liệu mọi lúc mọi nơi, dù có hoặc không có kết nối mạng. Bạn chỉ cần xây dựng ứng dụng của mình bằng các công thức Power Fx tiêu chuẩn và tính năng ngoại tuyến sẽ xử lý mọi vấn đề phức tạp cho bạn.

Sử dụng LoadData và SaveData cho tất cả các trình kết nối khác

Phần này bao gồm một ví dụ sử dụng dữ liệu Twitter. Một ví dụ đơn giản hơn không yêu cầu kết nối được bao gồm trong tham chiếu hàm LoadDataSaveData.

Xem video này để tìm hiểu cách tạo ứng dụng canvas hỗ trợ ngoại tuyến không sử dụng Dataverse dữ liệu:

Giới hạn

LoadDataSaveData kết hợp để tạo thành một cơ chế đơn giản để lưu trữ số lượng nhỏ dữ liệu trên thiết bị cục bộ. Bằng cách sử dụng các hàm này, bạn có thể để thêm các tính năng ngoại tuyến đơn giản vào ứng dụng.

Các hàm này bị giới hạn bởi dung lượng bộ nhớ của ứng dụng vì chúng hoạt động trên bộ sưu tập trong bộ nhớ. Bộ nhớ khả dụng có thể thay đổi tùy theo thiết bị, hệ điều hành, bộ nhớ Power Apps Mobile sử dụng và sự phức tạp của ứng dụng về màn hình và điều khiển. Nếu bạn lưu trữ nhiều megabyte dữ liệu, hãy kiểm tra ứng dụng của bạn với các kịch bản dự kiến trên các thiết bị mà bạn mong đợi nó chạy. Thông thường bạn sẽ có 30-70 megabyte bộ nhớ khả dụng.

Các hàm cũng không tự động giải quyết xung đột hợp nhất khi thiết bị trực tuyến. Cấu hình về dữ liệu được lưu và cách xử lý kết nối lại tùy thuộc vào người tạo khi viết biểu thức.

Để cập nhật về khả năng ngoại tuyến, hãy quay lại chủ đề này và đăng ký blog Power Apps.

Tổng quan

Khi bạn thiết kế các kịch bản ngoại tuyến, trước tiên, bạn nên xem xét cách ứng dụng của bạn hoạt động với dữ liệu. Ứng dụng trong Power Apps chủ yếu truy cập dữ liệu thông qua một bộ trình kết nối mà nền tảng cung cấp, chẳng hạn như SharePoint, Office 365 và Microsoft Dataverse. Bạn cũng có thể xây dựng các trình kết nối tùy chỉnh cho phép các ứng dụng truy cập vào bất kỳ dịch vụ nào cung cấp điểm cuối RESTful. Đây có thể là API Web hoặc dịch vụ như Hàm Azure. Tất cả các trình kết nối này sử dụng HTTPS qua Internet, điều đó có nghĩa là người dùng của bạn phải trực tuyến để họ truy cập dữ liệu và mọi khả năng khác mà dịch vụ cung cấp.

Ứng dụng Power Apps có trình kết nối.

Xử lý dữ liệu ngoại tuyến

Trong Power Apps, bạn có thể lọc, tìm kiếm, sắp xếp, tổng hợp và thao tác dữ liệu theo cách nhất quán bất kể nguồn dữ liệu. Các nguồn có phạm vi từ bộ sưu tập trong bộ nhớ trong ứng dụng đến danh sách được tạo bằng Microsoft Lists tới cơ sở dữ liệu SQL và Dataverse. Do tính nhất quán này, bạn có thể dễ dàng nhắm mục tiêu lại một ứng dụng để sử dụng nguồn dữ liệu khác. Quan trọng hơn đối với các kịch bản ngoại tuyến, bạn có thể sử dụng các bộ sưu tập cục bộ để quản lý dữ liệu mà hầu như không có thay đổi nào đối với logic của ứng dụng. Trong thực tế, các bộ sưu tập cục bộ là cơ chế chính để xử lý dữ liệu ngoại tuyến.

Tạo ứng dụng ngoại tuyến

Để tập trung vào các khía cạnh ngoại tuyến của việc phát triển ứng dụng, chủ đề này minh họa một kịch bản đơn giản tập trung xung quanh Twitter. Bạn sẽ xây dựng một ứng dụng cho phép bạn đọc các bài đăng trên Twitter và gửi tweet trong khi ngoại tuyến. Khi ứng dụng trực tuyến, ứng dụng sẽ đăng tweet và tải lại dữ liệu cục bộ.

Ở mức cao, ứng dụng thực hiện các tác vụ sau:

  • Khi người dùng mở ứng dụng:

    • Nếu thiết bị đang trực tuyến, ứng dụng sẽ tìm nạp dữ liệu thông qua trình kết nối Twitter và điền vào bộ sưu tập với dữ liệu đó.
    • Nếu thiết bị ngoại tuyến, ứng dụng sẽ tải dữ liệu từ tệp trong bộ nhớ đệm cục bộ bằng cách sử dụng hàm Tải dữ liệu.
    • Người dùng có thể gửi tweet. Nếu ứng dụng đang trực tuyến, nó sẽ đăng các tweet trực tiếp lên Twitter và làm mới bộ nhớ đệm cục bộ.
  • Cứ sau năm phút khi ứng dụng trực tuyến:

    • Ứng dụng này đăng bất kỳ tweet nào trong bộ nhớ đệm cục bộ.
    • Ứng dụng làm mới bộ nhớ đệm cục bộ và lưu nó bằng cách sử dụng hàm Lưu dữ liệu.

Bước 1: Thêm Twitter vào một ứng dụng điện thoại trống

  1. Tạo một ứng dụng canvas trống có bố cục dành cho Điện thoại.
  2. Trên tab Dạng xem, chọn Nguồn dữ liệu.
  3. Trong ngăn Dữ liệu, chọn Thêm nguồn dữ liệu.
  4. Chọn Kết nối mới > Twitter > Tạo.
  5. Nhập thông tin đăng nhập của bạn, tạo kết nối và sau đó đóng ngăn Dữ liệu.

Bước 2: Thu thập các tweet hiện có

  1. Trong ngăn Dạng xem cây, chọn Ứng dụng rồi đặt thuộc tính OnStart cho công thức này:

    If( Connection.Connected,
        ClearCollect( LocalTweets, Twitter.SearchTweet( "PowerApps", {maxResults: 10} ) );
            Set( statusText, "Online data" ),
        LoadData( LocalTweets, "LocalTweets", true );
            Set( statusText, "Local data" )
    );
    SaveData( LocalTweets, "LocalTweets" );
    

    Công thức tải tweet.

  2. Trong ngăn Dạng xem cây, chọn menu dấu chấm lửng cho đối tượng Ứng dụng rồi chọn Chạy OnStart để chạy công thức đó.

    Chạy công thức tải tweet.

    Lưu ý

    Hàm LoadDataSaveData có thể hiển thị lỗi trong Power Apps Studio vì trình duyệt không hỗ trợ chúng. Tuy nhiên, chúng sẽ hoạt động bình thường sau khi bạn triển khai ứng dụng này lên thiết bị.

Công thức này kiểm tra xem thiết bị có trực tuyến hay không:

  • Nếu thiết bị đang trực tuyến, công thức tải tối đa 10 tweet với cụm từ tìm kiếm "PowerApps" thành một bộ sưu tập LocalTweets.
  • Nếu thiết bị ngoại tuyến, công thức sẽ tải bộ nhớ đệm cục bộ từ một tệp có tên "LocalTweets" nếu có.
  1. Trên tab Chèn, hãy chọn Thư viện > Chiều cao linh hoạt trống.

  2. Đặt thuộc tính Mục của điều khiển Thư viện thành LocalTweets.

  3. Trong mẫu thư viện, thêm ba điều khiển Nhãn và đặt thuộc tính Văn bản của mỗi nhãn thành một trong các giá trị sau:

    • ThisItem.UserDetails.FullName & " (@" & ThisItem.UserDetails.UserName & ")"
    • Text(DateTimeValue(ThisItem.CreatedAtIso), DateTimeFormat.ShortDateTime)
    • ThisItem.TweetText
  4. Làm cho văn bản trong nhãn cuối cùng được in đậm để thư viện giống với ví dụ này.

    Thư viện hiển thị các tweet mẫu.

Bước 4: Hiển thị trạng thái kết nối

  1. Trong thư viện, chèn nhãn rồi đặt thuộc tính Màu sắc thành Màu đỏ.

  2. Đặt thuộc tính Văn bản của nhãn mới nhất thành công thức sau:

    If( Connection.Connected, "Connected", "Offline" )

Công thức này xác định xem thiết bị có trực tuyến hay không. Nếu có, nhãn hiển thị Đã kết nối; nếu không, nhãn này là Ngoại tuyến.

Bước 5: Thêm một hộp để soạn tweet

  1. Trong nhãn trạng thái kết nối, chèn một điều khiển Văn bản nhập và đổi tên nó NewTweetTextInput.

  2. Đặt thuộc tính Mặc định của hộp nhập văn bản thành "".

    Thư viện thông tin trạng thái và hộp nhập văn bản.

Bước 6: Thêm một nút để đăng tweet

  1. Trong hộp nhập văn bản, thêm một điều khiển Nút và đặt thuộc tính Văn bản thành giá trị này:

    "Tweet"

  2. Đặt thuộc tính OnSelect của nút thành công thức này:

    If( Connection.Connected,
        Twitter.Tweet( "", {tweetText: NewTweetTextInput.Text} ),
        Collect( LocalTweetsToPost, {tweetText: NewTweetTextInput.Text} );
            SaveData( LocalTweetsToPost, "LocalTweetsToPost" )
    );
    Reset( NewTweetTextInput );
    
  3. Trong thuộc tính OnStart cho Ứng dụng, hãy thêm một dòng vào cuối công thức:

    If( Connection.Connected,
        ClearCollect( LocalTweets, Twitter.SearchTweet( "PowerApps", {maxResults: 100} ) );
            Set( statusText, "Online data" ),
        LoadData( LocalTweets, "LocalTweets", true );
            Set( statusText, "Local data" )
    );
    SaveData( LocalTweets, "LocalTweets" );
    LoadData( LocalTweetsToPost, "LocalTweetsToPost", true );  // added line
    

    Chạy công thức để tải các tweet với dòng không có nhận xét.

Công thức này xác định xem thiết bị có trực tuyến hay không:

  • Nếu thiết bị đang trực tuyến, nó sẽ đăng tweet ngay lập tức.
  • Nếu thiết bị ngoại tuyến, thiết bị sẽ ghi lại tweet trong bộ sưu tập LocalTweetsToPost và lưu nó vào thiết bị.

Sau đó, công thức đặt lại văn bản trong hộp nhập văn bản.

Bước 7: Kiểm tra các tweet mới

  1. Ở bên phải của nút, thêm một điều khiển Bộ hẹn giờ.

    Ứng dụng cuối cùng.

  2. Đặt thuộc tính Thời lượng của bộ hẹn giờ thành 300.000.

  3. Đặt thuộc tính AutoStartRepeat của bộ hẹn giờ thành true.

  4. Đặt thuộc tính OnTimerEnd của bộ hẹn giờ thành công thức sau:

    If( Connection.Connected,
        ForAll( LocalTweetsToPost, Twitter.Tweet( "", {tweetText: tweetText} ) );
        Clear( LocalTweetsToPost );
        ClearCollect( LocalTweets, Twitter.SearchTweet( "PowerApps", {maxResults: 10} ) );
        SaveData( LocalTweets, "LocalTweets" );
    )
    

Công thức này xác định xem thiết bị có trực tuyến hay không. Nếu có, ứng dụng sẽ tweet tất cả các mục trong bộ sưu tập LocalTweetsToPost rồi xóa bộ sưu tập.

Kiểm tra ứng dụng

  1. Mở ứng dụng bằng Power Apps Mobile trên thiết bị di động được kết nối với Internet.

    Các tweet hiện có xuất hiện trong bộ sưu tập và trạng thái hiển thị Đã kết nối.

  2. Ngắt kết nối thiết bị khỏi Internet bằng cách bật chế độ máy bay của thiết bị và tắt wi-fi.

    Nhãn trạng thái cho thấy ứng dụng là Ngoại tuyến.

  3. Trong khi thiết bị ngoại tuyến, hãy viết một tweet bao gồm Power Apps và sau đó chọn nút Tweet.

    Tweet được lưu trữ cục bộ trong bộ sưu tập LocalTweetsToPost.

  4. Ngắt kết nối thiết bị khỏi Internet bằng cách bật chế độ máy bay của thiết bị và bật wi-fi.

    Trong vòng năm phút, ứng dụng đăng tweet, xuất hiện trong bộ sưu tập.

Chúng tôi hy vọng bài viết này cung cấp cho bạn thông tin tổng quan về các khả năng mà Power Apps có để xây dựng các ứng dụng ngoại tuyến. Như mọi khi, vui lòng cung cấp thông tin phản hồi trong diễn đàn của chúng tôi và chia sẻ ví dụ về các ứng dụng ngoại tuyến của bạn trong blog cộng đồng Power Apps.

Lưu ý

Bạn có thể cho chúng tôi biết bạn thích dùng ngôn ngữ nào cho tài liệu không? Làm một cuộc khảo sát ngắn. (xin lưu ý, khảo sát này bằng tiếng Anh)

Cuộc khảo sát sẽ mất khoảng bảy phút. Không có dữ liệu cá nhân nào được thu thập (điều khoản về quyền riêng tư).