Chia sẻ đơn giản trên web với Navigator.Share

Nhiều bạn biết rằng tôi đam mê liên lạc giữa các ứng dụng , đặc biệt là hành động chia sẻ. Một trong những điều mà tôi đã khuyến khích bất cứ ai muốn thực hiện phiên bản tiếp theo của Ý định web là tập trung vào một trường hợp sử dụng rất nhỏ và cụ thể.

Mọi người đều tốt. Matt Giuca trong nhóm Chrome đã làm việc với một API đơn giản ( Chia sẻ trên web ) có khả năng kết nối các trang web với các ứng dụng gốc và nó có trong Chrome Dev Channel trên Android để kiểm tra. Điều tuyệt vời là Matt và nhóm cũng đang nỗ lực để trang web hoặc dịch vụ của riêng bạn được đăng ký làm người nhận chia sẻ gốc, do đó cho phép chia sẻ ứng dụng web,> chia sẻ ứng dụng và web-> web chia sẻ.

Tất cả vẫn còn trong giai đoạn đầu, nhưng tôi nghĩ rằng nó đáng để thử nghiệm và cung cấp cho chúng tôi càng nhiều phản hồi càng tốt trong khi điều này đang được phát triển. Bạn có thể nhận được tất cả thông tin có liên quan tại ChromeStatus , nhưng để giúp bạn tiết kiệm, hãy nhấp vào đây là các liên kết quan trọng:

• Khởi chạy theo dõi lỗi
• Ý định thực hiện
• Mẫu vật
• Chia sẻ giải thích
• Chia sẻ mục tiêu

Tôi vô cùng phấn khích bởi API này. Nó mở ra một phần hoàn toàn mới của hệ sinh thái cho các nhà phát triển web và nếu API chia sẻ hoạt động tốt thì mô hình có thể được mở rộng sang ứng dụng khác để tương tác ứng dụng.

Làm thế nào để có được công việc này

1. Tải kênh Chrome Dev trên Android .
2. Chuyển đến bất kỳ trang nào trên blog của tôi và nhấp vào nút chia sẻ ở cuối mỗi bài viết.
3. Chia sẻ.

 navigator.share({title: document.title, text: window.location.href, url: window.location.href})
          .then(() => console.log('Successful share'),
           error => console.log('Error sharing:', error));

Đây là cách tôi đã tích hợp nó vào Blog của tôi

1. Kiểm tra xem API có khả dụng không, nếu không dự phòng cho giải pháp hiện có của tôi ( https://paul.kinlan.me/shaming-nively-on-android-from-the-web/ ).
2. Đợi nội dung có sẵn và sau đó tìm phần tử chia sẻ.
3. Đánh chặn và tiêu thụ nhấp chuột.
4. hoa tiêu.share ()

if(navigator.share !== undefined) {
    document.addEventListener('DOMContentLoaded', e => {
      var shareBtn = document.querySelector('div.share a');
      shareBtn.addEventListener('click', clickEvent => {
        clickEvent.preventDefault();
        navigator.share({title: document.title, text: window.location.href, url: window.location.href})
          .then(() => console.log('Successful share'),
           error => console.log('Error sharing:', error));
      });
    });
}