iOS(16.4+)を含むブラウザでWeb Push機能を実装したメモ
はじめに 2023年3月末にiOS 16.4がリリースされたことで、ついにすべてのモダンブラウザユーザーに対してWeb Pushを送れるようになりました。 本記事は、筆者が個人開発しているWebサービスでWeb Push機能を実装したときに調べたことや行ったことをメモとして残すものです。Web Push機能の実装を検討されている方の参考になりましたら幸いです。 なお、筆者は外部サービスへの依存をなるべく減らしたかったため、FCMなどのプッシュ通知機能を提供してくれるものはなるべく使わずに実装したのですが、大変だったので基本的には素直にSaaS等を使った方がよいと思います。 注意事項として、筆者はバックエンドに専門性がありません。そのため、何か間違った記述があるかもしれません。特に暗号化周りは理解が甘い点があると思います。もし誤りを発見された場合は優しめに教えていただけると助かります。よろし
PWAs in app stores | Articles | web.dev
PWAs in app stores Stay organized with collections Save and categorize content based on your preferences. PWAs can be accessed through a web browser, but they can also be installed on a user's home screen as outlined in the articles in the section Provide an installable experience. One of the challenges with PWAs, however, is distributing them to app stores. This is where PWABuilder comes in. PWAB
Web Push for Web Apps on iOS and iPadOS
Today marks the release of iOS and iPadOS 16.4 beta 1, and with it comes support for Web Push and other features for Home Screen web apps. Today also brings the first beta of Safari 16.4. It’s a huge release, packed with over 135 features in WebKit — including RegExp lookbehind assertions, Import Maps, OffscreenCanvas, Media Queries Range Syntax, @property, font-size-adjust, Declarative Shadow DOM
Angular と Firebase で月間 3.5億PV になった PWA の収益性改善とコストカット - Qiita
と、振り返ってみると毎年綺麗に 300% 成長でこれていますね。 （流石に来年はきついと思います＾＾； 今回は、そんな サービスを拡大する上で欠かせない収益の話 と 成長したからこそ表面化したコストの話 をまとめていきたいと思います。 収益の話 参照：https://jp.freepik.com PWA は稼げない 昨年の Advent Calendar にて、私はたいそう嘆いておりました（ＴДＴ） Web 側の広告は MPA（マルチページアプリ）を前提にしているものがほとんど Web 側では広告の表示を最適化できない（MPA 前提の規約上バックグラウンドで読み込んでおけない それに加えて、SPA のページ遷移が早すぎて広告が表示される前に通過してしまう アプリ側にはインタースティシャル広告やリワード広告といった単価の高い広告商材が豊富に存在する そういった要因から、PWA におけるページ
Make your PWA feel more like an app | Articles | web.dev
Make your PWA feel more like an app Stay organized with collections Save and categorize content based on your preferences. Make your Progressive Web App not feel like a website, but like a "real" app When you play Progressive Web App buzzword bingo, it is a safe bet to set on "PWAs are just websites". Microsoft's PWA documentation agrees, we say it on this very site, and even PWA nominators France
Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話 - Qiita
Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話Vue.jsWebサービスバーコード個人開発Nuxt Nuxt.jsで開発しているWebサービスにバーコードリーダ機能をつけようとしたら、 いろいろハマったので、そのときの備忘録。 利用したのはQuaggaJS。簡単に使えて便利(´ω｀) はまったポイントは、以下の4点... 1. httpsじゃないとカメラを取得できない 2. QuaggaJSで表示されてないHTML要素を指定するとエラー 3. size/width/heightを指定してもいい感じにならない 4. iOSのPWAではカメラにアクセスできない いろいろハマったけど、QuaggaJS自体がすごく良いので、サクッとできた♪ 作ったのはこんな感じ バーコードリーダ、できてきた♪ いい感じな気がする(´ω｀) pic.t
PWAでカメラを使うためiOSとAndroidで異なるmanifestを読み込む - Qiita
TL;DR ・iOSのPWAでは表示モードがstandaloneの場合にカメラを開くことができない。 ・Androidでの起動時にはstandalone、iOSではbrowserで起動する。 ・ページアクセス時にuserAgentからOSを判定し、OSに応じて異なるmanifestを読み込む。 カメラを開く最小限のPWA構成 ファイル構成は下記の通りです。 icon.pngは適当な192x192の画像を用意してください。 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="manifest.json"> <link rel="apple-touch-icon" href="ico
やっていこう。PWA - Qiita
2015年にPWAが提唱されてから3年以上が過ぎました。 2015年6月に公開された「Progressive Web Apps: Escaping Tabs Without Losing Our Soul」に Progressive Web Apps の初期のコンセプトが書かれています。 記事中には、PWAによって「deliver an even better user experience (さらに優れたユーザーエクスペリエンスを実現)」 と書かれている通り、様々なWebの技術により、最近のWebサイトはとてもUXが良くなってきました。これもじっくりと期間をかけて、様々な技術者がPWAを取り組んでいっているからだと思います。 そして2015年11月に開催された「Chrome Dev Summit 2015」のキーノートで発表されてPWAは話題になりました。 この動きは今後も継続していくこ
PWA Starter Kit - PWAを学ぶためのテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWA（Progressive Web Apps）というキーワードがトレンドになっています。しかしPWAは特定の技術を指すのではなく、Webでの体験をよりネイティブ並に向上させるという概念でしかありません。そのため何から取り組んだら良いかが分かりづらいです。 そこで勉強のベースに使ってみたいのがPWA Starter Kitです。PWAに関する要素が盛り込まれたテンプレートです。 PWA Starter Kitの使い方 こちらがテンプレートです。 カウンター。これは再読み込みすると消えてしまいます。 ショッピングカート。 マニフェストファイルもきちんと設定されています。 PWA Starter KitではPWAとして必要になる要素（レスポンシブ、SPA、アプリマニフェスト）などの要
Chrome 73 で Desktop PWA Support & mdbuf アップデート - mizchi's blog
developers.google.com Signed HTTP Exchange もですが、個人的に待望だった Desktop PWA が正式リリース。 PWAアプリをウェブアプリのように振る舞わせることができます。 例えば mdbuf を開いて、「mdbuf をインストール」を選択すると… モーダルが出て Win/Mac のアプリのように立ち上がります mdbuf について https://mdbuf.netlify.com サンプルで紹介しましたが、これは僕が作ってる markdown のプレビューツール です。 amachang さんや結城浩先生へのインタビュー、その他このブログの記事、各種書籍への原稿も全部これで書いています。 mdbuf v1.0.0: 最高の Mardkown Preview を目指して - mizchi's blog この時点からさらに自分で使い込みながら
Progressive Web App Progress in iOS 12.2 Beta 1 (Build 16E5181f)
As a regular (and passionate) iOS user with a strong belief in the Web, I beta-test any and all new iOS builds as soon as I can get my hands on them. My main motivation is to see how they do when it comes to Progressive Web App features. Each new iOS version comes with a new version of Safari, yet changes in Safari tend to almost never get highlighted in the iOS release notes (and the 12.2 beta 1
大量のテキストを食っても速い Markdown Editor 作った - mizchi's blog
もう人生で何個目かわからない markdown エディタ作った。が、今回のは結構気に入っている。 https://markdown-buffer.netlify.com/ で遊べる。 用途としては、GitHub か Qiita か はてなブログかわからないが、なにか書こうと思ったときに、どのサービスも中途半端に重いので、とりあえずのバッファが必要、という感じで作った。なので速度重視。 ブラウザのストレージで永続化してる。オフラインで動く。できるだけエディタとしてはスコープを大きくせず、単に編集バッファ(textarea)でしかない、というのを意識している。 結構頑張って作り込んでしまった https://nedi.app が色々肥大化してしまっていて入力時にラグを感じるので、編集体験を見つめ直す自戒もある。 機能 数式対応 コードハイライト対応 バックグラウンドで自動保存 改行を br に
iOSでPWAとして起動されたときにLocalStorageに保存したtokenを利用してオートログインさせる - Qiita
背景 iOS(11.3時点)のPWAではCookieが起動ごとに初期化され、Session(Cookie)を利用したログイン状態の保持ができません。追加調査でLocalStorageについては初期化されないことがわかったため、LocalStorageを利用したオートログインの実現について実験しました 来週開催されるWWDCやiOS12で解消されるのを切に願ってます😭 過去の調査内容 【調査】WEBアプリをPWAとして起動した場合にブラウザのCookieが引き継がれるか確認する - Qiita 【調査】WEBアプリをPWAとして起動した場合にブラウザのlocalStorageが引き継がれるか確認する - Qiita サンプルアプリ 調査のために作成したサンプルアプリは今後もiOS, Androidバージョンアップ時に利用する可能性がありそうなためHerokuで公開しておきました。（無料プラ
iOSの11.3からのPWA対応でできるようになったこと
With iOS 11.3, Apple has silently added support for the basic set of new technologies behind the idea of “Progressive… 今回のiOSのアップデートでService Workerが使えるようになったのはSafariブラウザのみでWeb Viewを使っているFirefox、Chrome、Fabookのアプリ内ブラウザではService Workerは動作しません。 Twitterのアプリ内ブラウザはSafari View Controllerを使っているのでService Workerが動作します。 iOSのPWAでできること (iOS 11.3以前から使えるものも入っています) 位置情報方位磁石、速度メーター、ジャイロスコープなどのセンサーカメラ音声出力スピーチ音声合成App
【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自体どうやらまだ認知度が低く、それを作るためのライブラリ関連もまた情報不足だったため今回の記事を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js by Vercel - The React Framework
Next.js を使って Chrome からインストール可能な PWA(desktop PWA) 環境を2秒で作ります(ついでに now で remote でも動かせるようにします) - Qiita
NOT SO BADなブログ
