ServiceWorkerの落とし穴8選 - Repro Tech Blog
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
「SPAのタブ永遠に開きっぱなし問題」を更新ボタンを設置せず解決した - 橋本商会
こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon Helpfeel Advent Calendar 2022の5日目の記事です 昨日はHelpfeelエンジニアのyado.iconさんでした 採用面接中にチャーハン・ピラフ判定器とスタバ警察botで盛り上がる会社に入った | 株式会社Helpfeel ヨコハマハウスフラペチーノがエンジニア採用の役にたった？みたいで良かったです <a>タグの挙動を工夫する事で、Scrapboxからみたいなボタンをなくしました 更新ボタンの役割は2つ 更新がある事を教える 押すとアプリが更新される Scrapboxも昔こういうメニューがあった 今はもう無い では解説ですshokai.icon SPAのタブ永遠に開きっぱなし問題とは？ SPAとstaticなwebサイトの違い static
Service Workerとブラウザでの通知について
Ehime.js #4の資料です。 https://ehimejs.connpass.com/event/162348/
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,
ServiceWorkerのBackground Syncでオンライン復帰時にデータ送信 - Qiita
はじめに 2016年3月にリリースされたChrome 49からBackground Syncという新しい機能を使えるようになった。この機能を使うと、オフライン時に送信しようとしたデータを、その後ブラウザが閉じられたとしても、オンラインに復帰した際に自動的に送信することができる。そこで、LocChat.comというチャットサイトでこの機能を試してみた。 左のAndroidの画面で、機内モードに設定後、送信ボタンを押し、ブラウザを終了後、機内モードをオフにすると、右のPCのブラウザにチャットが届いている。 Background Syncの使い方 ServiceWorkerの登録 まず、Background SyncはServiceWorkerを使うので、下記のコードでServiceWorkerを登録する。 navigator.serviceWorker.register('./sw.js',
AngularでPWAを進める
AngularでPWAを進める 2018/06/16 ng-japan ToshiyaTanaka(TeaTwo)
PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット ネイティブアプリに近い体験を簡単に提供できるとして注目を集めている「PWA」。実際に導入し、表示速度が2倍になったという日経新聞電子版の開発者に「PWA」のメリットとデメリットを伺いました。 PWA（Progressive Web Apps）は本当に「アリ」なのか――？ ネイティブアプリの開発にはWebとは異なる専門知識が必要であり、またAndroidやiOSなどOSごとでも異なるため、リソースが膨大にかかるという課題があります。そこで昨今は、XamarinやReact Nativeなどのクロスプラットフォーム開発ツールを使い、ネイティブアプリやWebの開発を一本化しようという動きが活発になっています。 一方で、ネイティブアプリに近い体験を簡単に提供できるとして注目を集めているのが、Goog
Service Worker スクリプトのインストールと更新処理
Service Worker の実装が主要ブラウザで揃い始めて盛り上がってきましたね。その流れに便乗して久しぶりに Service Worker の仕様や実装に関する記事を書いてみました。今回は Service Worker スクリプトのインストールと更新処理についてです。 この記事は Service Worker スクリプトを少しでも手書きして動かしたことがある人を想定読者にしています。Service Worker について全く知らない人はまず別の入門記事を参照してください。また、細かいことを気にせずに Service Worker を使いたい人は Workbox といったライブラリやフレームワークの利用をおすすめします。 更新履歴 2019/09/24: Chrome 78 から importScripts() も更新対象になりました。それについて加筆しました。 2018/06/07:
Angular CLI 1.5によるAngular Service Workerクイックスタート
この記事では、Angular v5でリリースされた新しい @angular/service-worker（Angular Service Worker）を、Angular CLI v1.5のプロジェクトに導入するクイックスタートを紹介します。Angular Service Workerについての包括的な解説についてはMaxim Salnikov氏が投稿した以下の記事を参考にしてください。 A new Angular Service Worker — creating automatic progressive web apps . Part 1: theoryA new Angular Service Worker — creating automatic progressive web apps. Part 2: practiceこの記事は以下の動作環境を対象としています。 _ _ __
“モダン”ウェブアプリケーション 〜アメブロ5ヶ年計画〜
HTML5 Conference 2017.9.24 1. “モダン”ウェブアプリケーション ∼アメブロ5ヶ年計画∼ HTML5 Conference 2017.9.24 原 一成 @herablog 2. アメーバブログ 2004年開始のブログサービス 芸能人の利用が多い 芸能人以外とそれ以外のPVは半々 3. 2015 バックエンドシステムの刷新 2017 2016 Isomorphic JavaScript AMP https Code-splitting Node.js v8 React 16 PWA 4. 5年かけて“モダン”な状態にする 5. “モダン”であること エコシステムとつながっていること 6. “モダン”であること エコシステムからの恩恵 エンジニアの流動性 ! " 7. エコシステムからの恩恵 最新技術を取り込みやすい 世界中のエンジニアと協力できる ! 8. エン
PWAとAMPのイイとこ取りを実現するPWAMPとは？さらに優れたモバイルUXを提供可能に
[レベル: 上級] 先週投稿したプログレッシブ ウェブ アプリ（以下、PWA）の記事で、「AMPよりもPWAに注目したい」と個人的な思いに触れました。 ところが、PWAとAMPの対立軸を作ったように思わせてしまったかもしれません。 しかし、PWAとAMPは排他的な技術では決してありません。 それどころか、両者を組み合わせることによってさらに優れたモバイルユーザー体験を提供できます。 そこでこの記事では、PWAとAMPを組み合わせる、通称”PWAMP”について解説します。 AMPとPWAを連携する3つのパターン GoogleのAMPチームに所属している Paul Bakaus（ポール・バカウス）氏は、AMPとPWAを組み合わせるパターンとして、次の3つの形態をSmashing Magazineの記事で紹介しています。 AMP as PWA AMP to PWA AMP in PWA それぞれ
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularのPWA（Progressive Web Apps）機能でアプリのようなWebページを作成
TechFeed 10.2 リリース！ServiceWorkerによるオフラインキャッシュ化で起動が爆速化！