ServiceWorkerの落とし穴8選 - Repro Tech Blog
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
Web Push通知の受信を、Firebase Cloud Messaging(FCM)＋Service Worker ＋Notificationで受信側でコントロールしてみた | Tech Blog | CRESCO Tech Blog
Web Push通知の受信を、Firebase Cloud Messaging(FCM)＋Service Worker ＋Notificationで受信側でコントロールしてみた
FCM + ServiceWorker でPUSH通知のメモ - Qiita
背景 __PUSH通知__という言葉に惹かれ、独自に勉強を始めた。しかし、これがとても苦労したのでメモを残す。 前提 正しい組み込み方ではな無いかもしれない。 とりあえず動いた！という喜びの勢いでメモ残している。 ServiceWorkerを利用するにはSSLでページにアクセスする必要があるので、その環境があること。 ディレクトリ構造 /(ROOT) ├ index.html ├ firebase-messaging-sw.js ├ app.js ├ manifest.json ├ script/ │ └ firebase-init.js ├ images/ ├ 144.png └ 192.png 手順 index.htmlを作成する index.htmlはページを表示するとともに、__必要なJavascriptを読み込む__ことが目的となる。今回の場合はfirebaseを利用する為、__
AWS Amplify の ServiceWorker で Web Push 対応を実装してみる - クライアント編 - Qiita
Web Push、送りたいことありますよね。 この記事は Web Push 通知を使うアプリを AWS Amplify で作ってみる話です。 特にクライアント側を AWS Amplify でどう実装するかを見てみます。 当初サーバー側もあわせて書こうとしたのですが、分量が多くなりそうだったので今回は一旦クライアント編として、サーバー編はまた Amplify の API カテゴリを絡めたものを後日書きます（たぶん）。 Web Push やりたいときにやらなきゃいけないこと Web Push を運用しようとすると、けっこう色々やることがあります。 Push を受け取るクライアント側 Service Worker の実装 購読状態管理、Service Worker 登録等を行うフロントアプリケーションの実装 購読処理時に払い出されるエンドポイントをサーバーサイドに送信 Push を送るサーバー側
What is the Service Worker ⚙️ Cache Storage Limit? How Much Your Progressive Web App (PWA) Can Store
What is the Service Worker ⚙️ Cache Storage Limit? How Much Your Progressive Web App (PWA) Can Store Browser Service Worker Cache CapacityService workers enable web sites to work offline using the Cache API. Developers need to design the logic to manage how site assets are persisted in storage. This can lead to many challenges for developers to solve when planning their caching strategies. How muc
アメブロ2019: こえのブログでのPWA | CyberAgent Developers Blog
こえのブログは「声で書くブログ、声で聴くブログ、声で観るブログ」をコンセプトに書き手、読み手双方にバージョンアップしたブログを提供するアメブロの新機能です。 投稿者は端末に向かって喋るだけで、その音声が活字化されブログとして公開できます。閲覧者は活字化された文字を通常のブログと同じように読めるほか、音声を聴きながらでもコンテンツ消費できます。 モバイル端末、テレビ端末やスマートスピーカーなどの普及により、今後ますます増えると予想される利用形態に対して、それぞれに適した形でコンテンツを提供できるように挑戦しています。 この記事では、技術的な側面を中心にこえのブログを紹介します。 こえのブログは、文字でも音声でもコンテンツ消費できるのが特徴です。読者の方へのメッセージや質問に回答など利用法は様々です。龍玄としさんやクロちゃんさんなど著名人の方の声も聴けます。 できる限りサーバーにアクセスしない
僕の考えた最強のService Workerキャッシュ戦略で爆速サービスを作った - Qiita
はじめに 聖地の写真を共有するサービス「Holy Place Photo」にService Workerによるキャッシュを実装しました。 そのためネットワークがオフラインでも下記のようにサクサク動きます!!!! Service Worker Demo pic.twitter.com/t04xSRl7B2 — tiwu (@tiwu_official) 2019年2月25日 また、LighthouseのPWAのスコアは100を取れました。 この記事ではService Workerを利用したキャッシュの設計、Laravel + Vue.jsのWebアプリケーションでの実装を解説していきたいと思います。 注意書き 僕の考えた最強のService Workerのキャッシュの設計のため唯一の正解ではありません キャッシュの設計はサービスによって違うと思うのでこの記事は一つの参考にしてください まずS
Service Worker における BaseURI の振舞いについての議論 - Qiita
Intro Service Worker は、その立ち位置が非常に特殊なため、仕様を策定する上でも「どう振る舞うべきか？」を決定するのが難しい場合がある。 時には、開発者は「どう振る舞うだろう」と考えるか、感覚的な部分についてアンケートを行い、フィードバックを得ることが過去にもあった。 今回は、 Service Worker が絡んだ場合の BaseURI について、同様のアンケートが行われているので紹介する。ぜひ考えてみてほしい。
PWA: Workbox Routing 和訳 (その１) - Qiita
参照元ページ: https://developers.google.com/web/tools/workbox/modules/workbox-routing Workboxルーティングとは？ サービスワーカーはページに対するネットワークリクエストをインターセプト、つまり横取りできます。それによってブラウザへ返されるコンテンツは、キャッシュ経由、ネットワーク経由もしくはサービスワーカーが生成したものなど多岐に渡ります。 workbox-routingを使うことで、リクエストに対する様々なレスポンスを返すためのルーティングの設定を簡単に行うことができます。 ルーティングがどのように行われるか ネットワークへのリクエストがサービスワーカーのfetchイベントを発火させる時、workbox-routingは与えらたルートとハンドラーを使ってリクエストに対するレスポンスを返します。 上記の図で大切
Cache GraphQL POST requests with Service Worker
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
PWAにおけるキャッシュの更新方法
PWAで一番厄介な問題と言えばキャッシュではないでしょうか。開発中などで、キャッシュを更新したい時にできなかったり、キャッシュを読み込んでしまって修正が反映されずにバグ解決に時間を取られるかも知れません。 そこでちょっとしたTipsを紹介します。 Service Worker登録時の工夫 それは registration.onupdatefound を仕込んでおくということです。このメソッドはService Workerが更新されているかどうかを検知してくれます。もし更新されている場合は、updateメソッドを使って更新できます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, o
「Service Workerってなんだっけ？」のおさらい - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Service Workerを無効化にしようという記事が話題になっておりますが、 そもそもService Workerってなんだっけ？ というおさらいをしようというのが、今回の趣旨になります。 記事のスコープ 今回の記事は、概要さらっとおさらいすることを目的としたので、技術的な話や設計については省いております。 特にCacheのことについて掘り下げて調べました。 （cacheの設計や実装については後ほど詳細をまとめた記事を書く予定です。) Service Workerを使って何ができたっけ？(できるんだろう?) という方の理解
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
PWAで「ホーム画面に追加」が表示されない時に確認する事 - 文系プログラマによるTIPSブログ
以外としょうもない理由で表示されないんですよね〜 最近PWAが徐々に浸透してきましたね。 PWAは概念的な言葉なので、いざ具体的にPWAに対応しようとすると、「PWAってそもそも何だ？」となります。 ネットで調べると、ブラウザでサイトを表示した時に「ホーム画面に追加」ダイアログが表示されるようにする事もPWAの一つである事が解ります。 しかし、いざ対応してみたけど、何故か「ホーム画面に追加ダイアログ」が一向に表示されません。 今回はその原因を少しだけまとめてみようと思います。 manifest.jsonがhtmlソース内に定義されていない ServiceWorkerが登録されていない サイトがTLSに対応していない サイト訪問回数が2回ではない サイトの訪問間隔が5分以上ではない manifest.json内のアイコン画像が404である ブラウザやcurlコマンド等でアイコン画像のURLを
進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より)
2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった方に向けてセッションの内容を記事にまとめましたので、ぜひご覧ください。 進化する Web ～ Progressive Web Apps の実装と応用 ～ from Osamu Monoe この記事では、昨今話題に上ることが多いPWAことProgressive Webアプリケーションについて、実際の作り方を解説しながら、それがいったいどういったものであるかを詳(つまび)らかに紹介することを目的としています。 Webでは、「ネイティブアプリと同じことができる」「ネイティブアプリを置き換える」など、期待に胸を膨らませずにいられない浪漫に満ちた噂がありますが、それが本当かどうか記事
ServiceWorker内でBabelを駆使して、JavaScriptをビルドする - ログミーTech（テック）
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやServiceWorkerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「ServiceWorker Side XXX」に登場したのは、mizchi氏。ServiceWorkerを駆使したある取り組みについて紹介します。講演資料はこちら 開発環境のためにServiceWorkerを使う mizchi氏（以下、mizchi）：では「ServiceWorker Side XXX」ということで発表させていただきます。mizchiです。よろしくお願いします。 （会場拍手） ちょっと自己紹介とかはする気ないんですけど、最近本を書いたので、その紹介だけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Service Worker(PWA)でRangeリクエストに対応する - Qiita
Workbox Broadcast Cache Update | Workbox | Google Developers
Firebase: change the location of the service worker
ServiceWorker Side XXX