【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
workbox-swの使い方 GMOペパボ Advent Calendar 2017の11日分のエントリーになります。 皆さんはPWA(Progressive Web Apps)をご存知でしょうか。 分かりやすさを優先して言うならば、新しい技術によってネイティブアプリのような動作が可能になったWebアプリケーションのことで、オフラインで動作したりプッシュ通知が送れるWebアプリケーションを実現することができます。 （詳細はGoogle Developersや私の発表スライドをご参照ください） さて今回はPWA作成にあたってとても便利なライブラリであるworkbox-sw（以下、workbox）の紹介記事となります。 workboxとは簡単な記述で最適なServiceWorkerのコードを生成してくれるライブラリです。 PWA自体どうやらまだ認知度が低く、それを作るためのライブラリ関連もまた
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’
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
攻撃者視点で見る Service Worker / PWA Study SW
PWA Study( https://web-study.connpass.com/event/65267/ ) で発表した資料です。
PWAの実装をしてみた - 技術探し
一年以上前の記事なので、コードが古いです。気をつけて読んでください。 PWAとは？ 目的 技術スタック Service Worker PWAのview App Shell Content キャッシュ戦略 読み込みフロー Web App Manifest デザイン FirefoxとChromeしかService Workerないけどどうするの？ ネットワーク 実装 ライブラリ webpack-offline 構成 ファイル ルーティング アセットのインストール API周り SSR 資料 さいごに そういえばPWAの実装したことがなかったなと思ったので少し触ってみた。 PWAとは？ PWA(Progressive Web Apps) インストールが不要で、不安定なネットワークでも素早く起動し、プッシュ通知を可能にします。 また、ホーム画面にアイコンも表示でき、アプリと同様の扱いをすることが可能
PWA（Progressive Web Apps／プログレッシブ ウェブ アプリ）でpush通知するための手順 - Qiita
最近巷で話題になっているPWAことProgressive Web Apps（プログレッシブ ウェブ アプリ） 今回は、PWAでpush通知をするための手順を記載します。 まずはPWAとはなにか？ 以下、Googleの公式サイトからの引用です。 [引用] https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/?hl=ja プログレッシブ ウェブアプリはウェブとアプリの両方の利点を兼ね備えたアプリです。ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコ
サンプルコードで学ぶPWA - Qiita
はじめに Google I/O 2017の動画を確認し、そろそろPWAについて真面目に把握していかなければと思い至り、GitHubからいくつかサンプルプログラムを探してきて触ってみたので基本的な技術情報と合わせてまとめました。なのでPWA初心者向けです。 特定のJSフレームワークを扱う専門のエンジニアでない限り（私自身がそうなので）、それぞれのJSフレームワークの対応状況なども気になるところだと思いますので、 React.js , Angular , Vue.js の3つにおけるPWAのサンプルについても調べました。 確認した手順などを含めて要点だけまとめていますが、詳細はそれぞれのGitHubページを参照しつつcloneして触ってみて頂ければと思います。 シンプル構成 まずはJSフレームワークなどが入っていないシンプルな構成で、PWAの仕組みについてざっくりまとめました。 PWA ret
いまさら聞けないPWAとAMP - Qiita
概要 PWA = モバイルのWEBページでネイティブアプリのようなUXを提供するためのもの ※ 2020/04/05 追記: PWAに関する仕様の策定当初はモバイルでのユースケースが主だったと記憶していますが、PWAはモバイルに限定されたものではなく、実際にデスクトップでの活用例も増えています。参考: PWAs: building bridges to mobile, desktop, and native (Google I/O '18) AMP = モバイルのWEBページを高速化するためのもの どちらもGoogleが主軸となって策定されている、モバイルページを進化させるためのプロジェクトおよび技術。ネイティブアプリの代替技術ではなく、ブラウザAPIの進化によってネイティブアプリのようなUXをウェブページで提供することが主眼。 1. PWAとは Progressive Web Appsの
Web App Install Banners | Web Fundamentals | Google Developers
独自のアプリ内インストール エクスペリエンスを提供する方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 多くのブラウザでは、ユーザー インターフェース内でプログレッシブ ウェブアプリ（PWA）のインストールを有効にして宣伝できます。インストール（以前は「ホーム画面に追加」と呼ばれていた）では、ユーザーがモバイル デバイスまたはパソコンに PWA をインストールできます。PWA をインストールすると、ユーザーのラウンダーに追加され、他のインストール済みアプリと同様に実行できるようになります。 ブラウザ提供のインストール エクスペリエンスに加えて、アプリ内で独自のカスタム インストール フローを直接提供できます。 Spotify PWA に表示される [アプリをインストール] ボタン。 インストールを促進するかどうかを検討する際は、ユーザーが PWA を通
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
