Paul Kinlan
February 15 2019
Webアプリがアプリの世界で効果的に競争するためには、アプリが期待されるすべての場所に統合される必要があるとよく言われます。インターアプリの通信は、Webプラットフォームの主要な不足している作品の一つであり、具体的には最後の主要な不足している機能の一つは、ネイティブレベルの共有です:Webアプリケーションが取得できるようにする必要がありdata out of their siloや他のウェブサイトやアプリへの。他のネイティブアプリやサイトからデータを受信できるようにする必要もあります。
File Share Target APIは、現在Chrome Canaryに含まれているAPIの変革者です。このAPIはWeb Share Target APIを拡張したWeb Share Target API 、アプリやサイトがWebサイトへの単純なリンクやテキストをシステム共有機能に統合することでそれらを共有できるようにします。
この非常に静的なファイルブログはWeb Share Target APIを利用しているので、私はすぐにshare linksに興味があることをあらゆるAndroidアプリケーションから、そして先週のI enabled the File Share Target API so that I can upload images to my blog directly from the Camera app on Androidから見つけることができます。この記事は、私がどのようにしてそれを行ったかについてのものです(そして、Jake Archibaldからのコードをいくつか盗みました - 彼がWORDS2に行っている統合に関する多くのバグをsquoosh.appました)。
File Share Target APIは完全にプログレッシブであるという点で非常に斬新なAPIです。アプリケーションがForm POST要求を処理できる場合は、このAPIと簡単に統合できます。基本的な流れは次のとおりです。ユーザーがネイティブピッカーからアプリケーションを選択すると、ChromeはForm POSTリクエストをサーバーに送信します。それを使用するのはサービス担当者またはサーバー上の処理です。
Webアプリケーションにファイルを共有するためのサポートを追加するには、2つのことを行う必要があります。
1.マニフェストファイルを介してファイルを共有するためのサポートを宣言する。 2.サービスワーカーでフォームPOST要求を処理します。
マニフェストは、ホストシステムからWebアプリケーションへの共有のマッピング方法をホストシステムに宣言します。以下のマニフェストでは、基本的に「ユーザーが 'image / *'タイプのファイルを共有する場合は '/ share / image /'に対してForm POSTリクエストを行い、データに 'file'という名前を付けます。
manifest.json * JSON { "name": "Blog: Share Image", "short_name": "Blog: Share Image", "start_url": "/share/image/", "theme_color": "#000000", "background_color": "#000000", "icons": [ { "sizes": "192x192", "src": "/images/me.
Paul Kinlan
February 13 2019
これはAndroid上のShare Target APIのテストであり、ファイルを共有することができます。
あなたがここに何かを見れば、それからすべてが良いです:)
CSS TricksのAtishay Jainは、私の心の近くの領域について書いています。
Hyperlinks are the oldest and the most popular feature of the web. The word hypertext (which is the ht in http/s) means text having hyperlinks. The ability to link to other people’s hypertext made the web, a web — a set of connected pages. This fundamental feature has made the web a very powerful platform and it is obvious that the world of apps needs this feature.
Paul Kinlan
April 15 2018
Share Target API is now in Chrome breaking down one of the last silos of native platforms
Paul Kinlan
January 20 2018
この記事は1年以上遅れています。それは私の草案に長年詰まっていましたが、私はそのアイデアが2018年に解決する必要があると思っています。また、昨年、他の問題も発生しています。
私はインドネシアで2016年に開発者とぼんやりとチャットをしていましたが、それはウェブがねじれている(彼らは文字通りの言葉だった)という会話の中で出てきました。この問題の要点は、今日のユーザー、特に初めてオンラインになったユーザーがサイロ内部でコンテンツを作成していることです。場合によっては、これらのサイロウェブのような外観と感じるが、これらのプラットフォームでのみ使用可能ですが、すべてのネイティブ・アプリケーションには能力があるという事実によって永続化されていますユーザーがコンピューティングデバイス上に持っているすべてのインタラクションに積極的に参加することができますが、Webはそうではなく、それがキラーです。 Webエクスペリエンスにコンテンツを取得することは不可能ですが、コンテンツを取得するのは簡単です。
より具体的には、私たちが議論したいくつかのシナリオがありました。
あなたはあなたのカメラアプリで写真を撮って、あなたは画像を共有したいと思う。あなたは共有を押しますが、ネイティブアプリだけがリストに表示されます。ウェブはユーザーのための選択肢の一部ではないため、ウェブはその価値を捕らえることはできません。 2.ブラウザで現在のページを共有したい。あなたは共有を押しますが、ネイティブアプリだけがリストに表示されます。情報を共有するという行為は、ユーザーがWebからネイティブの経験を失うことを意味します。3. Webページ内に直接コンテンツを作成して共有したい場合、唯一のオプションは共有するウィジェットを含めることです。
2017年の早い段階で、Web(ネイティブChromeのユーザー)にネイティブ共有をもたらしたnavigator.shareのリリースを見ました。皮肉なことに、 navigator.share APIはネイティブアプリを使ってユーザーの流れを永続させます。
2018年には、ネイティブのプラットフォームで永続化されているサイロをより効率的にするためにウェブを愛するでしょう。ウェブは、ユーザがデバイスとのあらゆる主要な相互作用に参加できる必要があります。
2017年の後半、AndroidのChromeで「ホーム画面に追加された機能が強化されました」が開始されました。つまり、ユーザーがあなたの Progressive Web Appをインストールするたびに、実際のAPKがユーザーのために生成されます。 Android上のAPKは、すべての目的と目的で、ウェブアプリケーションがネイティブアプリケーションとみなされることを意味します。 「ホーム画面への追加が改善されました」という最初の反復では、PWAの範囲内にあるURLへのすべてのナビゲーションがPWAで直接開かれることを意味しています。
将来は少し明るいです。 Chromeは共有ターゲットAPIで作業しています。これにより、サイトが受信に参加することを宣言できますの “株式”。これは、ユーザーがリンクを共有するたびに、あなたのPWAを一覧表示できることを意味します。
Twitter Lite(https://lite.twitter.com)のような大きなサイトでは、ユーザーがネイティブアプリを使用する必要なく共有できるようになるため、この開発には非常に興奮していますそれはまた、ほんの一握りのユーザーが使用するかもしれない小さなニッチサイトも同じエコシステムの一部である可能性があることを意味します。
APIはまだ画像やバイナリデータを扱うことができませんが、Androidエコシステムを見れば、ACTION_SENDインテントが最もよく使われるインテントであり、主にテキストとリンクを共有するためのものです。
それはスタートです。ウェブは一度に1つのサイロを分解しています。
Paul Kinlan
August 27 2017
Michael Mahemoffはウェブの可能性についてたくさん教えてくれました。 Mikeと一緒に作業する前に、私はWeb上に構築しました。リンク可能性や発見などの利点を理解しましたが、可能なことを完全に把握することはできませんでした。
マイク氏は、「Webは私のAPIです」と言って、マイクロフォーマットやその他の構造化データを使ってページ内の自分のサイトとデータを公開し、簡単なXMLHttpRequestとCORS APIを使用して、別のブラウザコンテキスト
Anyway, what’s cool about this is you can treat the web as an API. The Web is my API. “Scraping a web page” may sound dirtier than “consuming a web service”, but it’s the cleaner approach in principle. A website sitting in your browser is a perfectly human-readable depiction of a resource your program can get hold of, so it’s an API that’s self-documenting. The best kind of API.
Paul Kinlan
August 25 2017
私はWeb Intentsの死を乗り越えたことはありません。私はいつもウェブに深刻な問題があると感じました。ユーザーを1つのWebサイトにロックするサイロを構築し、より豊かな経験を構築するためにアプリケーションを接続しません。私たちは別のサイトに移動するためのリンクを持っていますが、私たちのサイトで使用できる機能にはアプリケーションを接続していません。クラウドサービスから画像を選択してアプリで使用したり、ユーザーが好きなエディタで画像を編集したりできます。私たちは私たちのページをリンクする方法だけではなく、私たちのサービスをリンクしています。
Web Intentsはそれを修正しようとして失敗しました。 共有APIは、サイトとアプリケーションを相互接続するためのユースケースを1つ解決しますが、一般的にIPCとサービスの発見は解決されていません。ソリューションがあると思います…解決策はありません。私は信じられないほど興奮している実験です。
私のチームのSurmaとIan Kilpatrickは、ここ数カ月間、Tasklets APIのシムに取り組んでいました。 Tasklets APIは、Web上に軽量のマルチスレッドAPIが存在するように設計されています。 ES6クラスは「タスクレット」として公開され、メインスレッドをブロックせずに呼び出すことができます。これはUIに最適です。タスクレットAPI自体は非常に興味深いですが、最も興味深いのは、Webワーカーを使用してPolyfillを構築し、Workerで定義されたES6クラスの機能を公開する方法を開発したことです。彼らは、postMessage APIの複雑さのすべてを、JS開発者にとってきちんとしたパッケージとまともなモデルに抽象化しました。
Web Intents APIを構築した理由の1つは、postMessage APIで動作するAPIとサービスを作成する開発者の経験が非常に複雑で、postMessage APIに対処しなければならず、複雑なメッセージ処理システムおよび関連する状態機械を含む。
伝統的労働者 それはちょうど複雑です。 2つのウィンドウを相互にやりとりさせたい場合は、さらに悪化します。開いたウィンドウは、メッセージを送信し始める前に準備が整っている「オープナー」を返信する必要があります。 TL; DR - window.openは、あなたが定義したURLにナビゲートする前にabout:blankを開きます。
ウィンドウポストメッセージ体験 複数のウィンドウ間や他のウィンドウ内のワーカー間でメッセージをやり取りする場合は、さらに複雑になります。
さらに複雑な... 私はこれがクライアント側のAPIを公開する主な理由の1つだと思います。難しすぎる。
タスクレットpolyfillにはソリューションが埋め込まれていたので、Tasklets APIをシンプルなProxy APIにリファクタリングできるかどうかを尋ねるとSurmaに尋ねました。数時間後にComlinkがポップアップしました。 Comlinkは、ローカルのコンテキストでリモートクラスや関数をインスタンス化しているように見えるAPIにMessageChannel APIとpostMessage APIを抽象化する小さなAPIです。例えば:
ウェブサイト
const worker = new Worker('worker.js'); const api = Comlink.proxy(worker); const work = await new api.HardWork(); const results = await work.expensive(); ウェブワーカー
class HardWork { expensive() { for(let i = 0; i < 1e12; i++) sum += /* …omg so much maths… */ return sum; } } Comlink.