Service Worker の Background Fetch によるメディアのキャッシュ | blog.jxck.io
Intro Podcast を PWA 対応するために、待望だった機能の 1 つが Background Fetch だ。 これにより、通常 Range Request で取得するような、大きなファイルを事前にダウンロードしておくことができるようになる。 この API と、 Service Worker およびブラウザにおける Range Request/Partial Response の扱いについて記す。 background fetch Podcast は大きな音声ファイルがメインコンテンツとなる。 PWA のキャッシュ戦略典型例としては install 時に全てキャッシュする request 発生時にキャッシュする といった方法がある。 しかし、この方法は一般的な Podcast としては少し使いにくい。 install 時に全てのファイルをキャッシするのは現実的ではない requ
Service worker が拓く mobile web の新しいかたち
This document discusses using Rails as a backend for front (BFF) layer in a microservices architecture. It describes how Rails was used to build the BFF layer for an e-commerce site called HPB, acting as an API gateway between the client and various backend services. Key points discussed include using Puma to improve throughput, caching APIs to reduce response time, and implementing an API gateway
ServiceWorker のスコープとページコントロールについて
Chrome 40 から ServiceWorker が使えるようになりました。Opera もバージョン 27 から対応し、Firefox でも現在実装が進められています (参考「Is ServiceWorker ready?」)。ServiceWorker はページのライフタイムとは独立した JavaScript の実行コンテキストを提供する機能で、ページからのリクエストをフックしてキャッシュからレスポンスを返したり、サーバからのプッシュイベントを受けてそれをページに通知するといったことが可能になります。 ServiceWorker のコンセプトや基本的な使い方、ユースケースなどは下記のページが参考になります。 Service worker が拓く mobile web の新しいかたち Service Worker の紹介: Service Worker の使い方 - HTML5 Ro
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
進化する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では、「ネイティブアプリと同じことができる」「ネイティブアプリを置き換える」など、期待に胸を膨らませずにいられない浪漫に満ちた噂がありますが、それが本当かどうか記事
Beyond SPAs - alternative architectures for your PWA | Blog | Chrome for Developers
Let's talk about... architecture? I'm going to cover an important, but potentially misunderstood topic: The architecture that you use for your web app, and specifically, how your architectural decisions come into play when you're building a progressive web app. "Architecture" can sound vague, and it may not be immediately clear why this matters. Well, one way to think about architecture is to ask
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
Service Worker スクリプトのインストールと更新処理
Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:
Service Workers: Going beyond the page
We’re thrilled to announce that today’s Windows Insider build enables Service Workers by default in Microsoft Edge for the first time. This is an exciting milestone for us and for the web! These new APIs allow the web to offer better experiences when devices are offline or have limited connectivity, and to send push notifications even when the page or browser isn’t open. This milestone also establ
超速! Webページ速度改善ガイドの出版に寄せて
超速! Webページ速度改善ガイドの出版に寄せて 事前に各所で告知していた通り、この度 超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる という共著の書籍が、技術評論社より出版されます。名前の通り Web サイトを高速化する知識を得るための本です。 本書の概要 技術評論社の Web サイトの通りですが、目次は次のようになってます。 まず1章で Web パフォーマンスとはなんなのかを、ビジネスへの影響やユーザー環境の多岐化、高度化する Web 技術などの観点で解説します。2章以降では、Web パフォーマンスをネットワーク、レンダリング、スクリプトといった技術要素に分解し、それぞれの基礎知識を抑えつつケーススタディを学んでいきます。また、8章では画像全般（画像フォーマット、最適化方法、レスポンシブなロードなど）について、9章ではネットワーク周辺の新たな技術（Servic
リニューアルした日経電子版が高速すぎてヤバイ件｜こんぴゅ
日本経済新聞は国内を代表する経済誌だ。その電子版はwebでの継続課金を大成功させ、いまや50万以上の有料会員を擁するモンスターサイトだ。 その日経電子版が11月6日に全面リニューアルしたのだが、公開後、web業界がにわかにざわついた。表示速度が爆速だったのだ。日経公式もモバイルで2倍の表示速度を達成したと堂々と宣言していた。 webサービスは継続率こそ神KPIで、その継続率には速度が大きく影響する。 これはチェキらないとヤバイと感じ、友人のkitakさんとスピードの秘密を調査してみた。 Fastlyをコンテンツキャッシュに使う殆どのデータはFastlyを経由して取得されていた。Fastlyは最近注目を集めているCDN（世界中にエッジサーバーを配置し、高速にコンテンツを配信するサービス）で、非常に高機能でユニークなサービスだ。 一般に、CDNはいったん世界中にコンテンツをばらまくと、それを無
sw-precacheでお手軽にオフラインWebアプリケーションを作る | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近、プログレッシブWebアプリ（Progressive Web Apps、PWA）に興味津々なフロントエンドエンジニア、いなばです。 今回は、オフラインWebをまずは自分で実際に手を動かしてやってみよう！ と調べていたところ、sw-precache というモジュールで、リソースのキャッシュ制御がとても簡単にできたのでご紹介したいと思います。 まずは簡単に使ってみる まずはシンプルな構成で試してみました。 ソースコードはこちらになります。 https://github.com/i78s/sandbox/tree/develop/sw-precache-sample 手っ取り早くデモを確認したい場合は、 下記のコマンドを実行してService Workerに対応しているブラウザ( ここで確認できます )で実際の動作を見ることができます。 $ git clone https://github.
攻撃者視点で見る Service Worker / PWA Study SW
PWA Study( https://web-study.connpass.com/event/65267/ ) で発表した資料です。
The offline cookbook
Update: Together with Udacity I created a free offline-first interactive course. It involves taking an online-only site to full offline-first glory. Many of the patterns in this article are used. When AppCache arrived on the scene it gave us a couple of patterns to make content work offline. If those were the patterns you needed, congratulations, you won the AppCache lottery (the jackpot remains u
ServiceWorker Cookbook
Introduction Igrice za decu od 3 do 103 godine. Nove online friv igrice, mobilne za telefon. The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web sites. Tip: Open your Developer Tools console to view fetch events and informative messages about what each recipe's service worker is doing! Attribution The Service Worker Cookbook was created
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build a PWA using Workbox
Two HTTP headers related to Service Workers you never may have heard of
GraphQLの
オフライン対応した話
Service Worker Lifecycle
GitHub - zackargyle/service-workers: A collection of utilities for creating/testing/experimenting with service workers.
