Service Worker

morishitaです。 いこレポに workbox を導入してServiceWorkerによるキャッシュを実装しました。 そのことについて書きます。 導入の背景 いこレポはおかげさまで順調に成長できており、アクセス数も伸びてきています。 先日 1 周年を迎え、ますます頑張っていなかければと思っている所存です。 report.iko-yo.net いこレポのトラフィックは現状、オーガニック流入が最も多く新規ユーザが大部分を占めています。 それはそれで良いのですが、多少、成長の質にも目も向けられる様になり、 リピータを増やしたいなぁと思い始めました。 メディアの本分としては、魅力的なコンテンツで…

クラウドサイン事業本部の田邉(𝕏@s_tanabe_)です。 フロントエンドの開発に携わっているみなさんは、バックエンドや BFF(Backends For Frontends) の開発を待たずにフロントエンドの開発に取りかかりたいと考えたことはありませんか？ これが実現できると フロントエンドでの不確定性を早いうちに潰しておける バックエンドと並行してフロントの開発を進めることができるようになる など開発の高速化につながるメリットを享受することができます。 そしてこれを実現することができるようになるツールこそが Mock Service Worker です。 以降では Mock Servic…

PWA（Progressive Web Apps：プログレッシブウェブアプリ）は、ウェブ技術を使用してネイティブアプリのような体験を提供するウェブアプリケーションのことです。PWAは、ウェブサイトにおけるスムーズなユーザー体験を追求し、オフラインでの利用やホーム画面へのインストールなど、ネイティブアプリの利点を持ちながら、ウェブの利便性を維持することを目的としています。 PWAの特徴 レスポンシブ: どのデバイス（スマートフォン、タブレット、デスクトップ）でも快適に使用できるように設計されています。 オフライン機能: サービスワーカーを活用することで、ネットワークが不安定な場合や完全にオフライ…

こちらの本を読みました。とっても勉強になりました！ フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識 [ 吉井 健文 ]価格: 3080 円楽天で詳細を見る 読もうと思ったわけと感想 テストを導入の必要性はとても感じているけれど、仕事でなかなかテストを書く機会に恵まれず…。 そもそも自分がフロントエンドのテストって何すればいいのかよくわかっていなかったので、提案もままならず…なので、まずは知識をつけたいと思ってこちらの本を読みました。フロントエンドのテストに関して体系的にまとめられている本はほとんどお見かけしないので、本当にありがたいです。 結果、読む前と…

やましい事はしていないのですが とあるサイトのとある数値をエクセルにコピペしたいです。 プログラマーなのでpythonでスクレイピングすればいいのですが もちろん禁止されているというか許可されていないので一個一個コピーして貼り付けています。 その対象のサイトはなぜかコピペができないようになっています。デベロッパーツールでコピーもできるのですがそもめんどくさい。普通のサイトと同じでコピペしたいのです。 右クリックを禁止を以下のサイトを参考に解除しました。 ただ毎回、打つのがめんどくさいの自動化しました https://www.omakase.net/blog/2022/05/lift-migic…

github.com めっちゃくちゃ大変でした。 Misskey.ioでは、画像を media.misskeyusercontent.jp ってドメインから配信してるんです。 で、サービスURLは misskey.io というわけです。 これをChromeアドオンのContent Scriptなり、Script Injectでやろうとすると、fetch()がCORSに阻まれてできない。canvas経由も同じくCORSでダメ。 というわけで、CORS制約を受けないservice worker(background.js)でやろうとするんですが、これがまた大変でした。 URL.createObje…

2024/09/02分のコミットです。 CHANGELOGへの追加はありませんでした。 Test DevcontainerGenerator directly railties/lib/rails/generators/rails/devcontainer/devcontainer_generator.rbの修正です。 devcontainer generatorでapplication_system_test_case.rbの編集を行う際に、相対パスで扱っていたのを、destination_rootを使用した絶対パスで扱うよう修正しています。テストをしやすくする為。合わせて、不足していたde…

VMware Cloud Foundation（VCF）5.2 で、Aria Suite Lifecycle から Aria Automation をデプロイします。 ドキュメントは下記のあたりが参考になります。ただ、リソースがあまりないラボ環境なので DRS のアンチ アフィニティ ルール設定などは省略するつもりです。 Deploy VMware Aria Automation for Private Cloud Automation for VMware Cloud Foundation 今回の内容です。 今回の環境 Aria Suite 製品 DNS レコード登録 1. バイナリ マッピ…

2024/08/22分のコミットです。 CHANGELOGにのったコミットは以下の通りです。 actiontext/CHANGELOG.md Strip content attribute if the key is present but the value is empty Add store_if_blank option to has_rich_text activerecord/CHANGELOG.md Add support for ActiveRecord::Point type casts using Hash values Infer default :inverse_of …

自分の場合は Service Worker が起動する前にリクエストが走って、画面リロードしようがキャッシュが有効で304 Not Modifiedが返ってくる状況だったと思われる。 Async/Awaitを使って起動順を整理したら解消した。 main.ts でcreateAppしているところを以下のように修正して worker.startとcreateAppの順番を整理した。 main.ts async function enableMocking() { if (process.env.NODE_ENV !== 'development') { return } const { worke…

はじめに 背景 やりたいこと Why MSW？ 導入手順 詰まったこと defaultのtimeout設定時間が短い CIで落ちた時の検証方法がわからない 認証後のストレージの状態が入ってこない 今後の展望 おわりに はじめに enechainでフロントエンドエンジニアをしている@Shunya078です！ 自分の所属するGXデスクでは『日本気候取引所 - Japan Climate Exchange』(以下JCEX)のサービス開発を行っており、その中でReactを使用したフロントエンドの開発を担当しています。 リグレッションテストは運用を考えると、設計から導入した後、どう管理していくかまで検討…

なんて頭の悪いタイトル。直球勝負よ、どうもざれんですー。 ということで、超単純、GoogleChromeの拡張機能をFirefoxくんで動かしちゃおうぜ！ って記事です。そのままだ。 恐らく検索で来てくれた方は、訳分からずだから検索したのでしょう。ええ、私も何にも理解しておりません!! なので、こうやりゃ動く、と書くだけです(笑)。どうして動くのかは知りません!! そんな感じでどうぞ！ (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({}); 今回は…

【7/31(水)】DevelopersIO 2024 OSAKA #devio2024 classmethod.connpass.com 大阪でのリアル開催ありがたい！ セッション レビューに向けて一工夫しませんか、というお話 高崎さん LineミニアプリはWebアプリなので脆弱性対策やライブラリのアップデートなど対応が必要 ドキュメントとソースだけなので要件や背景を残すことを考えた レビューでADRを残すことにした ADR確認内容 整理内容のチェック 方針や検討の是非 調査内容の是非 コストの確認 実装漏れの確認 レビューはレビューアーの振り返り KPTのKはどうすべきか？->褒めましょう …