タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能
サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能 Webアプリケーションのクライアントを開発する際に、本来ならばサーバ上で稼働するWebアプリケーションのバックエンドのAPIを呼び出してデータを受け取って表示するといった動作を作り込みたいけれども、まだバックエンドのAPIも開発中であったり、何らかの理由でバックエンドを稼働させる環境を用意できなかったりすることは、しばしば起こりえます。 そうしたときにサーバを立てることなく、バックエンドのAPIをモックとして簡単に設定し提供してくれるソフトウェア「Mock Service Worker」の最新版「Mock Service Worker 2.0」が正式にリリースされました。 Announcing MSW 2.0! Migratio
CloudflareでもFastlyでもVercelでもDenoでもBunでもService Workerでも動く
HonoというWebフレームワークを作っています。 当初はCloudflare Workers向けに作っていたのですが、同じCDNであるFastlyのエッジランタイム、Compute@Edgeでも動くことが分かりました。また、Next.jsのEdge MiddlewareもしくはEdge API RoutesとしてVercelの環境でも動きます。そして、少々手を加えるとDenoでも動きました。もちろんDeno Deployにもデプロイできます。さらに、先程レポジトリが一般公開されたYet AnotherなJavaScriptランタイムのBunでも手を加えず動きました。 この「CloudflareでもFastlyでもVercelでもDenoでもBunでも動いた件」が、なかなか面白かったのでそれについて書きます。 Web標準のAPI これらの環境で同じように動くのは、JavaScriptでかつ
Service Workerとは、それを使ってできること / what-is-service-worker
Service Workerとは、それを使ってできること / what-is-service-worker
Service Workerがもつ圧倒的な力。SEO担当者は変化に適応が必要 | Moz - SEOとインバウンドマーケティングの実践情報
PWA、SPA、Service Workerとは？（前編で解説）SPAを可能にするApp Shellアーキテクチャ（中編で解説）Service Workerがもつ圧倒的な力まとめ3. Service Workerがもつ圧倒的な力最初にはっきりさせておきたいことがある。それは、ここまでで解説してきた「SPA」と、ここから取り上げる「Service Worker（サービス・ワーカー）」は、互いに排他的なものではないということだ。 つまりこの2つは共存するものだということだ。どちらもPWAと呼ばれるものの基盤となっているが、SPAではないPWAをつくることも可能だし、従来の静的なウェブサイト（クライアントサイドでレンダリングする処理がないサイト）にService Workerを統合することもできる（近い将来、そのようなサイトが増える僕は思っている）。 さらに、Service Workerはウェブ
サーバサイドのJavaScriptランタイム「WinterJS」登場。Rustで書かれ、WebAssembyにコンパイル可能なService Workerサーバ
サーバサイドのJavaScriptランタイム「WinterJS」登場。Rustで書かれ、WebAssembyにコンパイル可能なService Workerサーバ WebAssemblyランタイム「Wasmer」の開発元として知られているWasmer社は、新しいサーバサイドのJavaScriptランタイム「WinterJS」を発表しました。 Announcing WinterJS: a blazing-fast Javascript Service Workers server written in Rust powered by SpiderMonkey ❄️https://t.co/kX7jjJj6qv — Wasmer (@wasmerio) October 27, 2023 WinterJSはRustで書かれた高速なService Workerサーバであり、オープンソースとして公開さ
今回の話はWasmというよりもService Workerの話がメインになりますが、WasmとService Workerを組み合わせることで、ブラウザー上でサーバー処理をリアルに再現することができるので、このタイトルにしています。 まずは動画をご覧ください。 見ていただくと分かるように、ブラウザー上でPHPのコードを書くとその実行結果が右側に表示されています。 特に面白い点が、お問い合わせフォームのPOST後の処理までもブラウザー上だけで実行できているという点です。 これはWasmとService Workerを組み合わせて実現しています。 大体以下のようなプロセスで実現しています。 Wasmはブラウザー側でも実行可能ですが、あえてService Worker上で実行しているのは、URLへのリクエストに対してそのリクエストにインターセプト（介入）することで、POST後の処理などもブラウザ
フロントエンドの開発時に仮の API を使いたいってシチュエーションはわりとあると思います。 そんな時に、Mock Service Worker を使うと便利だったのでまとめます。 Mock Service Worker とは？ Mock Service Worker は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、開発時の mock サーバーの代替として利用出来ます。 テストでの利用については以前こちらの記事でまとめました。 今回は開発時のモック API としての利用について書きます。 開発用の API というと、JSON Serverが有名ですが、Mock Service Worker では Service Worker を使ってリクエストを返すため、別プロセスでローカルサーバーを立
import { http, HttpResponse } from 'msw'import { setupWorker } from 'msw/browser' // Describe the network.const handlers = [ http.get('https://acme.com/product/:id', ({ params }) => { return HttpResponse.json({ id: params.id, title: 'Porcelain Mug', price: 9.99, }) }),] // Enable API mocking anywhere.const worker = setupWorker(...handlers)await worker.start() Omit implementation details Intercept
Mock Service WorkerでAPIをモックして開発をスムーズに進められた話 - Classi開発者ブログ
こんにちは。開発本部 認証連携チームでエンジニアをしている id:ruru8net です。前回はこちらの記事を書かせていただきました。 tech.classi.jp 現在は認証基盤再建というプロジェクトの中で、主にフロントエンド開発を担当しています。この記事ではフロントエンド開発においてAPIのモックのために「Mock Service Worker」を使ったところスムーズに開発を進めることができたので、使い方を紹介したいと思います。 mswjs.io ツールの導入 弊社ではフロントエンドのフレームワークにAngularを採用しているのでAngularでの導入手順を記します。 基本的にはドキュメントの手順通りです。 1. インストール $ npm install msw --save-dev # or $ yarn add msw --dev 2. モックを定義 src/mocks/hand
一休.comにService Worker(Workbox)を導入しました - 一休.com Developers Blog
こんにちは。宿泊事業本部の宇都宮です。 この記事は、一休.com Advent Calendar 2019の2日目の記事です。 今日は、一休.com( https://www.ikyu.com )にService Worker + Workboxを導入した件について書きます。 Service Workerとは Service Workerはブラウザのバックグラウンドで動作するJavaScriptで、PWA(Progressive Web Apps)の基盤技術です。 Service Worker の紹介 https://developers.google.com/web/fundamentals/primers/service-workers?hl=ja はじめてのプログレッシブウェブアプリ https://developers.google.com/web/fundamentals/cod
サーバーが自分自身と同じプログラムを配信して、それをブラウザがロードして、どちらでも同じコードが実行され、サーバーだけではなくブラウザからもレスポンスを返す魔法「Service Worker Magic」を紹介します。 Service Worker Magic こういうことです。 サーバーはCloudflare Workers、ブラウザはService Workerのプログラムを指す サーバーのプログラムはsw.js、ブラウザで動くプログラムもsw.js 全く同じ内容かつ同じリソースを参照して、同じように動く サーバーsw.jsが自分自身のコードsw.jsを/sw.jsというパスで配信する /にアクセスするとsw.jsがService Workerとして登録される /sw/*をService Workerのスコープにする /server/helloにアクセスするとサーバーからレスポンスが返
Service WorkerとCache APIによるWebサーバーの負荷軽減とテスト実装について-後編 - dwango on GitHub
2023-03-06 Mon Service WorkerとCache APIによるWebサーバーの負荷軽減とテスト実装について-後編 ニコニコQセクションのHajime-san(GitHub)です。 本記事は、Service WorkerとCache APIによるWebサーバーの負荷軽減とテスト実装について-前編の続きとなります。 テストについて さて、前編のService Workerスクリプトの実装はローカル開発環境および検証環境での確認を経て本番環境にデプロイされているのですが、このままでは「なんとなくキャッシュが動いている」という状態がブラウザ上に構築されていることになるので、Service Workerの振る舞いの仕様書となるテストコードが欲しいというのが本稿のもう1つの主題になります。 Service Workerのテストについては筆者が知る範囲ではインターネットにはあまり知
昨日、「CDN のエッジで実行する系」として、Vercel Edge Functions や Cloudflare Workers、Faslty Compute@Edge などを紹介した。 CDN のエッジで実行する系が面白い - ゆーすけべー日記 これらが提供する機能とそれを書くための API は、当然ながらプラットフォームごと異なる。 そのため我々は今まで触れたことのないプラットフォームのスクリプトを書くとなれば API リファレンスを読む必要がある。 ただ、共通する点が 2 つある。 1 つはほとんどのエッジサービスは JavaScript で記述できるという点だ。 Fastly Compute@Edge は WebAssembly へ最終的にコンパイルされるが、とにかく JavaScript で書ける。 あるいはトランスコンパイルの環境があれば TypeScript で書ける。 も
Build a Next.js app in Storybook with React Server Components and Mock Service Worker
🚀Update, March 12: Storybook 8 is out now!Storybook 8 (our next major release) brings React Server Component (RSC) compatibility to Storybook for the very first time, letting you build, test and document Next.js server applications in isolation. In our first demo, we used Storybook to develop a contact card RSC, which accessed contact data both asynchronously and from a file system while simulati
Service WorkerとCache APIによるWebサーバーの負荷軽減とテスト実装について-前編 - dwango on GitHub
2023-02-27 Mon Service WorkerとCache APIによるWebサーバーの負荷軽減とテスト実装について-前編 こんにちは。ニコニコQセクションのHajime-san(GitHub)です。 当記事では所属部署で開発に携わっている「ニコニコオーディション」の既存システムにService WorkerとCache APIを用いて、 Webサーバーからのレスポンスを一定期間保存し、キャッシュ（CacheStorage）からレスポンスを返すことによってWebサーバーへの負荷軽減を実現するまでの経緯や実装などを紹介します。 オーディションシステムの紹介 システムの概要 まず初めに本稿の主題となるシステムが抱える課題について、先ほどサラッと単語が登場した「ニコニコオーディション」というシステムの前提があるとより理解が明瞭になるのでこちらを紹介します。 ニコニコオーディションとは
Intro Podcast を PWA 対応するために、待望だった機能の 1 つが Background Fetch だ。 これにより、通常 Range Request で取得するような、大きなファイルを事前にダウンロードしておくことができるようになる。 この API と、 Service Worker およびブラウザにおける Range Request/Partial Response の扱いについて記す。 background fetch Podcast は大きな音声ファイルがメインコンテンツとなる。 PWA のキャッシュ戦略典型例としては install 時に全てキャッシュする request 発生時にキャッシュする といった方法がある。 しかし、この方法は一般的な Podcast としては少し使いにくい。 install 時に全てのファイルをキャッシするのは現実的ではない requ
Service Worker のライフサイクルとスコープを理解する - 30歳からのプログラミング
Service Worker は独自のライフサイクルを持っている。ブラウザにインストールされ、有効化され、そして新しい Service Worker に置き換えられる。 Service Worker を正しく使うためには、このライフサイクルに対する理解が不可欠である。これを理解していないと、意図した通りに動かせず、古い Service worker が動作し続けてしまうなどの不具合を起こしてしまう恐れがある。 そのためこの記事では、Service Worker はどのようなライフサイクルを辿るのかを見ていく。 また、Service Worker の挙動には「スコープ」という概念も影響してくるため、スコープについても説明する。 プッシュ通知やオフライン対応などの、Service Worker を使うとどんなことが出来るようになるのか、といったことについては扱わない。それらの機能の基盤である
Web Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法※当サイトにはプロモーションが含まれています。 1. はじめにウェブページの弱点の一つは、インターネット接続環境でないと見られない（使えない）ことです。 Google は PWA (Progressive Web Apps) というアプリケーション開発手法を提唱しており、これに従えばオフラインでも動作するウェブアプリケーションを作成することができます。但し、かなり面倒ですし、単純なウェブページを作りたいだけの場合はオーバースペックと言ってよいでしょう。 本ページでは、PWA でも使われている Service Worker という技術を使って、ウェブページまたはシンプルなウェブアプリケーションをオフラインでも閲覧できる（動作する）形で作成する方法を紹介します。 2. 今回使用する題材以前作って本サイト
Web Push通知の受信を、Firebase Cloud Messaging(FCM)＋Service Worker ＋Notificationで受信側でコントロールしてみた | Tech Blog | CRESCO Tech Blog
Web Push通知の受信を、Firebase Cloud Messaging(FCM)＋Service Worker ＋Notificationで受信側でコントロールしてみた
While service workers and PWAs are becoming standards of modern web applications, resource caching has become more complex than ever. This article covers the big picture of browser caching, including: The use cases of and differences between service worker caching and HTTP caching.The pros and cons of different service worker caching expiry strategies compared to regular HTTP caching strategies.Ov
Mock Service Worker について色々試したので紹介です。 Mock Service Worker とは？ Mock Service Worker（以下 msw）は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、SPA 開発時の mock サーバーとして利用出来ます。 以下テストで利用する場合のサンプルコードです。 setupServerでインターセプト用のサーバーを定義し、listen()でインターセプトをスタート、close()でインターセプトをストップします。
pwaperformanceService Worker Lifecycle ExplainedExplaining the lifecycle of Service Workers in PWAs and how to update them as fast as possible. The Service Worker lifecycle is arguably the most complex part around Service Workers and Progressive Web Apps (PWAs). I only felt like I understood it completely while writing this article, and I hope it will make your life with Service Workers a lot easi
Server Side Rendering (SSR) seems to be all the rage. Hydration strategies are the talk of the town, and honestly, it's been kind of a refreshing change from the client side JS-heavy framework status quo. However, I'm always surprised at how little exploration into service workers takes place in these discussions. Single Page Application Progressive Web App (whew) architecture has been well establ
service-worker-updatefound-refresh-dialogという読み込むだけで、よくみるService Workerの更新ダイアログを出すライブラリを書きました。 ロードすると、Service Workerが更新されたときにページをリロードするための更新ダイアログを出すだけのライブラリです。 使い方 ページとService Worker内の2箇所でそれぞれスクリプトをロードする必要があります。 Page: index.html Service Worker: sw.js UNPKGを経由して、スクリプトを配布していますが最新のバージョンはREADMEを参照してください。 azu/service-worker-updatefound-refresh-dialog: A library show refresh dialog/banner when the servic
2021/10/12更新 目次 Service Workerとは Service Workerでできること Service Workerの制限 Service Workerのライフサイクル 動作するまでの流れ Service Workerの登録 Service Workerのインストール Service Workerの有効化 キャッシュ制御 キャッシュ対象ファイルの準備 リクエストに対する応答「キャッシュに無ければネットワーク」 リクエストに対する応答「ネットワークがダメならキャッシュ」 リクエストに対する応答「オフライン不可である旨を表示」 古いキャッシュの削除 ユーザーによるキャッシュ削除 個人的に感じた疑問 Q. Service Workerとブラウザキャッシュはどのような関係にあるのか？ Q. 何らかの誤りにより更新ができなくなってしまうようなことは起きないのか？ Q. どんなリク
Service Workerとは、それを使ってできること / what-is-service-worker
Service Worker の状態変化テスト
1. このページの目的 Service Worker の基本的な動作を検証する。 2. このページにおける Service Worker の状態 本ページでは、ページロード時に Service Worker を読み込んでいる。 サーバー側の service-worker.js を編集して更新したり（運営者のみ可能）、ブラウザを更新したりすると、ServiceWorker の state が変更されるのでそれを眺める。 Chrome DevTools の「Console パネル」や「Application パネル - Service Workers」も観察すること。特に後者ではいろいろ操作できるので触ってみる。
はじめに セーフィー株式会社でフロントエンドエンジニアをやっている @ungi_podo です。 この記事はSafie Engineers' Blog! Advent Calendar 21日目の記事です。 従来だとapiを利用したテストを書くにはjestのモックを利用してaxiosなどのモジュールをモック化していたと思います。 最近フロントエンドテストではmswを使用してapiを利用したテストを書くことが注目されているみたいなので導入してみました！ Mock Service Workerとは Mock Service Worker（以下MSW）とはService Workerを通じてAPIリクエストをインターセプトし、mockのレスポンスを返すことができるライブラリです。 公式にわかりやすいフロー図があったので紹介します。 他に開発用mockだとJson Serverが有名ですが、 MS
Service Worker Static Routing API Origin Trial - Chrome for Developers
Service Worker Static Routing API Origin Trial Published on Friday, November 10, 2023 Service workers are a powerful tool for allowing websites to work offline and create specialized caching rules for themselves. A service worker fetch handler sees every request from a page it controls, and can decide if it wants to serve a response to it from the service worker cache, or even rewrite the URL to f
ファイルのストリーミング強制保存をクロスオリジンでも実現させるService Workerの裏技ぽい使い方 - nwtgck / Ryo Ota
同一オリジンでないURLをブラウザで開かずにファイルとして保存させたい。そして大きいファイルでもダウロードできるようにBlobとかBlob URLとかを使わないで解決したい。
概要 msw はいつの間にかモックツールとしてデファクトスタンダードになりました。 github.com Mock Service Worker という名の通り、Service Worker を利用して、アプリが API サーバーとやりとりするリクエスト/レスポンスをモックすることができるツールです。 ただ、ふと気がついたら Service Worker なしでモックできるようになっていたので、その小ネタを書きます。 この記事は Recruit Engineers Advent Calendar 2022 の9日目の記事です。 adventar.org Node でも使える msw ご存じの方も多いと思いますが、 msw は Node.js でも利用できます。 Node - Getting Started - Mock Service Worker Docs Node.js で利用できるの
はじめにTIGの川端です。 先日、Vue.js + Service Worker開発案件が終わりました。その振り返りとして、Service Worker開発で起きた不具合と対応方法を記載します。 Service WorkerとはService Workerは、ブラウザがWebページとは別にバックグラウンドで実行するJavaScriptになります。 利用ブラウザ/バージョン情報など Chrome v88.0.4324.146 Vue.js v2.6.11 起きた不具合その１事象Service Worker上で、setIntervalの処理を用意したところ、数分で止まるという報告が上がりました。 setIntervalは、バックグランド上で定期的にある処理をするために用意したものです。 service-worker.js 原因調べてみるとService Workerの活動には制限があるようでし
フルスタック開発者のためのBallerina: バックエンドAPI開発ガイド この記事では、REST API開発のためのプログラミング言語"Ballerina"の直感的な構文について解説します。さらに、認証や承認、OpenAPIツール、可観測性、SQL/NoSQLクライアントライブラリなど、重要な言語機能についても論じます。記事を読み終えれば、Ballerinaが次のバックエンドAPI開発の有力な候補である理由がよく理解できるでしょう。
さ、さーびすわーかー？ PWAについて勉強を始めたときに、まずはじめにいきなり知らない単語が出てきました。それがService Workerでした。 PWAの構築方法、チュートリアルはたくさんあっても、それを支える基礎技術であるService Workerについての詳細な解説がWeb上に少ないので、ここにまとめます。一部技術開発の経緯や技術仕様、詳細について誤りがあるかもしれませんが、ご指摘いただけますと幸いです。 よくある勘違い というか、僕自身PWAの技術=Googleが開発しているもの、と思っていました...。 PWAで調べると、検索結果の一番上にGoogleの詳細な解説記事があるし、プッシュ通知だってGoogleフレンドリーだったし。 (1)Service WorkerはW3Cから PWAの基礎となるService Workerの開発元はW3Cです。Googleではありません。 W
バックエンドの API がまだできてないプロジェクトで Next のフロントを作成することになり開発中の API との通信に噂の MSW を使ってみることにしました。 Next.js 特有の問題でちょいハマりしたので導入完了したところまでのメモ。 MSW (Mock Service Worker) MSW（Mock Service Worker）はブラウザリクエストを Service Worker がインターセプトし、任意のレスポンスを返すことが出来るライブラリです。 cf. MSW で加速するフロントエンド開発 プロダクションのコードのまま API への通信だけを Service Worker がインターセプトしてモックのレスポンスを返すことができるので、バックエンドと切り離してフロントだけを開発することができます！すごい〜 MSW の導入 $ npm i -D msw 開発時だけ使うの
(旧ブログから移行しました。) Service Worker は PWA(Progressive Web App)のオフライン操作や Push 通知を実装するための機能です。JavaScript で実装を行いますが、ブラウザとは別プロセスでバックグラウンドで動作するのが特徴です。 オフライン操作の実現は巧みなキャッシュハンドリングによってなされています。 Service Worker の基本的な書き方を学習したので、備忘録的な形でこのブログに残します。 PWA の話も気が向いたら残せたらと！ Sample プロジェクトを Github に Push しました。 ご活用いただけたらと思います。Hosting には Firebase Hosting を利用しました。 Github: https://github.com/Ryoma0219/simple-pwa Firebase Hosting
Remix on Cloudflare WorkersをService WorkerからModule Workerに移行する | DevelopersIO
はじめに こんにちは、CX事業本部MAD事業部の森茂です。 RemixをCloudflare Workersで活用する際のブログ記事をいくつか紹介させていただきましたが、今回は今までService Worker形式でデプロイしていたRemixをModule Worker形式へ置き換える方法について紹介させていただきます。 Cloudflare の記事一覧 | DevelopersIO Remix の記事一覧 | DevelopersIO 今回の完成版ソースコードはこちら himorishige/remix-cloudflare-workers-module-worker-boilerplate Service WorkerとModule Worker 今までのCloudflare Workersでは上記のようなService Worker形式の構文を利用してService Worker A
Mock Service Worker (MSW) とは、Service Woker が API リクエストを受け取って、レスポンスを返すことができる API mock ライブラリです。 MSW を使えば、Storybook とテストで共通の API mock handler を使用することができて便利です。 Storybook で MSW を使用するにあたっていくつか設定が必要になります。 調べると 1 コンポーネントしかないような小さな example は出てくるのですが、コンポーネント毎に mock を分けられるような方法にしたかったので、今回はその手順を記録しておきます。
Migrate to a service worker | Extensions | Chrome for Developers
Replacing background or event pages with a service worker A service worker replaces the extension's background or event page to ensure that background code stays off the main thread. This enables extensions to run only when needed, saving resources. Background pages have been a fundamental component of extensions since their introduction. To put it simply, background pages provide an environment t
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Service WorkerとWasmを組み合わせてサーバー処理をブラウザーでリアルに再現する
Mock Service Worker で開発用のモックAPIを作る
SEO担当者向け PWA・SPA・Service Worker 超入門。もう「JavaScript苦手」なんて言ってられない | Moz - SEOとインバウンドマーケティングの実践情報
Mock Service Worker
サーバーとブラウザで「全く」同じコードを実行する Service Worker Magic - ゆーすけべー日記
エッジにおけるService Worker API - ゆーすけべー日記
Service Worker の Background Fetch によるメディアのキャッシュ | blog.jxck.io
Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法
Service worker caching and HTTP caching
Mock Service Worker で jest.mock を使わず非同期リクエストのテストを書く
Service Worker Lifecycle Explained | Felix Gerschau
Service Worker Side Rendering (SWSR)
Service Workerが更新されたことを通知する更新ダイアログを出すライブラリを書いた
Service Workerの基本とキャッシュ制御 - プログラミング雑ネタ集
Service Workerとブラウザでの通知について
Mock Service Workerをフロントエンドテストに導入してみた - Qiita
msw が Service Worker に依存する時代が終わっていた話 - とろろこんぶろぐ
Service Worker開発で起きた不具合を振り返る | フューチャー技術ブログ
Mock Service Workerライブラリにより、復元力のあるRESTおよびGraphQL APIテストが可能に
(結局Service Workerってなに...？)とならないための基礎知識 - Qiita
Next で MSW (Mock Service Worker) を使うのメモ - かもメモ
Blog - Service Workerでキャッシュハンドリング (基礎編) | Ohoshi.me
Mock Service Worker (MSW) + Storybook の設定手順と使用例
biz.addisteria.com
www.1242.com
togetter.com
woman.nikkei.com
kotobank.jp
www.videoconverterfactory.com