タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
一休.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
GitHub - shadowwalker/next-pwa: Zero config PWA plugin for Next.js, with workbox 🧰
This plugin is powered by workbox and other good stuff. 👋 Share your awesome PWA project 👉 here Features 0️⃣ Zero config for registering and generating service worker ✨ Optimized precache and runtime cache 💯 Maximize lighthouse score 🎈 Easy to understand examples 📴 Completely offline support with fallbacks example 🆕 📦 Use workbox and workbox-window v6 🍪 Work with cookies out of the box 🔉
アクセスするとメガ単位でたくさんの画像を読み込むサービスがありまして・・。 リファクタによって、動的に必要な画像だけを読み込むように改修はしたけど、それでも回遊するとサイズがすごいことになる。 これをなんとかするならServiceWorkerしかない！というわけで。 Workbox 最初は0から手書きしようかと思ったけど、ちょっとやり始めただけであれこれ面倒なことがわかったので、先人に頼ることにした。 Workbox | Google Developers ご丁寧に、こういうことがやりたいんじゃろ？っていうのがガイドの中にあって、そうそうこれこれ〜って感じだった。 事前キャッシュではなく、あくまでランタイムでのキャッシュがしたかったので、これ。 import { CacheableResponsePlugin } from "workbox-cacheable-response"; i
昨今の世界的な情勢を受けて、GoogleはWebサイトが常に利用可能であるためのガイダンスを公開しました。「Availability, reliability, resilience, and stability」のセクションでは主にファイルの配信について書かれており、サイトへのトラフィックが増えることによって起こりうる問題に備えるための手法を見ることができます。そのうちの1つがService Workerを利用してオフライン対応をすることです。オフライン対応をするには必要なファイルを適切にキャッシュすることが求められますが、Googleはその手段の1つとしてWorkboxの利用を推奨しています。 Workboxとは WorkboxとはService Workerを手軽に扱うためのツールキットです。BackgroundSyncやGoogle Analytics用のモジュールが多数用意されて
目標：ServiceWorkerにキャッシュを保持して、とりあえずオフラインでも表示できるようにする。 PWAやってみたい ページスピードあげたい はじめに そもそもサービスワーカーって何!?という方はこちらの記事が分かりやすかったです。 参考：Service Workerってなんなのよ (Service Workerのえほん) 実装するにあたりWorkboxというGoogleのライブラリを使います。PWAのライブラリというよりはサービスワーカーの設定が簡単にできるライブラリという認識です。（※そのためホーム画面追加やプッシュ通知はこのライブラリには含まれません。多分。） 今回は最も簡単な方法をご説明したいので、GulpやWorkboxCLI等のビルトツールは使いません。キャッシュしたい（オフライン対応させたい）リソースを地道に書いていきます。（別の記事で書きます） Servicework
Workbox + webpackでServiceWorkerのオフラインキャッシュと戯れる - Hivelocity (ハイベロシティ) デジタルでビジネスを最適化
HivelocityでフロントエンドエンジニアをしているHaradaです。 先日PWAのカンファレンスに参加する機会があったので、最近のPWA事情について知識をアップデートしておこうと前から気になっていたWorkboxを使ったデモを作成してみたので、その辺りを少しご紹介したいと思います。 せっかくなので、将来的に自社プロダクトへの実装も視野に入れて、今回はwebpackからWorkboxを使用する構成でトライしてみました。 Workboxとは 普段開発に従事していない人でも、トレンドとしてPWA（Progressive Web Apps）という言葉は聞いたことがあると思います。 端的に言うと、Webサイトでスマホアプリのような機能や動作を実現するための仕組みです。 一般的にPWAの利点として主に以下のようなものが挙げられています。 ホーム画面へのアイコン追加プッシュ通知オフラインでも動作す
JSer.info #516 - Service WorkerライブラリであるWorkbox 6.0.0がリリースされました。 Release Workbox v6.0.0 · GoogleChrome/workbox workbox-webpack-pluginのwebpack 5の対応が含まれています。 大きめな変更としてworkbox-strategiesのStrategy/Pluginの仕組みの変更がされています。 カスタムStrategyを作る場合はStrategyというbase classを継承して書くようになり、これに合わせてライフサイクルメソッドなどが追加されています。 またWorkboxのレシピをライブラリとして利用できるworkbox-recipesパッケージが追加されています。 Workbox Recipes | Google Developers その他には、W
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![デジタル監視が進む欧州の最果て――デジタル化が非人間化を意味するとき | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/05674f98065f38ab581987ac57ffc074ad994ca0/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F10%2FBorder-surveillance-Greece-Header-01.jpg)
![Epic Systems：電子カルテの独占とそれがもたらしたもの | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/167f64ea551272bd834f246d8d43329d83d2e891/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F10%2Fepic-systems.png)
Workboxで画像をランタイムでキャッシュする - console.lealog();
WebpackとWorkboxでらくらくオフライン対応 | フロントエンドBlog | ミツエーリンクス
WorkboxでPWAを導入する方法～オフライン対応編～ - Qiita
2020-12-01のJS: Workbox v6.0.0、TS auto mock、TypeScriptToLua
www.sanfrecce.co.jp
ryukyushimpo.jp
www.kewpie.co.jp
www.recordchina.co.jp
matomedane.jp
bbs.kakaku.com