ブラウザのキャッシュをいつものように役に立たないようにする方法

Yandex.Browserがキャッシュを通常のユーザーにとって役に立たないようにしようとした方法についてお話したいと思います。 最近リリースされたYandex.Browser for Androidの新しいベータ版 （他のOSも計画しています）では、インターネットに接続していなくても最近アクセスしたサイトにアクセスできます。 そして、それはあなたが前に見たすべてよりもはるかに信頼性が高く、より便利に動作するはずです。







これを可能にするために、独自のクラスターキャッシングを考え出しました。このアルゴリズムにより、ページが可能な限り全体的に保持されます。 すべてのデバイスの詳細-カットの下。



世界中のどこでも、または少なくとも都市へのインターネットへの継続的かつ中断のないアクセスは、まだ夢です。 したがって、実際には、何らかの形でオフラインとそれが引き起こすトラブルに遭遇します。 たとえば、WiFi / 3G / LTEがない場合にタブを更新すると、ブラウザーで以前に開いた投稿を読み続けることができません。 または、RAMからアンロードされたため、彼女自身がアップグレードを決定します。 または、「戻る」ボタンを使用して前のページに戻ることにします。 状況は異なりますが、ブラウザはネットワークから素材をダウンロードできないため、それぞれがエラーで終了します。 やめて！ ただし、既にデバイスにダウンロードされています。 探しているものはすべて、ブラウザのキャッシュにすでにあります。 それでは、なぜそれを使用しないのですか？ 簡単そうですね。



これは、私たちのチームがYandex.Browserに実装するために着手したものです。 ブラウザーキャッシュを使用して、予測可能で高品質のオフライン作業を実現するというタスクを設定します。



通常のキャッシング



デスクトップブラウザーのエクスペリエンスを見ると、Internet ExplorerまたはFirefoxのオフラインモードを呼び出すことができます。これは、保存されたコピーまたはキャッシュから要求されたページを読み込もうとするブラウザーで構成されていました。 10年前または20年前でも、ダイヤルアップの普及とネットワークでの時間の支払いのために、これは特に当てはまりました。 最初は、必要なすべてのサイトをダウンロードしてオフラインにし、すでにそこにあるサイトを完全に無料で読み続ける方が安価でした。 時間が経つにつれて、そのようなソリューションの必要性は低下し始め、特定の製品のキャッシングに取り組み、停止しなければ、オフラインの方向に確実に継続しませんでした。







それどころか、現代のモバイルブラウザーは完全にオフラインの問題に直面しています。 いいえ、今はインターネットで費やした時間を支払う必要はありませんが、ネットワークユーザー自身がモバイルになり、いつでもカバレッジエリアを離れることができます。 一般的な製品では、この問題に対する根本的な解決策に気付いていません。 同時に、Android向けChromiumのモバイルアセンブリでは（Yandex.Browserがコアで使用することを思い出してください）、キャッシュプロセスはデスクトップの非常に単純化されたバージョンです。 複雑なロジックはありません。 キャッシュされたリソースはすべて1つのキューに存在し、LRUアルゴリズムに従って削除されます（最も長く使用されなかった要素は削除されます）。 キャッシュ自体は、約300 MBの容量を持つ個々のリソース（html、css、png、js、...）の「ダンプ」です。 キャッシングアルゴリズムの観点から見ると、これらのリソースは相互接続されておらず、新しいページに十分なメモリがない場合、互いに独立して削除されます。







このような単純化されたロジックは、オフラインで作業するときに予測可能な結果を​​達成できなかったため、私たちにとって問題になりました。 簡単に言えば、ブラウザーは、キャッシュ内の正確な内容と、ページを完全に表示するのに十分な量を知りません。 chrome：// flags /＃show-saved-copy experimentの一部として実装されたメカニズムを使用できます。 これが何であるかわからない場合は、ここに簡単な要約があります。 ネットワークがない場合、ユーザーはキャッシュからサイトをダウンロードするように求められます。 これはまさに私たちが必要とするものです、あなたは思うでしょう！







残念ながら、この実験を有効にすると、ブラウザは他のすべてのリソースとスクリプトを考慮せずに、メインHTMLドキュメントのみのローカルコピーの可用性をチェックします。 通常、プレーンテキストページではこれで十分です。 しかし、他のすべての場合、結果は時々悲しすぎます。 そして、すぐに、多くの人気サイトでは、キャッシュがあっても実験は機能しないことを学びましたが、それについては以下でさらに説明しますが、今のところ、結果を予測する方法を学ぶ必要がありました。



予測可能なキャッシング



より優れた、目立たないオフラインジョブを実現したいと考えました。 ユーザーが追加のボタンなしでデバイスに既にロードされている情報にアクセスできるようにします。 さらに、一部のリソースが既にキャッシュから削除されている場合、ブラウザは警告を表示する必要があります。 これを行うには、Yandex.Browserが、要求されたページに存在するすべてのリソースがまだキャッシュで利用可能かどうかを知っている必要があります。



理論的には、キャッシュ内のHTMLドキュメントの可用性を確認し、そこからすべての依存関係を調べて、各リソースの可用性を評価できます。 残念ながら、このような単純な額の評価では、スピードを誇ることはできません。 そして、それはリソースの消費に特に強く影響します。 寒い冬の夜にスマートフォンを温めることができるほど。 窓の外は夏だけです。



このような失敗したアイデアは、キャッシュの構造的な変更なしでは結果を達成できないと私たちを信じるように徐々に導きました。 そのため、反対側から入りました。 彼らは、サイトをロードする段階ですでにブラウザに教えて、ページとそのリソースの間の依存関係を覚えています。 特定のページを表示するために必要なすべてのリソースは、ブラウザーによってデータセットに論理的に結合されます。 このようなセットを「クラスター」と呼びました。 さらに、リソースが2つの異なるページに存在する場合（たとえば、サイトのロゴが通常複製される場合）、2つの異なるクラスターに関連付けられます。 この場合、ブラウザーは、最も未使用のクラスターに属するリソース（個々のリソースではなく、クラスターレベルで同じLRU）を犠牲にしてのみキャッシュをクリアできます。







ユーザーがページをリクエストした時点で、Yandex.Browserは、リクエストされたアドレスがどのクラスターに対応し、どのリソースがそれに必要かをすでに知っています。 そして、彼はクラスターから各要素の可用性をチェックするだけです。 クラスター（つまり、目的のページの実質的にすべてのリソース）が完全にアクセス可能な場合、エラーでユーザーを怖がらせることはできませんが、すぐにサイトを表示して、オフラインで動作していることを警告します。 一部のリソースが既に削除されている場合、現在のアセンブリでページも復元しますが、コピーが部分的に保存されたことを警告します。







ちなみに、スクリーンショットには、タブレットの5つの実験デザインのうちの1つが示されており、現在のベータでもテストされています。



品質キャッシング



オフラインでの作業について話すときは、ブラウザの起動時にタブを通常どおりに復元するだけではありません。 私たちの場合、キャッシュはページを開くあらゆる方法に使用されます。 [更新]をクリックするか、[進む] / [戻る]で履歴をナビゲートできます。 リンクをタップできます。 アドレスは手動で入力できます。 これらすべての状況において、Yandex.Browserはリソースの可用性を評価し、可能であればローカルページを読み込みます。



以前は、すべてのサイトがキャッシュから回復できるとは考えていませんでした。 しかし、結果を予測することを学んだ後に初めて、さらなる修正なしに本格的で高品質のオフライン作業を忘れることができることが明らかになりました。 多くのサイトがオフラインで開くことはありません。 たとえば、Yandex、Habrahabr、Facebook、VKontakte（許可されている場合）。







その理由は、HTTPヘッダー「cache-control：no-cache、no-store」です。これにより、ブラウザーがキャッシュにリソースを保存できなくなります。 ウェブマスターはこれを使用して、定期的に更新されるリソースがキャッシュから取得されるのではなく、常に最新バージョンがロードされるようにします。 残念ながら、このタイトルを個別のリソースではなく、HTMLドキュメント全体に追加することは広く行われています。これにより、サイトをオフラインで開くことができなくなります。



オフラインを断念することは絶対にありませんでした。 ただし、指定されたHTTPヘッダーを無視するだけでは問題を解決できませんでした。 これにより、無関係なキャッシュリソースがオンラインで使用される可能性があります。 HTTPヘッダーの意味を観察する必要がありましたが、同時にネットワークに接続せずに情報へのアクセスを提供しました。 幸いなことに、開発者はこのような妥協案を見つけることができました。 この決定によると、Yandex.Browserは、「cache-control」で禁止が指定されているリソースを含め、すべてのリソースをキャッシュに保存します。 しかし同時に、禁止の存在に関する情報も保存し、通常のオンライン作業中はそのようなリソースを使用しません。 ブラウザはオフラインでのみそれらにアクセスします。 さらに、キャッシュのこの部分を暗号化する可能性を調査しています。



ところで、POST要求またはAJAX実行の結果もキャッシュに保存します。 これがないと、多くの動的サイトがオフラインでオフラインに見えます。



クラスタキャッシングの見通し



クラスターに戻ります。 通常のキャッシングでは、保存されているすべてのリソースが何らかの方法で接続されることはなく、LRUに従って削除されます。 ページのあるタブがバックグラウンドのどこかでまだ開いているか、ユーザーが既に長い間閉じているかどうかは考慮されません。 問題をよりよく理解するために、簡単な例を見てみましょう。 スマートフォンのブラウザーでHabréの投稿を開き、開いたままにして機内で読み上げます。 ただし、搭乗が始まる瞬間まで、天気予報を確認したり、ソーシャルネットワークで新しいメッセージを確認したり、Webバージョンのメールを操作したりする必要がある場合があります。 はい、Habréに投稿されたタブはバックグラウンドでまだ開いています。 しかし、彼女のリソースはすでにキューの最後に移動しており、キャッシュから削除されました。 はい。タブ自体は既にRAMからスローされています。 そのため、地上1万メートルを飛行し、携帯電話を取り出して目的のタブをクリックし、刺激的な読書を期待します。 しかし、無慈悲なLRUは開いているタブや問題を気にしないため、ブラウザはエラーを返します。



幸いなことに、この問題を解決できるクラスターをすでに開発しています。 クラスターの導入により、リソースを論理グループにまとめることができ、各グループは特定のページに明確に関連付けられています。 上記の問題を解決するには、ブラウザが開いているタブに対応するクラスターのリソースを削除することを禁止するだけで十分です。 さらに、さらに進んで、ページを手動で保存する機能を提供できます。 私たちが今も仕事を続けているのは、まさにこれらのアイデアに基づいています。



残念ながら、現時点ではクラスターキャッシュでも、ページへのオフラインアクセスを保証することはできません。 重いサイトを突然ロードした場合、そのリソースはキャッシュから残りを非常に迅速にノックアウトできます。 しかし、ほとんどの場合、当社のテクノロジーにより、厄介な瞬間を避け、ダウンロードした情報へのアクセスをユーザーに提供できます。 そして、どんなに一生懸命努力しても、オフラインサイトはオンラインとまったく同じように動作するとは限らないため、特別なアイコンを使用してネットワークがないことをユーザーに通知します。



Yandex.Browser 15.6 for Androidのベータ版でオフラインモードを試すことができます。 既にこのアセンブリでは、必要なリソースがキャッシュ内で利用可能な場合、ブラウザーはページをオフラインで開くことができます。 問題や新しいアイデアを探すお手伝いをしてください。



PS iOSバージョンはほとんど準備ができていましたが、最近、新しいWKWebViewコンポーネントへの移行を開始しました。残念ながら、旧式のUIWebViewと比較して多くの機能が失われています。 そして、そこにある新しいキャッシュは、いくつかの理由でまだ実装されていません。 しかし、これはまったく異なる話です。



PPSところで、もしあなたが他の興味深い技術の発明で私たちのモバイルチームを助けたいなら、 空席は待っています。 開発者（C、C ++、Java）、デザイナー、プロジェクトマネージャー、製品スペシャリスト、テスターをモスクワ、サンクトペテルブルク、ノボシビルスクのYandexオフィスで探しています。