Cache Storageがめちゃくちゃ肥大化する問題 TBSのニュースサイト、TBS NEWS DIGがめちゃくちゃブラウザのストレージを消費しているという話がはてブや増田で話題になっています。 TBSのニュースサイトヤバない？ – はてな匿名ダイアリー 同・はてなブックマーク 確かに、手元でも同様の状況を観測できる。 当該サイトのストレージ使用状況 はたして、これは真実なのだろうか。本当に1.4GBも食うことがあるのだろうか…… そんなわけない、ということで調査 まずは再現性を確認するためにChromeのゲストモードで当該のサイトのDevtoolを開いてましょう。すると、StorageのUsageは386MBになっていました。（適当なページを開き、リロードした時点で340MB程度であった） 当該サイトのストレージ割合 上記のスクリーンショットをよく見ていただけるとわかると思いますが、こ
こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon Helpfeel Advent Calendar 2022の5日目の記事です 昨日はHelpfeelエンジニアのyado.iconさんでした 採用面接中にチャーハン・ピラフ判定器とスタバ警察botで盛り上がる会社に入った | 株式会社Helpfeel ヨコハマハウスフラペチーノがエンジニア採用の役にたった？みたいで良かったです <a>タグの挙動を工夫する事で、Scrapboxからみたいなボタンをなくしました 更新ボタンの役割は2つ 更新がある事を教える 押すとアプリが更新される Scrapboxも昔こういうメニューがあった 今はもう無い では解説ですshokai.icon SPAのタブ永遠に開きっぱなし問題とは？ SPAとstaticなwebサイトの違い static
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 PWAをテーマにしたコミュニティ「PWA Night」を運営する菅家大地さんが、既存のWebアプリをPWA化する簡単な実装方法を解説します。 はじめまして、菅家（@kan_dai）といいます。普段は株式会社TAMという会社でフロントエンドをメインに、クライアントのWebサイト制作やWebサービスの開発をしています。PWA（Progressive Web Apps）をテーマにしたコミュニティ「PWA Night」の運営もしています。 さて、2018年ごろからPWAという言葉を聞く機会が多くなってきました。2019年現在、毎月コンスタントにPWAに関する仕事の相談を受けるようになっており、PWAへの関心の高まりを感じます。日本経済新聞やスマートフォン版Yahoo! Japanといった有名サービスでの
皆様フロントエンドのテストを書いていらっしゃいますでしょうか？ フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw ）を使用する手法が注目されています。実施にどのように使用されているのか
WordPressのコア開発チーム、WordPressをWebブラウザで実行する「Client-side WebAssembly WordPress」を開発中
WordPressのコア開発チーム、WordPressをWebブラウザで実行する「Client-side WebAssembly WordPress」を開発中 WordPressのコア開発チームは、PHPサーバをWebAssembly化することなどにより、WordPressをWebブラウザ上で実行する「Client-side WebAssembly WordPress」（以下WASM WordPress）の開発中であることを明らかにしました。アーリー版のデモも公開しています。 WordPressのWebAssembly化は、先月VMwareが実験的な取り組みとしてデモを公開していました。 参考：PHPとSQLiteをWebAssembly化し、Webブラウザ上でWordPressを実行可能にしたデモをVMwareが公開 しかし今回はWordPressのコア開発チーム自身がWebAssemb
Develop locally in JavaScript or TypeScript, deploy in seconds globally and scale to billions of requests.
Back to articlesAnnouncing WinterJSThe most performant JavaScript Service Workers server thanks to Rust and SpiderMonkey Follow up the WinterJS series reading about the recent production-ready WinterJS 1.0 release here. Today we are incredibly excited to announce WinterJS (wasmer/winterjs package). WinterJS is a JavaScript Service Workers server written in Rust, that uses the SpiderMonkey engine t
これはなんらかのアドベントカレンダーの何日目かの記事だったりしません。 KOBA789 です。仕事では人工衛星の搭載ソフトウェアを書いたり、人工衛星の管制システムのソフトウェアを書いたりしています。 先日、こういうツイ……ポストをしたらちょっとバズりました。意外と興味持ってくれる人が多かったので、それに関連するオタク早口記事でも書くかぁと思って筆を執っています。 うちの人工衛星の開発ツールはウェブ技術でできている 前述のポストは管制システムについてですが、開発用ツール（C2A DevTools）もまた React + TypeScript でできています。 まぁ画面見てもなにがなんだかという感じだと思いますが、UNIX サーバーで top コマンド叩いたときの内容と、サーバーのログが合体したみたいなものが表示されていると思ってください。 これらの数値は gRPC-web の Server-
Service Workerとは、それを使ってできること / what-is-service-worker
Service Workerとは、それを使ってできること / what-is-service-worker
数年前からGoogleは「Progressive Web Apps」（PWA）という技術を提唱してその普及を推進している。PWAはネイティブアプリケーションのように動作するWebアプリケーションであり、オフラインでも動作し、プッシュ通知などの機能も利用できる。本記事ではこのPWAの中核となる技術の解説と、PWAに対応したWebアプリケーションを作成するための流れを紹介する。 「Progressive Web Apps」（PWA）とは 一昔前は「ネットサービス」といえばPCのWebブラウザからアクセスして利用するものがほとんどだった。しかし、スマートフォンが普及した昨今では多くのサービスがスマートフォン向けの対応を行っている。今ではPCからのアクセスよりもスマートフォンからのアクセスのほうが多いサービスは珍しくなく、スマートフォン向けの専用アプリを用意しているサービスも多い。 とはいえ、ネイ
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はウェブ
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
今回の話は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 を使ってリクエストを返すため、別プロセスでローカルサーバーを立
PWA Night vol.6での発表資料です。 photo by kanata.icon こんにちは daiizですdaiiz.icon https://twitter.com/daizplus 京都から来ました Notaという会社でScrapboxを作っています Scrapbox Wikiみたいなノートアプリ 複数人での同時編集できる 文中リンクで繋げて思考する フルJavaScript実装のSingle Page Application サーバーサイド Node.js (Express, Socket.IO) クライアントサイド React /shokai/Scrapboxの開発 - React & Websocketで作るリアルタイムWiki by shokai.icon 2018/11 ServiceWorkerを用いたキャッシング戦略 ~Wikiアプリケーションを例に~ dai
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
一休.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
はじめに 仕事で解決したいことがあり、Web Push と Service Worker（以下 SW）の利用を検討しようかなと思っています 調べると Firebase Cloud Messaging（以下 FCM）を使うと簡単に実装できそうだったので、サンプルアプリを作成してみようと思います 今回実装したコードは以下です https://github.com/kurosame/glossary FCM の設定（管理画面） 以下から初期設定を行う 管理画面上での設定は以上で、その後実装する上で必要な情報は「プロジェクトの設定」で確認できます Firebase の初期設定 以下の情報は「プロジェクトの設定」で見れます 隠してますけど、これらの情報は公開してもセキュアです ただし、Firestore などのリソースにアクセスできてしまうと思うので、使っている場合は適切なルールを設定しておく必要は
GitHub - mswjs/msw: Seamless REST/GraphQL API mocking library for browser and Node.js.
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
前、Chromeを使うなら、必ずServiceWorkersを無効化しようという記事を書いたのですが、あの方法はてんで全然ダメダメでした。 chrome://serviceworker-internalsには無用なServiceWorkerが増え続け、chrome://flags/からはServiceWorkerの削除設定が削除されました。 そんなわけで、今度こそServiceWorkerを決定的かつ完全に消し去りたいと思います。 といっても自力でどうこうしたわけではなく、全面的に他人の力を借りただけですが。 Reject Service Worker Reject Service Workerをインストールする。 おわり。 かんたん！ 作者はtoshiさんです。 ありがとうございます。 アドオンの技術的内容はServiceWorkerを無効化するという記事に書かれているのですが、Serv
Periodic Background Sync 及び Web を Install するということ | blog.jxck.io
Intro メールクライアントや RSS リーダーのようなユースケースを PWA で実装する場合、バックグラウンドで定期的にタスクを実行したいケースがある。 このユースケースに特化した API として提案されているのが、 Periodic Background Sync(PBS) だ。 しかし、この API を取り巻く議論は「Web にアプリのような API を持ち込む上での難しさ」を物語っている。 この API が Web において正当化できるかどうかは、 Project Fugu に代表される Application Capabilities を Web に持ち込む場合の試金石になりそうだ。 現時点での、仕様、実装、議論について解説する。 Periodic Background Sync Web で定期的なタスクを実行する場合、タブが開いていれば setInterval() などで行う
PWA Night Conf: ScrapboxでのServiceWorkerとCacheの活用 - daiiz
shokai.icon masui.icon rakusai.icon progfay.icon yutaro.icon takeru.icon tiro.icon
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サーバーへの負荷軽減を実現するまでの経緯や実装などを紹介します。 オーディションシステムの紹介 システムの概要 まず初めに本稿の主題となるシステムが抱える課題について、先ほどサラッと単語が登場した「ニコニコオーディション」というシステムの前提があるとより理解が明瞭になるのでこちらを紹介します。 ニコニコオーディションとは
ぜひmosya Reactで遊んでみてください！ https://mosya.dev/react
Background #Search for just about any topic on Google, and you're presented with an instantly recognizable page of meaningful, relevant results. What you probably didn't realize is that this search results page is, under certain scenarios, served by a powerful piece of web technology called a service worker. Rolling out service worker support for Google Search without negatively impacting the perf
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 Workers at Slack: Our Quest for Faster Boot Times and Offline Support - Slack Engineering
Service Workers at Slack: Our Quest for Faster Boot Times and Offline Support Using a CDN-cached HTML file, a persisted Redux store, and a Service Worker, we reduced Slack boot time by more than 50%. We recently rolled out a new version of Slack on the desktop, and one of its headlining features is a faster boot time. In this post, we’ll take a look back at our quest to get Slack running quickly,
Service workers at TPAC
Last month we had a service worker meeting at the W3C TPAC conference in Fukuoka. For the first time in a few years, we focused on potential new features and behaviours. Here's a summary: Resurrection finally killed If you unregister a service worker registration, it's removed from the list of registrations, but it continues to control existing pages. This means it doesn't break any ongoing fetche
ServiceWorkerは、普通にfetchイベント受けてfetch(request)してresponseをUIスレッドに返す
Chrome XSSThe article is informative and intended for security specialists conducting testing within the scope of a contract. The author is not responsible for any damage caused by the application of the provided information. The distribution of malicious programs, disruption of system operation, and violation of the confidentiality of correspondence are pursued by law. PrefaceThis article is dedi
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. 今回使用する題材以前作って本サイト
Richer offline experiences with the Periodic Background Sync API | Capabilities | Chrome for Developers
Have you ever been in any of the following situations? Riding a train or subway with flaky or no connectivity Been throttled by your carrier after watching too many videos Living in a country where bandwidth struggles to keep up with the demand If you have, then you've surely felt the frustration of getting certain things done on the web, and wondered why platform-specific apps so often do better
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
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
PWAConf (London, April 19) igniter PWA Oslo / PWA London meetups organizer ngVikings / Mobile Era conferences organizer Google Dev Expert in Web Technologies
2019年にお話させていただいたServiceWorkerの開発に関する発表の資料です。部分的に（あるいは全体的に）情報が古くなっている可能性がありますのでご了承ください。
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cache Storage がめちゃくちゃ肥大化する問題について調べる | ぴんくいろにっき
「SPAのタブ永遠に開きっぱなし問題」を更新ボタンを設置せず解決した - 橋本商会
フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
Deno Deploy | Deno
Announcing WinterJS · Blog · Wasmer
リアルタイム通信用のコネクションをタブ間で共有してまとめる
ネイティブアプリ風Webアプリ「PWA」を実現する3つの技術 | さくらのナレッジ
ServiceWorkerの落とし穴8選 - Repro Tech Blog
Service WorkerとWasmを組み合わせてサーバー処理をブラウザーでリアルに再現する
Mock Service Worker で開発用のモックAPIを作る
ScrapboxでのServiceWorkerとCacheの活用 - daiiz
Mock Service Worker
Firebase を利用したプッシュ通知の実装 - Qiita
【Chrome】ServiceWorkerを今度こそ決定的かつ完全に消去する - Qiita
「Firefox 81」で“Twitter”が利用不能になる問題／Mozillaが修正版v81.0.2をリリース
エディター付きのReact開発環境を ブラウザーだけで実装した話
Bringing service workers to Google Search
Service Worker の Background Fetch によるメディアのキャッシュ | blog.jxck.io
ServiceWorkerとCacheによるSPAの高速化、オフラインモード - 橋本商会
CVE-2023-5480: Chrome new XSS Vector
Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法
Service worker caching and HTTP caching
Service Worker Lifecycle Explained | Felix Gerschau
Taking your web app offline (in a good sense)
ServiceWorkerの開発 / ServiceWorker Development
Service Workerが更新されたことを通知する更新ダイアログを出すライブラリを書いた
www.asahi.com
togetter.com
www.afpbb.com
tradenote.xsrv.jp
news.yahoo.co.jp
dateno.hatenablog.com