Cache Storageがめちゃくちゃ肥大化する問題 TBSのニュースサイト、TBS NEWS DIGがめちゃくちゃブラウザのストレージを消費しているという話がはてブや増田で話題になっています。 TBSのニュースサイトヤバない？ – はてな匿名ダイアリー 同・はてなブックマーク 確かに、手元でも同様の状況を観測できる。 当該サイトのストレージ使用状況 はたして、これは真実なのだろうか。本当に1.4GBも食うことがあるのだろうか…… そんなわけない、ということで調査 まずは再現性を確認するためにChromeのゲストモードで当該のサイトのDevtoolを開いてましょう。すると、StorageのUsageは386MBになっていました。（適当なページを開き、リロードした時点で340MB程度であった） 当該サイトのストレージ割合 上記のスクリーンショットをよく見ていただけるとわかると思いますが、こ
Intro JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。 document.cookie document.cookie は、ブラウザの API における代表的な技術的負債の一つと言える。 HTML Standard https://html.spec.whatwg.org/multipage/dom.html#dom-document-cookie 基本的な使い方は以下だ。 document.cookie = "a=b" console.log(document.cookie) // a=b まず、この API の問題を振り返る。 同期 API 最も深刻なのは、 I/O を伴いながら、同期 API として定義されているところだ。 この API は古くから実装されているため、I/O は非同期
Intro Origin は Web におけるセキュリティモデルの一つとして、コンテンツ間の Communication に関する境界を定義し、リソースを保護してきた。 しかし、 Spectre の発覚以降、 Communication に関する制限だけではなく Isolation によるメモリレベルでのアクセス制御が必要となった。 そこで現在作業されているのが、 CORB, CORP, COEP, COOP といった仕様群であり、これは Web におけるセキュリティモデルの更新作業と見ることができる。 概要と現状について解説する。 DEMO & Resources 量が多いため、動作する DEMO と関連リソースは、ページ下部にまとめてある。 CORS による Cross Origin Communication の制限 CORS は、平たく言えば、リソース提供元(サーバ)が、クライアン
Vim on Wasm on Web Worker on Browser with Atomics - はやくプログラムになりたい
この記事は以前の rhysd.hatenablog.com の続編で，WebAssembly (Wasm) にポーティングした Vim の話です． github.com TLDR Wasm にコンパイルした Vim のコードを Web Worker（ワーカスレッド）の中で動かすことで，メインスレッドで行われるユーザのインタラクションをエディタがブロックしなくなりました． また，イベントループのポーリングを Atomics.wait() でやってキー入力を共有メモリバッファで受け取ることで Emterpreter を捨て，実行速度・安定性・バイナリサイズ・ビルド時間・メンテ性が向上しました． 実装: Run Vim in Web Worker and say goodbye to Emterpreter by rhysd · Pull Request #30 · rhysd/vim.wasm
トラベルブックのフロントエンドチームでは2020年の9月から、ページのパフォーマンス改善に取り組んでいます。 今回は今までどのようにやってきたのかを紹介したいと思います。 Core Web Vitals 2020年5月、Core Web Vitals がSEOに影響されるというのがGoogleから発表され、集客的にもユーザー体験をページパフォーマンスが重要になりました。 弊社はメディアサービスを運用しており、SEOはビジネス的に重要な指標としています。 そのため、Core Web Vitals をパフォーマンス改善の指標としました。 Core Web Vitalsはより良いユーザー体験を提供するための指標となっていて、読み込み時間、インタラクティブ性、視覚的な安定性 に焦点をあてた下記3つの指標をベースに計測します。 Largest Contentful Paint (最大視覚コンテンツの
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
Auth0で保護されたAWS AppSync(GraphQL)をReactからApollo Clientで利用する方法をチュートリアルとしてまとめた | DevelopersIO
Create React App（CRA）を使ってアプリケーションを生成します。任意の作業用ディレクトリに移動後、下記のコマンドを実行します。 再現性を高めるために、パッケージのバージョンを固定してインストールしています。 npx create-react-app@3.4.1 --template typescript react-appsync-protected-by-auth0 cd react-appsync-protected-by-auth0 React RouterとAuth0のSPA用SDKをインストールします。 yarn add react-router-dom@5.1.2 @auth0/auth0-spa-js@1.8.1 yarn add -D @types/react-router-dom@5.1.2 Auth0をReactで利用する為のCustom Hookを作成
作成日 2023-01-29 更新日 2023-01-29 author @bokken_ tag Web, App, Sec はじめに リクエストのコンテキストをサーバ側に伝えることで、サーバ側でリクエストが危険なものかを判別するための Fetch Metadata Request Headers という仕様がある。今回、このヘッダがどういったものなのかについて Fetch Metadata Request Headers を読んだり、周辺のドキュメントを読んでまとめる。¶ TL;DR Fetch Metadata ヘッダはクライアント側では特に何も設定する必要はなく、サポートされていればブラウザによってリクエストに自動的にヘッダに付与されサーバに送付される サーバは送られてきた Fetch Metadata をもとに CSRF などの、攻撃の可能性があるリクエストを弾く事ができる 20
React + API Gateway + Lambda + DynamoDB で動画の再生回数を取得する仕組みを作ってみた | DevelopersIO
まず、DynamoDB のテーブルを 2つ作成します。 ViewCount 動画の再生回数を格納するテーブル プライマリキー ... video_name（ビデオ名） RequestHistory 同一 IP からリロードを繰り返された際にいたずらに再生回数がカウントされる事を防ぐ為の情報を格納するテーブル プライマリキー ... video_name（ビデオ名） ソートキー ... ip_address（IP アドレス） 以下のソースコードを実装しました。ランタイムは Python3.8 です。 処理失敗時のロールバック等は実装していませんので、あくまで参考程度にご利用ください。 「TABLENAME_COUNT」、「TABLENAME_HISTORY」には作成した DynamoDB のテーブル名をそれぞれ指定ください。 import os import boto3 from boto3
RemixをCloudflare Workersを動かす最初の一歩について、まずはデプロイまでの手順をご紹介します。（Wrangler v2版） はじめに こんにちは、CX事業本部MAD事業部の森茂です。 最近ビックニュース続きのCloudflare使っていますか？とくにCDN エッジを利用したサービスが話題になっており私もわくわくがとまりません:) RemixはCloudflareのCDN エッジサービスであるWorkersでSSRを使って動かすことのできるReactベースのフレームワークのひとつです。そこで、今回は、これを機にCloudflare Workersを使ってみようという方向け、RemixをCloudflare Workersで動かす最初の一歩を紹介させていただきます。 Cloudflare の記事一覧 | DevelopersIO Remix の記事一覧 | Develop
AMPで速くする。AMPを速くする - ゆーすけべー日記
いくつかの Web ページを AMP 化した。何をもってして「速い」と判断するかは後述するとしてとにかく速くなった。そしてさらに 3 つのテクニックを使って AMP ページを高速化した。今回はその過程を紹介する。 AMP だと何が速いか？どうして速いか？ 最初に、何をもってして速いと言うのかを考えないといけない。まとめると以下の 3 つになった。 ページの表示が速い Core Web Vitals を向上させる Google 検索結果からの遷移が速い それぞれについて見ていこう。また、AMP だとどうして速いかも考える。 1. ページの表示が速い ページの表示が速いというのはページのダウンロードが速くなる、描画が速くなるといったことである。これは分かりやすい。 amp.dev ではAMP が速い理由として以下を上げている。 すべての AMP JavaScript を非同期に実行 すべてのリ
前、Chromeを使うなら、必ずServiceWorkersを無効化しようという記事を書いたのですが、あの方法はてんで全然ダメダメでした。 chrome://serviceworker-internalsには無用なServiceWorkerが増え続け、chrome://flags/からはServiceWorkerの削除設定が削除されました。 そんなわけで、今度こそServiceWorkerを決定的かつ完全に消し去りたいと思います。 といっても自力でどうこうしたわけではなく、全面的に他人の力を借りただけですが。 Reject Service Worker Reject Service Workerをインストールする。 おわり。 かんたん！ 作者はtoshiさんです。 ありがとうございます。 アドオンの技術的内容はServiceWorkerを無効化するという記事に書かれているのですが、Serv
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のテストについては筆者が知る範囲ではインターネットにはあまり知
初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！ | 株式会社ウェブ企画パートナーズ
React って何？ React とは UI を作ることに特化した JavaScript のフレームワークです。以下のようなリッチな表現の時間選択のための UI も React を使って実装されていて、 react-gradient-timepicker というライブラリ名で一般に公開されています。 そのほかにも、日付選択のためのカレンダー形式の UI や Slick のようなカルーセルの UI も公開されています。React はこういった複雑な UI を作ることが得意なフレームワークです。 ただし、React を使うと、こういった UI が簡単に作れるようになるというわけではなく、JavaScript やプログラムのある程度の知識は必要になってきます。 HTML と JavaScript が合体した JSX 記法 React の特徴として JavaScript 内に HTML の様な独自
Node.js v15に実装されたAbortController | フロントエンドBlog | ミツエーリンクス
この記事はミツエーリンクス Advent Calendar 2020 - Adventarの14日目の記事です。 少し前にNode.jsのv15がリリースされました。v15にはAbortControllerの実装が追加されています。 AbortControllerは簡単に言うとPromiseなどの非同期処理を中断させるために実装されたインターフェースです。Node.jsだけではなくWeb APIにも存在しており、この度Node.jsに実装されたAbortControllerはWeb APIをベースにしています（ただしExperimental扱いです）。 （12/15追記：12/9にリリースされたNode.js 15.4.0でExperimentalではなくなりました。） 今回はAbortControllerをどのように使うのかをご紹介したいとおもいます。 AbortControllerの使
JSer.info #446 - シングルページアプリケーション向けのJavaScriptフレームワークであるMithril 2がリリースされました。 Release v2.0.1 · MithrilJS/mithril.js 破壊的変更としてm.redraw()がデフォルトで非同期となり、代わりにm.redraw.sync()が追加されています。 その他にもm.withAttrの削除、m.requestが返すPromiseがサーバエラーの場合にもrejectされないように変更、IE10以下のサポート終了なども含まれています。 また、m.requestがtimeoutやresponseTypeのサポートなどの機能追加も含まれています。 Electron 6.0.0がリリースされました。 Release electron v6.0.0 · electron/electron Stable R
Create React Appで作成したReactアプリにReact Native for Webを導入する | DevelopersIO
Create React Appは、コマンド１つでReactアプリケーションの雛形を作成することができる、Facebook製の環境構築ツールです。新しくアプリを作成する際に使用されている方も多いのではないかと思います。 React Native for Webは、iOS/Androidアプリ作成向けのライブラリであるReact Nativeと同じ名称のコンポーネントを使ってWebアプリケーションの画面を作成することができるライブラリです。使用していてReactに比べてより効率的に画面の作成ができると感じています。 当記事ではCreate React Appを使用して作成したReactアプリにReact Native for Webを導入する方法についてご紹介します。 Create React Appを使ってアプリを作成する 以下のコマンドを実行します。今回はTypeScriptを導入したい
Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版] React.jsの状態管理ライブラリはReduxが有名ですが、結構複雑だったりステートを一つ更新するだけでもタイプ量が多くなってしまうというデメリットもあります。 そこでこの記事ではRedux Toolkitというライブラリを使用して、もう少し簡単に状態管理する方法をご紹介します。 投稿日2020年01月27日 更新日2020年01月29日 環境は react : 16.12 typescript : 3.7 @reduxjs/toolkit : 1.2 react-redux : 7.1 でお送りします。 この記事でやること 基本的に以前作成したTodoアプリにRedux Toolkitを導入します。 Todoアプリについては下記記事を参照ください。 React.js + Typ
![Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a30174b13b59e7f3dd471819be977e4692229a1e/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2018%2F08%2Freact-icon.png){kind=tracking}
JSer.info #600 - BunというZig言語とJavaScriptCore(WebKitのJavaScriptエンジン)を使って書かれたJavaScript Runtimeが公開されました。 oven-sh/bun: Incredibly fast JavaScript runtime, bundler, transpiler and package manager – all in one. Bunは"all-in-one JavaScript runtime"とあるように、TypeScript/JSXのTranspiler/Bundler/Task Runerを同梱し、npm互換のパッケージマネージャーやNode-API(N-API)互換の実装、FetchなどのWeb APIの実装をもっています。 Denoと似ている立ち位置のRuntimeですが、Node.js互換のAPI
こんばんは daiizdaiiz.iconです Notaでの開発 Scrapboxチーム 2年 /daiiz/ServiceWorkerを用いたキャッシング戦略 ~Wikiアプリケーションを例に~ Helpfeelチーム 2年 本当に役立つFAQ検索システムを目指して 趣味での活動 SVGにまつわるネタを研究 https://scrapbox.io/daiiz/search/page?q=svg GUI勉強会に参加 /guiland 本日の3本 履歴を遡るスライダー タッチデバイスでの文字選択 表作成ツール 履歴を遡るスライダー Scrapboxには、ページの過去のバージョンを表示する機能がある page history 一定期間が経っている状態で編集されるとスナップショットが撮られる 行単位での編集差分を確認できる 履歴をパラパラ見ていくための操作パーツを作りたい 真っ先に思いつくUIの
JSer.info #454 - iOS 13、macOS 10.14.5(Mojave)に搭載されるSafari 13のリリースノートが公開されています。 Safari 13 Release Notes | Apple Developer Documentation Web Authentication APIを使ったFIDO2のセキュリティキーに対応、__Secure-と__Host-のクッキーprefixのサポート、Pointer EventsやVisual Viewport APIのサポートなどが行われています。 iOS 13のSafariでWebDriverのサポート、ITP 2.3へのアップデート、WebSQLの削除なども含まれています。 WebDriver is Coming to Safari in iOS 13 | WebKit Intelligent Tracking
JSer.info #491 - Firefox 77がリリースされました。 New in Firefox 77: DevTool improvements and web platform updates - Mozilla Hacks - the Web developer blog Firefox 77.0, See All New Features, Updates and Fixes Firefox 77 サイト互換性情報 | Firefox サイト互換性情報 Firefox 77 for developers - Mozilla | MDN 開発者ツールのSource Mapロード時間の改善、デバッガーのステップ実行の改善、ネットワークパネルの改善などが行われています。 またES 2021で入る予定のString#replaceAllの実装、JPEG画像がExifデータに基づい
JSer.info #450 - Vue.jsをつかったフレームワークであるNuxt.js 2.9.0がリリースされました。 Release v2.9.0 · nuxt/nuxt.js v2.5.0で本体に統合されたTypeScriptサポートがリファクタリングされ、TypeScript関係の処理がコアからパッケージとして分離されています。 この変更により一部パッケージの入れ替えが必要になっているため、2.8からのマイグレーション方法については次のページに書かれています。 Nuxt TypeScript Migration from Nuxt 2.8 | Nuxt TypeScript Dateを扱うライブラリであるdate-fns 2.0がリリースされました。 Release v2.0.0 · date-fns/date-fns 破壊的な変更として、それぞれの関数が直接日付文字列を扱うの
JSer.info #567 - TypeScript 4.5が正式リリースされました。 Announcing TypeScript 4.5 - TypeScript TypeScriptがビルトインで持つlibの型定義をpackage.jsonのdependenciesを使ってロックできるようになっています。 Awaited型の追加、Top-Level awaitに対応したmodule: es2022のサポート、Condition Typesにおいて一部末尾最適化するようになる変更も含まれています。 import名に対するtype modifierのサポート、ES ProposalのPrivate Field Presence Checks、Import Assertionsのサポートなども追加されています。 TypeScript 4.5 Betaで追加されていたNode.jsのESMサ
2021/10/12更新 目次 Service Workerとは Service Workerでできること Service Workerの制限 Service Workerのライフサイクル 動作するまでの流れ Service Workerの登録 Service Workerのインストール Service Workerの有効化 キャッシュ制御 キャッシュ対象ファイルの準備 リクエストに対する応答「キャッシュに無ければネットワーク」 リクエストに対する応答「ネットワークがダメならキャッシュ」 リクエストに対する応答「オフライン不可である旨を表示」 古いキャッシュの削除 ユーザーによるキャッシュ削除 個人的に感じた疑問 Q. Service Workerとブラウザキャッシュはどのような関係にあるのか？ Q. 何らかの誤りにより更新ができなくなってしまうようなことは起きないのか？ Q. どんなリク
令和4年のPush通知を改めて整理する
はじめに iOSのPush通知は定期的にアップデートを繰り返しており、常に最新の技術を追っていく必要があります。 本記事では令和4年時点での全体像把握のため、概要の整理を行いました。 ※ あくまで全体感のキャッチアップを目的としているため、各トピックの詳細な解説は行っていません。 Push通知とは サーバーサイドから、任意のタイミングでユーザーの特定端末に通知を送信できる仕組み AppleのPush通知基盤であるAPNsに通知の送信をリクエストし、そこからユーザー端末に対してデータが送信される 似たものとしてローカル通知があるが、こちらはアプリ内の特定タイミングで通知を登録するもの 公式ドキュメントはこちら 要素 APNs Appleが提供しているPush通知基盤 ユーザー端末へのPush通知の送信はここを介して行われる Production環境とSandbox環境がある Producti
Firebase Authenticationを利用する認証でメールアドレス＆パスワード、メールリンク、Google、Twitter…と一通り実装してみたなかではメールアドレス＆パスワード認証が一番面倒臭かった。 この記事はその面倒くさいメアド認証にまつわる各種手順を脳内整理がてらメモったものです。 殆どはFirebaseの公式ドキュメントに書いてあることなので、主要な関数名などにはドキュメントへのリンクを貼ってあります。 メールアドレス＆パスワードで新規登録 Firebaseだとメールアドレスを使う認証では「メールアドレス＆パスワード」と「メールリンク」が選択できる。 メールアドレス＆パスワードを利用した場合、確認メール送信までがフェーズ１という感じ。 メールアドレス・パスワード入力 登録の確認（auth().fetchSignInMethodsForEmail） ユーザーアカウント作成
![[JS] Firebaseの覚書 ① メールアドレス認証](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
JSer.info #685 - Storybook 8.0がリリースされました。 Storybook 8 Storybook: UI component explorer for frontend developers 破壊的な変更として、storiesOf APIの削除、*.stories.mdxの削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。 詳細はマイグレーションガイドを参照してください。 Migration guide for Storybook 8.0 • Storybook docs 機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgenがデフォルトとなるように変
JSer.info #579 - Parcel 2.3.0がリリースされました。 Release v2.3.0 · parcel-bundler/parcel ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。 Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更などの変更が含まれています。 Reduce the number of npm dependencies needed by parcel by devongovett · Pull Request #7576 · parcel-bundler/parcel Vite 2.8.0がリリースされています。 vite/CHANGELOG.md at main · vitejs/vite macOS Montereyで50
JSer.info #538 - Babel 7.14.0がリリースされています。 7.14.0 Released: New class features enabled by default, TypeScript 4.3, and better CommonJS interop · Babel Release v7.14.0 · babel/babel 2021-04のTC39ミーティングでStage 4となったclass fields/private methodsなどを@babel/preset-envがデフォルトでサポートするようになりました。 そのため、@babel/plugin-proposal-class-propertiesと@babel/plugin-proposal-private-methodsを個別のプラグインとして入れる必要はなくなっています。 また、Node.
JSer.info #493 - ECMAScript 2020がEcma internationalの119th General Assemblyで承認され、正式にリリースされました。 Ecma latest news Release ES2020 · tc39/ecma262 proposals/finished-proposals.md at master · tc39/proposals ECMAScript 2020では次のような変更が含まれています。 for-in mechanics - for...inやObject.keysの順番が仕様で定義された export * as ns from "mod" - 構文の追加 String.prototype.matchAll - マッチしたすべての文字列をイテレータで返す globalThis - ブラウザのwindow、Node.
ども、@kimihom です。 今回は Cache API を使う機会があったので、調査結果と利用のユースケースと共に紹介しよう。サーバーサイドをどんなに高速化するよりも、フロントエンドで そもそもリクエストをさせない 仕組みにすれば、それが最も速いというのを改めて感じた。 Service Worker と Cache API 「Service Worker を使えば、オフラインでもアクセスできるようになる」っていうのがよく聞く話だろう。これを実現するには、Cache API と Service Worker の2つを組み合わせることで実現できる。Service Worker を使うと、ページリクエスト時のイベントを横取りすることができるから、それが実現できる。詳しくは以下の Qiita が参考になる。 ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを
ServiceWorkerの事前読み込みとキャッシュ化でプロダクトを高速化した話 - KAKEHASHI Tech Blog
はじめに こんにちは、KAKEHASHIのMusubiInsightチームでエンジニアをしている高田です。 MusubiInsightとは、薬剤師さんの業務データを可視化するBIツールになります。 そんなMusubiInsightにおいて、表示の高速化を狙いにServiceWorkerという技術を導入したので、紹介したいと思います。 MusubiInsightの課題 ServiceWorkerが何か、という話をする前に、MusubiInsightの課題について触れておきます。 ありがたいことに、MusubiInsightのユーザー数は堅調に増加していますが、それに伴いパフォーマンス低下の課題が浮き彫りになってきました。 特に、薬局数や薬剤師数の多い法人様では1リクエストでのAPIの計算量が大きく、なかなかレスポンスが返ってこないために、ユーザー体験を損なってしまっていました。 そこで、チー
ブラウザからServiceWorkerを削除する方法
ServiceWorkerの削除 ServiceWorkerは、WEBサイトをネイティブアプリのように使えるPWA(Progressive Web Apps)を実装する仕組み。 ブラウザ内でキャッシュをコントロールすることで、ある程度はオフラインでWEBサイトを閲覧できるようにするとか、アプリのように通知を受けれるようにするとかの機能が実装できる。 最近、自分のWEBサイトでServiceWorkerを中途半端に入れてしまったので、色んな人から「新しい情報が表示できない」（キャッシュのコントロールがおかしい）と言われまして、削除する方法を探しておりました。 ※ワードプレスのテンプレートの機能で「PWA」というボタンがあったので、「へー、PWAに対応しているのか」と気軽にポチッと押してしまったのが良くなかった・・・ 以下、ServiceWorkerはユーザーのブラウザ側に入っているので、これ
ServiceWorker を無効化する
はじめにServiceWorker と言う、この頃話題の機能がブラウザに追加されました。既存のウェブページではできなかった。スマホアプリのような機能をブラウザで実現できる素晴らしい機能です。ただし、ユーザの事前承認なしに登録できます。 ServiceWorker は、スマホアプリのような機能を無承認で実行できるため、便利な半面でとても危険な機能です。ウイルス対策ソフト（Windows Defenderなど）では、一部の ServiceWorker をウイルスとして検出することがあります。 ServiceWorker は、サイトを閉じても動作し続けることが可能なため、ブラウザの動作を重くする原因にもなります。 ServiceWorker は、キャッシュを大量に保存するため、ディスクやメモリの圧迫につながることもあります。 登録済みの ServiceWorker を確認する次のアドレスにアクセ
【Other】【CSS / jQuery / javascript】PWAでプッシュ通知を実装してみる（１）準備と解説｜虹色ミツバチ
NOTIFICATION 当サイトの更新をプッシュ通知で受け取ることができます。 プッシュ通知を受け取る プッシュ通知を解除する PWAでプッシュ通知を実装するのが大変だったので書いておきます。 目標はこんな感じ。 freoをPWA化する プッシュ通知の購読をサイトから簡単に行えるようにする プッシュ通知の送信は手動で行うものとする（サイトの更新のお知らせとか簡単なものしかしないので） 色々やって結果がこれ。 サイトをWindows・Android・iOSにインストールできるようになった 一度キャッシュした画面ならサイトをオフラインでも閲覧できるようになった サイトの表示が軽くなった サイト上にプッシュ通知の購読状況が表示されるようになった サイト上でプッシュ通知の購読開始・購読停止ができるようになった フォアグラウンドのGoogleChrome、Firefoxを利用している複数人に対して
[React] よーし! いっちょReactやってみっか! #2 プロジェクト俯瞰編 | DevelopersIO
はじめに CX事業本部の中安です。まいどです。 モバイルアプリエンジニアな自分がReactを始めてみることにした 「よーし! いっちょReactやってみっか!」シリーズの続きです。 今回もよろしくお願いします。 前回は環境構築をしてWEBアプリを作成し、起動するところまでをやりました。 また、Chromeの開発ツールの導入も行いました。 今回は作成したプロジェクトを一度俯瞰して見てみましょう。 VSCode 開発のために使うIDEとして VSCode を使うことにしました。簡単に手に入りますからね。 前回の復習 前回は、以下のように任意のディレクトリでReactアプリのプロジェクトを作成しました。 % npx create-react-app my-app VSCodeを簡単に開けるようにしよう もし「VSCode を初めて使うよ」って場合は、ちょっと一工夫しておくと良いかと思います。 ま
![[React] よーし! いっちょReactやってみっか! #2 プロジェクト俯瞰編 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee41023e6f390843baace34a303c74b1767c52d0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Freact.jpg)
Workbox + webpackでServiceWorkerのオフラインキャッシュと戯れる - Hivelocity (ハイベロシティ) デジタルでビジネスを最適化
HivelocityでフロントエンドエンジニアをしているHaradaです。 先日PWAのカンファレンスに参加する機会があったので、最近のPWA事情について知識をアップデートしておこうと前から気になっていたWorkboxを使ったデモを作成してみたので、その辺りを少しご紹介したいと思います。 せっかくなので、将来的に自社プロダクトへの実装も視野に入れて、今回はwebpackからWorkboxを使用する構成でトライしてみました。 Workboxとは 普段開発に従事していない人でも、トレンドとしてPWA（Progressive Web Apps）という言葉は聞いたことがあると思います。 端的に言うと、Webサイトでスマホアプリのような機能や動作を実現するための仕組みです。 一般的にPWAの利点として主に以下のようなものが挙げられています。 ホーム画面へのアイコン追加プッシュ通知オフラインでも動作す
3年ほど前からwapa5pow.comのドメインでブログをNetlify上のGatsbyで構築していましたがVercel上のNext.jsに移行しました。 当時はMarkdownで書いてGitHubにプッシュするだけでデプロイされて書きやすかったのですが、やりにくい点が多々でてきました。 当時触ったことのないReactの上にさらにGatsbyがのっていて細かいところに手がつけられない Gatsbyのバージョンが古くてnpmモジュールがいれられずSpeaker Deckなどの埋め込みがしずらい OGPの画像を自分で作成しなければいけない Markdownのメタデータにカテゴリを入れるところがあり無駄なものを考えなければいけない などです。以前Zennのエディタをローカルで動かしたときに編集しやすくこれと同じような感じでローカルで楽しくブログを書きたいなと思い構築しました。 Reactも最近触
メンテナンス実施の翌日、ブログのトップページが更新されない報告があがりました。 ServiceWorker応答 Date、Expiresとも前日のコンテンツが、ServiceWorkerのキャッシュ応答により表示される状態でした。 Webサーバからの応答 キャッシュを迂回するスーパーリロードを行うと、正しい最新のコンテンツが取得できる状態でした。 原因 Nuxt関連パッケージの更新 revision 付与が 必須となる仕様変更を含むパッケージへのアップデートが原因でした。 NuxtでPWAが更新されない問題の調査 キャッシュ設定 当サイトのサービスワーカーのキャッシュ設定はデフォルト。キャッシュの最大有効期限を明示しない状態で利用していた事で、サービスワーカーのキャッシュが長時間残りやすい状況に至ったと推測されます。 確認 対処方針を決定するため、PWA、サービスワーカーを撤去した検証環境
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cache Storage がめちゃくちゃ肥大化する問題について調べる | ぴんくいろにっき
Cookie Store API による document.cookie の改善 | blog.jxck.io
Site Isolation 及び Web のセキュリティモデルの更新 | blog.jxck.io
Lighthouseの点数を50点以上改善したお話 – TravelBook Tech Blog
ScrapboxでのServiceWorkerとCacheの活用 - daiiz
不正なリクエストを弾くために使える Fetch Metadata という仕様について
RemixをCloudflare Workersで動かす最初の一歩 | DevelopersIO
【Chrome】ServiceWorkerを今度こそ決定的かつ完全に消去する - Qiita
2019-07-30のJS: mithril.js 2、Electron 6、React入門ガイド
Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版]
2022-07-14のJS: Bun(all-in-one JavaScript runtime)、Vite 3.0.0、600回目の更新
感動するUIの作り方 3連発 - Nota TechConf
2019-09-24のJS: Safari 13、Chrome 78 Beta(Native File System trial)、Storybook 5.2(CSF)
2020-06-09のJS: Firefox 77.0、HTML5 Boilerplate 8.0.0、React TypeScript Cheatsheets
2019-08-27のJS: Nuxt.js 2.9.0(TypeScript)、ChromiumベースのMSEdge βリリース、data-fns 2.0.0
2021-11-23のJS: TypeScript 4.5、React 18 beta、Remix v1
Service Workerの基本とキャッシュ制御 - プログラミング雑ネタ集
[JS] Firebaseの覚書 ① メールアドレス認証
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
2022-02-14のJS: Parcel 2.3.0、Vite 2.8.0、Angular Compilerがどのように動いているか、JavaScriptでDDD
2021-05-04のJS: Babel 7.14.0、RxJS 7.0.0、Safari 14.1
2020-06-23のJS: ECMAScript 2020リリース、Bootstrap 5 alpha、Safari 14 Beta
Cache API を利用したフロントエンドキャッシュ - ボクココ
ブログをNext.jsへ移行しました | wapa5pow blog
当ブログサイト(DevelopersIO)におけるPWAサポート終了のおしらせ | DevelopersIO