Workboxで画像をランタイムでキャッシュする - console.lealog();
アクセスするとメガ単位でたくさんの画像を読み込むサービスがありまして・・。 リファクタによって、動的に必要な画像だけを読み込むように改修はしたけど、それでも回遊するとサイズがすごいことになる。 これをなんとかするならServiceWorkerしかない！というわけで。 Workbox 最初は0から手書きしようかと思ったけど、ちょっとやり始めただけであれこれ面倒なことがわかったので、先人に頼ることにした。 Workbox | Google Developers ご丁寧に、こういうことがやりたいんじゃろ？っていうのがガイドの中にあって、そうそうこれこれ〜って感じだった。 事前キャッシュではなく、あくまでランタイムでのキャッシュがしたかったので、これ。 import { CacheableResponsePlugin } from "workbox-cacheable-response"; i
Service Workerが更新されたことを通知する更新ダイアログを出すライブラリを書いた
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
Webでどこまで遊べるか試してみた - Qiita
Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓（スマートフォンで開いてください） https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、 ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,
Service Worker の Navigation Preload による表示遅延回避 | blog.jxck.io
Intro Service Worker で Fetch を Proxy する場合、 Fetch 発生時に SW が起動していなければ、その起動を待つ必要が出る。 そして、この SW の起動には無視できない時間がかかる場合があった。 これを改善する Navigation Preload について解説する。 SW Bootup SW が onfetch をハンドルし、キャッシュから Response を返す場合は、ネットワーク I/O をせずに画面をレンダリングできる。 しかし、 SW が onfetch をフックしていてもなお、実際にネットワークにリクエストを投げる場合は少なくない。 この場合、もしページのコントローラとなっている SW が起動していない場合は、 onfetch ハンドラを実行するために、 SW の起動を待つ必要が出てくる。 SW の起動には、もちろん実行環境によるところが
FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog
You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で
Introduction to Service Worker: How to use Service Worker - HTML5 Rocks
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
