【PWA】「ホーム画面に追加」の「Site cannot be installed: the page does not work offline」エラー対策
結論：serviceWorker用のJSファイルに「self.addEventListener('fetch', function(event) {});」と追記すれば直る。 自作のWebアプリで「ホーム画面に追加」機能を加えようと以下を用意しました。 manifest.json seviceWorker.js（空のファイル） HTMLのヘッダーで上記「manifest.json」を読み込むようにして、HTMLのフッターには以下のJSを追記。 window.addEventListener('load', function() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register("/serviceWorker.js") .then(function(registration) { console.lo
Modules | Chrome for Developers
Dig deeper into specific Workbox modules and browse their API reference to get information on available methods. Service Worker Packages workbox-background-sync Use background sync to reliably make a network request even if the user is offline. workbox-broadcast-update Send messages to pages when a cache is updated with a new response. workbox-cacheable-response Restrict which requests are cached
ServiceWorkerを簡単に書けるworkbox-swの使い方 - Qiita
GMOペパボ Advent Calendar 2017の11日分のエントリーになります。 皆さんはPWA(Progressive Web Apps)をご存知でしょうか。 分かりやすさを優先して言うならば、新しい技術によってネイティブアプリのような動作が可能になったWebアプリケーションのことで、オフラインで動作したりプッシュ通知が送れるWebアプリケーションを実現することができます。 （詳細はGoogle Developersや私の発表スライドをご参照ください） さて今回はPWA作成にあたってとても便利なライブラリであるworkbox-sw（以下、workbox）の紹介記事となります。 workboxとは簡単な記述で最適なServiceWorkerのコードを生成してくれるライブラリです。 PWA自体どうやらまだ認知度が低く、それを作るためのライブラリ関連もまた情報不足だったため今回の記事を
Introduction to Service Worker: How to use Service Worker - HTML5 Rocks
Service Worker は非常に有用ですが 使い始めたばかりでは使いこなせませんWorkbox により、Service Worker が使いやすくなります。ただし、Service Worker は難しい問題を解決します。そのため、そのテクノロジーを抽象化するのは、理解していないと難しい作業になります。そのため、最初の数枚のドキュメントでは、Workbox の詳細に入る前に、その基盤となるテクノロジーについて説明します。 実行中の Service Worker のリストを表示するには、アドレスバーに「chrome://serviceworker-internals/」と入力します。 Service Worker には何の機能がありますか。 Service Worker は、ウェブブラウザとウェブサーバー間のプロキシとして機能する特殊な JavaScript アセットです。オフライン ア
Service Worker のライフサイクル | Articles | web.dev
Service Worker のライフサイクル コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Service Worker のライフサイクルは、最も複雑な部分です。その目的やメリットがわからなければ、戦闘を仕掛けてくるかもしれません。しかし、その仕組みを理解すれば、ウェブ パターンとネイティブ パターンの長所を組み合わせて、シームレスで邪魔にならないアップデートをユーザーに配信できます。 ここでは詳細を説明しますが、各セクションの始めに、知っておくべきことのほとんどを箇条書きで示します。 インテント ライフサイクルの目的は次のとおりです。 オフラインファーストを可能にする 現在の Service Worker に影響を与えることなく、新しい Service Worker が準備を整えられるようにします。 スコープ内のページが、全体にわたって同じ Serv
サービスワーカー API - Web API | MDN
サービスワーカーは、基本的にウェブアプリケーション、ブラウザー、そして（もし繋がっていれば）ネットワークの間に介在するプロキシサーバーのように振る舞います。これは、よりよいオフラインの操作性を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバー上にある資産を更新したりします。また、プッシュ通知やバックグラウンド同期の API 群へのアクセスもできるようになります。 サービスワーカーは、あるオリジンとパスに対して登録されたイベント駆動型のワーカーです。 JavaScript ファイルの形を取り、ナビゲーションやリソースへのリクエストを横取りや改変したり細かい粒度でリソースをキャッシュすることで関連付けられたウェブページやサイトを制御し、それぞれの状況（もっとも顕著な例は、ネットワークが利用できないとき）にアプリ
サービスワーカーの使用 - Web API | MDN
この記事はサービスワーカーを使い始めるための情報を提供するページです。基本的な構造、サービスワーカーの登録、新しいサービスワーカーのインストールと有効化のプロセス、サービスワーカーの更新、キャッシュやレスポンスの操作を含めた、オフラインで動作するシンプルなアプリケーションの機能についてです。 ウェブユーザーが長年苦しめられてきた主要な問題の一つは、接続を失うことです。世界中の最高のウェブアプリは、ダウンロードできないときの使い勝手が最悪でした。これまでにも、この問題を解決するための技術を生み出す試みはさまざまに行われ、いくつかの問題は解決されてきました。しかし、一番の問題は、資産のキャッシュとカスタムネットワークリクエストのための優れた全体的な制御メカニズムが存在しなかったことです。 このような課題を修正したのがサービスワーカーです。サービスワーカーを使用すると、キャッシュ資産を最初に使用
Progressive Web Apps with React.js: Part 3 — Offline support and network resilience
We can accomplish this using service worker. A service worker is a background worker that acts as a programmable proxy, allowing us to control what happens on a request-by-request basis. We can use it to make (parts of, or even entire) React apps work offline. You’re in control of how much of your UX is available offline. You can offline-cache just the application shell, all of the data (like Reac
Progressive Web Apps with Webpack - Michal Zalecki
software development, testing, JavaScript, TypeScript, Node.js, React, and other stuff My first offline web app heavily depended on AppCache and it was painful experience. Don’t get me wrong, AppCache initially blow my mind, in a positive sense. Web App without a web? In the browser? Sounds awesome, isn’t it? My further experiments with AppCache convinced me that unfortunately it’s not the path I’
Debugging Service Workers
プログレッシブ ウェブアプリ: オフライン コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 1. ようこそ このラボでは、既存のウェブ アプリケーションをオフラインで使用できるようにします。これは、プログレッシブ ウェブアプリ ワークショップの一連のコンパニオン Codelab の最初です。このシリーズにはさらに 7 つの Codelab があります。 学習内容 Service Worker を手動で作成する 既存のウェブ アプリケーションに Service Worker を追加する Service Worker と Cache Storage API を使用してリソースをオフラインで使用できるようにする 必要な予備知識 簡易 HTML と JavaScript 必要なもの Service Worker をサポートするブラウザ 2. 準備 まず、この Co
Service Worker周りの知識をアップデートする（2017年クリスマス版） - Qiita
PLAID Advent Calendar 2017 23日目。 プレイド @otolabです。イブイブですね（古い）。 面白くて新しい技術はどんどん変化していきます。検索していてもなかなかうまい具合に情報に当たらない。せっかくみつけても情報が古いなんてことはザラ。 というわけで、今回はService Workerに関する最近の動きをまとめ、知識のアップデートを試みます。 前作「従来のWebアプリの常識を変える! Service WorkerがもたらすWebの未来」を2016年の中頃に書いているので、そこからの差分をざっくりと紹介したいと思います。 Service Workerとは？ まずは「とは？」から。 Service Workerとは、Web Workerの一種で、ブラウザで表示しているページ内のスクリプトとは独立して動くスクリプトです。必要に応じてサイトごとに見えないタブが開くイメ
Using a Service Worker with Next.js
I recently relaunched the website for the charity Build A School In Kenya and decided to build it using Next.js and deploy using Now. Next.js is a fantastic framework from the team at Zeit — a US based company working on a cloud platform targeting the JavaScript/Node ecosystem. One of the benefits of Next.js is the focus on universal rendering to maximise perceived performance for web applications
iOSのSafariでPWAがいよいよ動くようになった、iOS 11.3ベータ版がService Workerを本格的にサポート開始
[レベル: 上級] iOS の Safari で PWA (Progressive Web Apps: プログレッシブ ウェブ アプリ) がいよいよ稼働し始めました。 iOS 11.3 ベータ版に搭載の Safari 11.1 で PWA の一部機能が動く iOS が Service Worker をサポートする可能性が浮上したのが昨年の夏でした。 年末には開発版 Safari で Service Worker がデフォルトで有効になりました。 とはいえ、PWA の何らかの機能が実質的に動くようになったわけではありません。 しかしながら、iOS 11.3 ベータ版に搭載されている Safari 11.1 で PWA の一部機能がついに動くようになりました。 AppleのSafariのエンジニア、Ricky Mondello（リッキー・モンデッロ）氏が明らかにしています。 iOS 11.3
Release Notes for Safari Technology Preview 46
Safari Technology Preview Release 46 is now available for download for macOS Sierra and macOS High Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 225266-225841. Service Workers Offline applications are important to the web. After HTML5 first tried to accommodate them with the Offline Applica
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Service worker: discover the next web game changer
Open Ecosystem
https://blog.mismithportfolio.com/web/sw-offline
GitHub - goldhand/sw-precache-webpack-plugin: Webpack plugin that generates a service worker using sw-precache that will cache webpack's bundles' emitted assets. You can optionally pass sw-precache configuration options to webpack through this plugin.
next.js/examples/with-sw-precache at canary · vercel/next.js
Service workers and iOS / Safari