Push Notifications, WebXR, and better PWA support coming to iOS iOS 15.4 beta has finally added icon support in the manifest, Web Push, AR, and VR experiments. by Maximiliano Firtman Twitter @firt About Newsletter Published 2 years ago (31 Jan 2022) About 8 min reading time #ios #webview #pwa #store Not every minor iOS version update includes changes in the Web platform. Still, iOS 15.4 will be an
2024年2月、Appleは突如欧州連合(EU)でiOSにおけるPWAサポートを廃止しました。AppleのPWAサポート廃止について、EUの規制当局が調査を開始したことが報じられています。 EU seeks to investigate Apple over cutting off web apps https://www.ft.com/content/d2f7328c-5851-4f16-8f8d-93f0098b6adc Apple’s decision to drop iPhone web apps comes under scrutiny in the EU - The Verge https://www.theverge.com/2024/2/26/24083511/apple-eu-investigation-web-app-support 2024年2月、Appleが提供する
昨年書いた以下の記事の2021年バージョンになります。 blog.minakawadaiki.com 結論から書くと年明けに予想していた2021年とは程遠い内容になりましたが、とても面白い年でした。 では、振り返っていきましょう。 私について 普段はBlack Inc.にてエンジニアをしています。詳細な経歴は以下にまとまっています。 minakawadaiki.com また副業でフリーランスをしており、今年は合計で5社ほどの案件を0~1を中心で関わらせていただきました。 どの案件もフロントエンドからバックエンド、インフラ全てに対応するケースが多かったです。 BlackではOOPartsのフロントエンド開発を中心とし、現在は新規プロダクトの開発を行なっています。 6月くらいはutam0kとの縁もあり、youkiのOSS開発にも参加していました。 🤩I've finished the las
はじめに 2023年3月27日に iOS 16.4 が公開され、iPhoneのSafariでもPush通知が利用できるようになりました。 Web Push機能を実装したPWAが iOS 16.4 Safariでどのように動作するか検証したのでまとめます。（動作検証端末：iPhone 13 mini） 目次 Push通知の動作確認 バックグラウンドやスリープ時の動作確認 Push通知にURLを指定した場合の動作確認 まとめ プッシュ通知の動作確認 Web Push機能を持つPWAを用意して、次のようなパターンで動作を検証します。 Safari（ブラウザ上）でPush通知が動作するか ホーム画面に追加したPWAでPush通知が動作するか Push通知の動作確認用のWebページは次に示すような実装をしました。 ホーム画面にインストールする実装 manifest.jsonファイルを作成する Ser
関心が高まりつつあるPWA（Progressive Web Apps）についての技術・情報交換の場である「PWA Night」。Vol.14の今回はUI/UXがテーマです。株式会社テックフィードCEOで、「TechFeed Pro」のプロダクトマネージャーでありUXデザイナーでもある白石俊平氏は、同アプリ開発の経験からUI/UX設計の2つの原則について話しました。 TechFeed ProのUI/UX 白石俊平氏（以下、白石）：始めようと思います。「TechFeed ProのUI/UX」というタイトルでやりたいと思います。 軽く自己紹介すると、株式会社テックフィードというところの社長をやってます。「TechFeed Pro」というプロダクトがあるんですけれども、そのプロダクトマネージャーとかUXデザイナーとかもやっています。なので、ビジネスからUXデザイン……僕、開発者でもあるので、そうい
iOS/iPadOS 16.4リリース 〜ホーム画面に追加したWebアプリ（PWA）からの通知が可能に。またUnicode 15.0の絵文字も追加される 3月27日、iOS/iPadOS 16.4がリリースされた。様々な点が改善されたが、この記事では多くのユーザーにとって身近な話題となる、Webアプリからの通知と、最新の絵文字の追加について紹介する。 ホーム画面に追加したPWAアプリからの通知が可能に Safariのバージョンは16.4に上がっている。 WebKit Features in Safari 16.4 特に興味深い点としては、ホーム画面に追加したWebアプリの（PWA）からの通知（Web Push）が利用可能になったことが挙げられる。これにより一般層へのPWAの普及の目途がたったといえるだろう。実際に普及するかは不明なところがあるが、すでにTwitterやMastodon、Mi
Scalable PWA
Scalable PWA 〜こえのブログ最新事例〜 PWA Night CONFERENCE 2020 https://conf2020.pwanight.jp/
Enjoy the Web
PWA Night CONFERENCE 2022 基調講演のスライドです。 「Enjoy the Web 〜長くWeb開発を楽しむために大事にしていること〜」 Webはその誕生から大きく進化し、プロダクトを作るための技術もトレンドとともに移り変わってきました。同時にプロダクトを作るための役…
React Native for Web + TypeScript + Firebase + PWAを調べたのでまとめておく - gibachan's blog
動機 きっかけはこの記事。ちょっと前にこれを読んで、 「モバイルネイティブアプリに慣れた開発者が、React Native for Webを利用することで手軽にWebアプリ開発できないか？」と思ってたので調べてみました。 iOSについて言えばSwiftUI登場後、宣言的にUIを構築するということが自然となり、Webアプリの各種FW（Reactなど）との距離感が縮まっていること。前述の記事にあるように、ネイティブ開発で馴染みのあるコンポーネントをReact Nativeを経由してWebの世界に持っていけるなら、Webアプリ開発の敷居が下げられるんじゃないかと思って調べてみました。 先に結論 React Native for Webを使って簡単なTODOアプリを作ってみました。 一応Firebase Hostingに置いてPWAとしてモバイルにインストールするところまで試しました。 githu
この記事が気に入ったら、サポートをしてみませんか？ 気軽にクリエイターの支援と、記事のオススメができます！
Introducing Learn HTML Stay organized with collections Save and categorize content based on your preferences. Today we are launching Learn HTML—the next course in our series to help get you up to speed with modern web development. Today we are excited to announce the latest in our series of courses on web.dev. Learn HTML is a brand new course written by Estelle Weyl that will take you through all
この記事はPWA Advent Calendar 2019の1日目の記事です。 以前、PWA Night vol.9 で、Web技術だけで作るQRコードリーダーという内容で紹介したのですが、当日は時間の問題で概要程度だったのでもう少し技術的な詳細を書きます。(当日のスライドはこちら) 作ったもの まずは、実際に見ていただくのがイメージつきやすいと思うので動作しているGIFです。 QRコードを読み込んで結果を表示するというものですが、これがブラウザで動いています。 実際に公開されていますのでよかったら使ってみてください。 サイト：https://simple-qr.netlify.com/ GitHub：https://github.com/KanDai/simple-qr-reader 確認している対応ブラウザは以下です。 Android Chrome Android Firefox iO
PWA Night Conf: ScrapboxでのServiceWorkerとCacheの活用 - daiiz
shokai.icon masui.icon rakusai.icon progfay.icon yutaro.icon takeru.icon tiro.icon
はじめに 昨日今日と JSConf JP 2019 に参加してきたので、聴講したセッションの内容を紹介します。 本記事は Recruit Engineers Advent Calendar 2019 1日目の記事です。 JSConf JP 2019 とは JSConf JP は世界的な JavaScript Conference である JSConf の日本開催です。昨年まで日本Node.jsアソシエーションがNode学園祭として開催していた大規模JavaScript イベントが、Node.js に限らず JavaScript に関する内容のお祭りとして変化を遂げ、今年からJSConf JP となった形です。今年は、2019年11月30日、12月1日の二日間で開催されました。リクルートテクノロジーズは、イベントのプラチナスポンサーの１つです。 以下、公式ページからの引用です。 jsconf
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
AppleがiCloudのモバイル版をアップデート！ Androidユーザーにもおすすめ¥ | ライフハッカー・ジャパン
Nintendo Switchの純正プロコンを異次元レベルの操作性に!使わない理由がない革新的アダプター
はじめに これは Angular Advent Calendar 2019 10日目の記事です。 こんにちは (｡･ω･｡) Angular と Firebase で CGM サービス（一般ユーザー投稿型サービス）を開発している者です。 早いもので、Angular Advent Calendar も 3 回目の参加となります。 例年ではなんとなく不吉な 4 日目をいただいていたのですが、今年も募集当日にエントリーしに行くと既に 9 割ほどの枠で参加表明があり、狙っていた？ 4 日目も埋まっていました。 （どこでも良いので他の人が嫌がる確率が高そうなところに入ったろの精神 今まで #1 しかなかったカレンダーが今年は勢いそのまま #2 まで誕生し、ここ 1 年での Angular コミュニティの成長を実感しています (ﾉﾟ∀ﾟ)ﾉ 小話はこの辺で... この記事では、約 2 年間 Angul
Firefox、Webサイトのうっとうしい「通知を許可する」のポップアップを全ブロックへ 99％のユーザーが否定的だったため
Webブラウザ「Firefox」が、今後「通知許可プロンプト」をブロックする方針を発表しました。Webサイトを閲覧していると、たまにポップアップして「通知の送信を許可して受信しますか？」などと聞いてくるアレです。 これ、いちいち閉じるの面倒ですもんね（公式ブログより） この施策は段階的に進行しており、既に現行バージョンのFirefox 70は、「許可しない」を選択するとそのサイトではポップアップが出なくなる仕様に（ちなみに現行のChromeも同じ仕様）。2020年にリリースを予定しているFirefox 72では、全てのサイトで最初からポップアップを出さない仕様をデフォルトにするとのことです。 Firefox 70での通知許可プロンプト。「許可しない」とキッパリ断れるようになりました 旧バージョンでは「許可する」と「後で」の2択でした 方針を決定づけたのは、ユーザーの動向に基づいた調査。通知
旅行プランナーサービス「Google Travel」が「PWA」に対応 ブラウザサービスをアプリのように利用可能 Android や Windows 10、iOS 13 の「Chrome」からインストール可能 Google 旅行プランナーサービス「Google Travel」が、いつの間にか「Progressive Web Apps（PWA）」に対応した模様です。 「PWA」は WEB サイトをアプリのような仕様で表示できる仕組みです。「PWA」に対応している WEB サイトを［ホーム画面に追加］などを利用してインストールすることができ、（実際はアプリではないですが）アプリの一つとして利用できるようになります。 そしてその主な利点は、WEB サイトの最新情報が自動更新され、いち早く入手できるようになる点や、WEB サイトのサービスを手軽に利用できる点です。 「PWA」は Android や
「PWA Night vol.10 ～PWA × 技術～」にて登壇した発表資料です。 https://pwanight.connpass.com/event/151546/
December 17, 2023 Native mobile apps are optional for B2B startups in 2024 I continue to see new B2B software startups struggle with native mobile apps. Consumer software makers can usually start by going all-in on a single platform, but for business tools, that’s rarely an option. So they must face the tall task of tackling web, iOS, and Android at the same time. Hence the proliferation of toolki
What PWA Can Do Today
A showcase of what is possible with Progressive Web Apps today. A Progressive Web App (PWA) is a website that can be installed on your device and provide an app-like experience read more How to use this app This app is itself a Progressive Web App which means it can be installed to the home screen of your mobile device or to your desktop. After installing you can check the demos of the features be
[レベル: 上級] Chrome での PWA インストールの要件が変更になります。 オフラインを実際にサポートしている必要があります。 Chrome 93 で変更が適用される予定ですが、リリースされたばかりの Chrome 89 ではオフラインサポートしていないと警告が出ます。 実際のオフラインサポートがPWAインストールの条件に Web担当者Forum の連載コラムで取り上げたように、Chrome での PWA インストール要件が変わります。 [PC 版 Chrome での PWA インストール] インストール可能にするにはオフライン対応している必要があり、そのチェック体制が厳しくなります。 技術的に言うと、これまでは、Service Worker に fetch イベントがあれば適合していました。 実際にはオフライン対応していなくても問題なかったのです（Chromeにそこまで検証する
LWC SOQL Builder 百聞は一見。こんなツールを作りました↓ 名前は「LWC SOQL Builder」です。Lightning Web Componentsのオープンソース版で作ったSOQL構築ツールなので、LWC SOQL Builder… 最初（仮）でつけてた名前なんですが他の名前が思いつかず、そのままリリースまで変わらずに来てしまいました。 社内ハッカソンで作っていたんですが、作っていたら楽しくなってしまって、自分が欲しい機能を詰めに詰め込んでしまいました。 https://lwc-soql-builder.github.io/ ツールはこちら↑で公開しています。ソースコードもMITで公開しています。 せっかくだから海外の人にも使ってほしいなと（適当な）英語で作ったので、サイトにはあまり説明を書けませんでした（英語がおかしいところがあったら教えてもらえると非常に助かりま
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
PWA Night 2020/01/20 pastak.icon Pasta-K こんにちは 自己紹介 Pasta-K Nota Inc エンジニア at 京都 主にGyazoのフロントエンドの面倒を見ています マンガ / クラフトビール / サッカー観戦 過去にこういうトークをしました ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer - Speaker Deck /pastak-pub/はてなにおけるPortals #ChromeDevSummit で はてなのマンガチームのGigaViewerで検証やデモ実装を行ったPeriodic BG SyncやBackground Fetchを組み合わせたブラウザでの雑誌配信の様子 会社・サービス紹介 積極採用中です htt
PWAs on Oculus Quest 2 Stay organized with collections Save and categorize content based on your preferences. The Oculus Quest 2 is a virtual reality (VR) headset created by Oculus, a division of Meta. Developers can now build and distribute 2D and 3D Progressive Web Apps (PWA) that take advantage of Oculus Quest 2's multitasking feature. The Oculus Quest 2 The Oculus Quest 2 is a virtual reality
Badging for Home Screen Web Apps
Along with the many other features for web apps on iOS and iPadOS 16.4, WebKit now includes support for the W3C’s Badging API. This straightforward API allows web developers to badge the icon of a web app. This article explores the various features of the Badging API and how to use it, and our ongoing collaboration with W3C’s Web Applications Working Group to improve the specification. Home Screen
Edge of the Web - memo.md 結局PWAは来るの？来ないの？ https://blog.agektmr.com/2018/03/instagram-pwa.html TWA (Trusted Web Activities) https://developers.google.com/web/updates/2019/02/using-twa https://developers.google.com/web/updates/2019/08/twas-quickstart https://web.dev/oyo-lite-twa/ https://github.com/GoogleChromeLabs/llama-pack Project Fugu https://www.chromium.org/teams/web-capabilities-fugu Origin T
Rakuten 24’s investment in PWA increases user retention by 450% Stay organized with collections Save and categorize content based on your preferences. Making their web app installable resulted in increased traffic, visitor retention, sales per customer, and conversions. Rakuten 24 is an online store provided by Rakuten, one of the largest e-commerce companies in Japan. It provides a wide selection
Appleが先日リリースしたiOS 15.4とiPadOS 15.4 Beta1で、Webベースアプリからのプッシュ通知機能に取り組んでいることが判明しています。 このベータ版で、AppleはSafariの「Experimental Features」に「Push API」という項目を追加していいることを開発者のMaximiliano Firtman氏が発見しています。 ただし、この設定自体は存在するものの、API自体はまだ有効になっておらず、AppleはSafariにWebベースの通知を表示する許可をユーザーに求めるUIプロンプトを現時点では実装していないようです。 iOS 15.4ウェブベースの通知が一般的なmacOSとは異なり、iOSではAppleのApp Storeを通じてダウンロードされたアプリのみが通知を送信することができます。iOS 15.4で「Push API」が搭載された
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成 MOONGIFT
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。 そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなければならない作業です。そこで使ってみたいのがPWA asset generatorです。 PWA asset generatorの使い方 PWA asset generatorを実行します。画像やSVGファイルを指定するだけです。 $ pwa-asset-generator new-org-logo.png 16:24:49 getSplashScreenMetaData Initialising puppeteer to load latest splash screen
Tabbed application mode for PWAs | Capabilities | Chrome for Developers
In the world of computing, the desktop metaphor is an interface metaphor that is a set of unifying concepts used by graphical user interfaces (GUI) to help users interact more easily with the computer. In keeping with the desktop metaphor, GUI tabs are modeled after traditional card tabs inserted in books, paper files, or card indexes. A tabbed document interface (TDI) or tab is a graphical contro
どんなWebサイトもノーコードでPWA化を実現できる「Progressier」を試してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回はあらゆるWebサイトを誰でも簡単にノーコードでPWAに変えることができるWebサービスをご紹介します。 一般的なサーバにホスティングされているサイトだけでなく、Wordpressで作成されたサイトからWebflowなどのサービスを利用して作られたサイトまで幅広く対応しているのが特徴です。 PWA対応にご興味ある方はぜひ参考にしてみてください！ 【 Progressier 】 ■「Progressier」の使い方 それでは、「Progressier」をどのように使えばいいのかを詳しく見ていきましょう！ まずはPWAに変換したいWebサイトを準備します。今回は、サンプルとしてNetlifyでホスティングしている以下のようなサイトを用意しました。 このサイトを試しにPWA対応していくことにしましょう。 「Progressier」のトップページに
すでに先日から話題になっているためご存知の方も多いと思いますが、取り上げておきます。 Chromebookを使う上で、良くも悪くもアプリについて話題になると思いますが、そのうちAndroidアプリのごく一部に関しては、Google Playストアからインストールしても、Androidアプリではなくプログレッシブウェブアプリ(PWA)に置き換わるようになっています。 実際のインストール時にどんな動作になるかは、参考元が掲載してくれていますので、引用します。 ご覧頂くとおり、ChromebookのGoogle Play ストアからAndroidアプリをインストールしても、AndroidではなくPWA(Web版)のアプリがインストールされていることがわかると思います。 ではなぜPWAなのかといえば、ぶっちゃけChromebookではAndroidアプリよりPWA、Web版アプリの方がちゃんと動作
Developers.IO CAFEがなぜアプリからPWAになったのか – Developers.IO TOKYO 2019 #cmdevio | DevelopersIO
Developers.IO CAFEがなぜアプリからPWAになったのか – Developers.IO TOKYO 2019 #cmdevio アプリのときは、リソースが分散しスピードがでなかった。PWAになったことで、リソースを集中させ体験の作り込みこみに集中できるようになった。またWeb、アプリ、LINE LIFFで配布することが可能になった。それぞれのユーザで好きなチャネルで使用でき、気持ちよく使ってもらえるようになった。
はじめに カレンダーとメモが、「ガッチリ結びついた」メモ帳が欲しいなぁ。 というコンセプトで作りました。 無料です。 ※ 2022/02/10 追記 アプリのURLを上記に変更。 ※ 2022/10/04 追記 2023/03/31にGoogleの旧ログイン方法が廃止されます。 アプリのアップデートは行われませんので、新規登録やログインはお控えください。 見栄え感 アプリ名の通り、時間に紐付いたメモが出来るのが特徴です！ 技術スタック 言語 TypeScript フレームワーク Vue.js + CompositionAPI データ保存 GoogleDriveAPI IndexedDB + CacheAPI ホスティング FirebaseHosting アプリ機能 ServiceWorker（PWA） FirebaseRemoteConfig （アップデート管理） 使い勝手のポイント Go
All slide content and descriptions are owned by their creators.
これからはじめる PWA 2021
📝 まえがき こんにちは犬です。 この記事をPWA初学者へ送ります。参考になれば幸いです。 📝 PWA とは PWAは Google が提唱した Web アプリケーションです。 Progressive （プレグレッシブ） Web（ウェブ） App（アップ） これらを略して「PWA（プログレッシブウェブアプリ）」といいます。 プログレッシブウェブアプリは、「機能」、「信頼性」、「インストール可能性」 上記3つの軸を考慮し設計された Web アプリケーションです。 PWAとは何かをざっくりと説明すると、ネイティブアプリと Webの良いとこどりしたもので、 より良いUXを提供できるWebアプリケーションを目指しています。 上図は、「ネイティブアプリ」と「Webアプリ」、「PWA」の３つのアプリケーションを Capability と Reach で図に表したもので、オレンジ色がネイティブアプリ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Push Notifications, WebXR, and better PWA support coming to iOS－firt.dev
Appleの「iPhoneでのPWA廃止」についてEUの規制当局が調査を開始したとの報道
2021年に使った技術と来年に向けて - バーチャルおりばーハウス
iOS 16.4でSafariのPWAがPush通知に対応したのでWeb Pushの動作検証する
TechFeed ProのPM兼UXデザイナーが語る、PWAのデメリット・メリット
iOS/iPadOS 16.4リリース 〜ホーム画面に追加したWebアプリ（PWA）からの通知が可能に。またUnicode 15.0の絵文字も追加される | gihyo.jp
今後クラウドゲーミングを支えるであろうPWA技術｜おりばー｜note
Introducing Learn HTML | Blog | web.dev
Webの技術だけで作るQRコードリーダー - Qiita
JSConf JP 2019 参加報告 - とろろこんぶろぐ
Make your PWA feel more like an app | Articles | web.dev
Angular と Firebase で月間PV1億超えの PWA を作った話 - Qiita
旅行プランナーサービス「Google Travel」がPWAに対応
OOPartsが切り開く クラウドゲーミング ✖︎ PWA
「Google Chrome 102」はタイトルバーに検索ボックスを配置したPWAも可能 ～ベータ版が公開／Webアプリの使い勝手向上やユーザーのプライバシー保護につながる機能強化が多数
Native mobile apps are optional for B2B startups in 2024
ChromeのPWAインストール要件が変更に、オフライン対応必須。Chrome 89で警告
俺が考えた最強のSOQL実行ツールを作りました - Qiita
Trusted Web Activity を使用した PWA の品質基準の変更
GyazoでのPWA/WebAPIとの向き合い方 - pastak-pub
PWAs on Oculus Quest 2 | Articles | web.dev
Edge of the Web - memo.md
Rakuten 24’s investment in PWA increases user retention by 450% | web.dev
Apple、iOS15.4にWebベースアプリのプッシュ通知機能を搭載へ - こぼねみ
Chrome OSのPlayストアで、いくつかのAndroidアプリがPWAに置き換わります | HelenTech
【個人開発】日常用のメモ帳アプリ（PWAアプリ）をリリースしてみた - Qiita
PWAとCache API #frontkansai - Speaker Deck
l.smartnews.com
bestcarweb.jp
www.jiji.com
bestcarweb.jp
kten.2chblog.jp
www.tax-support.xyz