at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました
at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました
Web 技術解体新書「第二章 Cache 解体新書」リリース Intro 「Web 技術解体新書(Web Anatomia)」の第二章として「Cache 解体新書(Cache Anatomia)」をリリースしました。 これで予定している八章のうち二章が終わりました。 第一章: Origin 解体新書 第二章: Cache 解体新書 Cache 解体新書 以下の Response Header Field がどういう意味を持つか正確に説明できますか? おそらく多くの Web 開発者が一度は見たことがあり、これを「1 時間キャッシュする」という意味で指定している人もおおいでしょう。 では、どこから 1 時間で、 1 時間経ったらなにが起こるのか、これが Response でなく Request に付与されたらどう変わるのか、きちんと把握できていますか? そもそも、一般的にキャッシュ機構における
Intro システムにおいてキャッシュの設計は永遠の課題であり、 Web のパフォーマンスにおいても非常に重要である。 Web では、 HTTP ヘッダを用いてブラウザやプロキシにキャッシュの制御を指定する。 Stale-While-Revalidate ヘッダは、このキャッシュ制御に選択肢を追加する新しい仕様である。 このヘッダの概要と、本サイトへの適用を解説する。 Web におけるキャッシュ キャッシュの種類 まず、ブラウザが持つ従来のキャッシュの機構について整理する。 そもそも、キャッシュを行う意義は大きく二つある。 リソースの取得を高速化する サーバへの負荷を減らす これまでは HTTP ヘッダを用いて、キャッシュを管理させる方法を用いてきた。 Web における、キャッシュの指定には大きく二つの方式がある。 ブラウザはリクエストを発行せず、保持するキャッシュを使用する(Cache-
Intro Podcast を PWA 対応するために、待望だった機能の 1 つが Background Fetch だ。 これにより、通常 Range Request で取得するような、大きなファイルを事前にダウンロードしておくことができるようになる。 この API と、 Service Worker およびブラウザにおける Range Request/Partial Response の扱いについて記す。 background fetch Podcast は大きな音声ファイルがメインコンテンツとなる。 PWA のキャッシュ戦略典型例としては install 時に全てキャッシュする request 発生時にキャッシュする といった方法がある。 しかし、この方法は一般的な Podcast としては少し使いにくい。 install 時に全てのファイルをキャッシするのは現実的ではない requ
この記事は、GraphQL Advent Calendar 2019の5日目の記事です。 GraphQL APIのキャッシュ層をCloudflare Workersで作成する方法を解説してみます。 サマリ GraphQLではRESTful APIにおけるGET系のものであってもPOSTで送信するという規約があります。そのため、URLだけを見てそのクエリの取得内容を知ることはできません。結果として、RESTful APIのようにGETである特定のURL、特定のクエリパラメータのときはキャッシュされたデータを返す、というようなことを実装することが難しい、という問題があります。 今回は、この問題を解決するためにCloudflare Workersを利用してCDN上にGraphQL APIサーバーのキャッシュレイヤを作成してみたので、その方法を紹介したいと思います。 作成したコードはGitHubに
この記事は GraphQL Advent Calendar 2019 の22日目の記事です。 qiita.com こんにちは。 vivit株式会社というアウトドア関係のサービスを提供している会社で主にフロントエンドを担当している中村です。 本記事では、fly.ioでGraphQLのキャッシュサーバを立てて高速化した話をします。 はじめに 弊社では、Go + React(TypeScript)で開発しておりAPIにはGraphQLを採用しています。 今回は下記の理由でGraphQLのQuery結果をキャッシュするサーバを実装してみました。 社内向け管理画面で呼び出しているQueryの応答時間が5秒ほどかかっているものがあり、開発時、オペレーション時にストレスが発生している。 技術的な興味 本記事では、 GraphQLをどのようにキャッシュするのか fly.ioでGraphQLのキャッシュサー
Independent Submission M. Nottingham Request for Comments: 5861 Yahoo! Inc. Category: Informational May 2010 ISSN: 2070-1721 HTTP Cache-Control Extensions for Stale Content Abstract This document defines two independent HTTP Cache-Control extensions that allow control over the use of stale responses by caches. Status of This Memo This document is not an Internet Standards Track specification; it i
SWR is a React Hooks library for data fetching. The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again. With just one hook, you can significantly simplify the data fetching logic in your project. And it also
Casper is a caching proxy designed to intercept traffic flowing between internal Yelp services. It is built with Nginx and OpenResty at its core and contains some logic in Lua to fit in our ecosystem. Today we’re proud to announce that Casper is opensource and available on Github. To introduce the context in which Casper was created, this post outlines a few basics about Yelp’s SOA, explains the t
Since its release Envoy Proxy has gained enormous traction in the market. Envoy was a classic case of the right product at the right time: Organizations were building increasingly sophisticated cloud applications and found they needed a new approach to manage L7 trafficEnvoy had the right set of features and performance to address this need. Some of these features included a runtime API for config
This article covers how to implement a service worker that caches POST requests with GraphQL APIs. If you are new to Service Worker, please take a look at this introduction: https://developers.google.com/web/fundamentals/primers/service-workers/. If you are not sure what’s a GraphQL, here’s an excellent place to start: https://graphql.org/. As you continue to read, I assume you have a basic unders
20191104 追記 draft 01でCache-Status に改称されるとともに、内容も変わりました 更新記事を書きました asnokaze.hatenablog.com CDNなどのサービスは、リクエストがキャッシュにヒットしたかどうかをx-cacheヘッダに格納してレスポンスしてくれます このx-cacheヘッダは独自の形式であり、例えば以下のようになっています。 (CDNによっては、x-cache以外のヘッダを使うものもあります) fastly (document) X-Cache: MISS, HITAmazon CloudFront X-Cache: Hit from cloudfront先述のように、x-cacheヘッダは標準化されておらずCDN毎に独自に使用されています。 そこで、IETFのHTTbisにおいて キャッシュのHit情報などを格納するcacheヘッダの標
Webブラウザは表示したサイトに関する様々なデータを記憶しています 例えば cookie cache HTTP認証の情報 localStorage service worker registrations しかしサーバ側からこれらのデータを明示的に消すのは難しい場合があります。例えば、httpOnlyのcookieは現在ブラウザにどのようなCookieがセットされているか知るのは難しいでしょう。 そこで、そのようなデータを消す Clear-Site-Data レスポンスヘッダ がW3Cで議論されています。実は、3年前に「Clear Site Data、ブラウザのローカルデータを削除する仕組み」で書いたときから微妙な変更が入っている。 また、ブラウザへの実装も進んでおり試せるような段階となってきている。 mozilla.dev.platform: Intent to ship: Clear-
2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ~Progressive Web Appsの実装と応用~」というセッションを担当しました。 イベントに参加できなかった方に向けてセッションの内容を記事にまとめましたので、ぜひご覧ください。 進化する Web ~ Progressive Web Apps の実装と応用 ~ from Osamu Monoe この記事では、昨今話題に上ることが多いPWAことProgressive Webアプリケーションについて、実際の作り方を解説しながら、それがいったいどういったものであるかを詳(つまび)らかに紹介することを目的としています。 Webでは、「ネイティブアプリと同じことができる」「ネイティブアプリを置き換える」など、期待に胸を膨らませずにいられない浪漫に満ちた噂がありますが、それが本当かどうか記事
Blog /Backend /Performance /Automatic Persisted Queries and CDN caching with Apollo Server 2.0 Back to Blog June 28, 2018Automatic Persisted Queries and CDN caching with Apollo Server 2.0 A common challenge that developers experience as they build products is how quickly their apps grow in complexity. For GraphQL services, your request sizes and query strings fatten over time, which in turn leads
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く