Developers.IO CAFEがなぜアプリからPWAになったのか
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた / TSKaigi TypeScript Multilingualization
PWAを試してみよう - Qiita
扱ったことがなかったので、PWA(Progressive Web Apps) を試してみようと思います。 WebページをPWAとして設定することで以下のことができます。 Webアプリなのに、ネイティブアプリのように、Android/Windowsにアプリとして登録することができる。 アドレスバーのようなブラウザっぽさはなく、全画面でネイティブアプリのように起動することができる。 PWAのService Workerの機能を使った実装をすることで、以下のことができます。 Webコンテンツをキャッシュ化することができ、オフラインで動かすことができる。 サーバ側からPush通知ができる。(iPhoneを除く) ということで、今回の投稿では、PWAの設定方法と、Push通知の実装をしてみます。 ただ作るだけではモチベーションが上がらないので、パスワード管理アプリ「パスワードマネージャ」を作成します
Adaptive icon support in PWAs with maskable icons Stay organized with collections Save and categorize content based on your preferences. If you've installed a Progressive Web App (PWA) on a recent Android phone, you might notice the app's icon has a white background. Android 8.0 introduced adaptive icons, which display app icons in a variety of shapes across device models. Icons that don't use thi
PWA開発のお仕事のご相談はこちらで受け付けてます！ https://www.tam-tam.co.jp/pwa/ １．PWA ってなに？ ２．PWA を作るいくつかの方法 ３．アプリとしてのPWA とネイティブの比較 ４．PWA の効果 ５．取り組むときのポイントRead less
GitHub - shadowwalker/next-pwa: Zero config PWA plugin for Next.js, with workbox 🧰
This plugin is powered by workbox and other good stuff. 👋 Share your awesome PWA project 👉 here Features 0️⃣ Zero config for registering and generating service worker ✨ Optimized precache and runtime cache 💯 Maximize lighthouse score 🎈 Easy to understand examples 📴 Completely offline support with fallbacks example 🆕 📦 Use workbox and workbox-window v6 🍪 Work with cookies out of the box 🔉
Ehime.js #4の資料です。 https://ehimejs.connpass.com/event/162348/
久しぶりに、所得税・住民税・事業税・国保の計算をバージョンアップしたいなぁと考え、必要性はそこまでないですがPWA化してみます。 PWAをこのシステムに導入する利点とすれば、キャッシュを使ってオフライン対応ですね。今後は、Webプッシュも使ってようと考えてますが。 環境 Windows 10 Pro vue cli 3 Node 10.13 PWAとno PWAの違い まずは、PWAの指定有無で2つのプロジェクトを作成し、その差分からどのようにバージョンアップしていくか計画を立てます。 PWA対応プロジェクトの作成 vueプロジェクトを作成します。 [highlight_bash]vue create pwa[/highlight_bash] 最初にManualを選択し、あとはPWAを追加しただけです。 [highlight_basic]Vue CLI v3.4.1 ┌──────────
欧州連合（EU）内において、iOS17.4ベータでプログレッシブWebアプリ（PWA）がこれまでのように動作しなくなったと報告されています。PWAとは、厳密に言えばWebサイトでありながらアプリのような性能を兼ね揃えており、App Storeを介さずにアプリ体験をユーザーにもたらす方法の一つととなっていましたが、EU圏内で今後使用不可となるかもしれません。 ■3行で分かる、この記事のポイント 1. iOS17.4からEU内でプログレッシブWebアプリが使用できなくなっていると報告。 2. 仕様変更はデジタル市場法に関係している可能性が高い。 3. 今後、WebアプリがEU内で使用不可になるかもしれない。 デジタル市場法と関係か iOS17.4ベータ2から、PWAを開こうとすると「これからはあなたのデフォルトブラウザで開かれます」とのメッセージが表示されるようになり、これまでWebアプリ上に
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
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Update on apps distributed in the European Union - Support - Apple Developer
Introduction Apple is sharing changes to iOS, Safari, and the App Store, impacting developers’ apps in the European Union (EU) to comply with the Digital Markets Act (DMA). These changes create new options for developers, including how they can distribute apps on iOS, process payments, use web browser engines in iOS apps, request interoperability with iPhone and iOS hardware and software features,
How to use Window Controls Overlay Adding window-controls-overlay to the web app manifest A progressive web app can opt-in to the window controls overlay by adding "window-controls-overlay" as the primary "display_override" member in the web app manifest: { "display_override": ["window-controls-overlay"] } The window controls overlay will be visible only when all of the following conditions are sa
Apple系がまだ非対応ですね。 導入方法 導入はとてもかんたんでmanifest.jsonにshortcuts配列を追加するだけです。ServiceWorkerの変更とかも不要です。 { "name": "Player FM", "start_url": "https://hoge.com", "shortcuts": [ { "name": "Open Play Later", "short_name": "Play Later", "description": "View the list of podcasts you saved for later", "url": "/play-later", "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }] }, { "name": "View Subscrip
PWA(Progressive Web App)とは？ PWAとは、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用し、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。 簡単に言ってしまうと、ウェブアプリでありながらネイティブアプリのように使用できるようにする機能です。 PWAは、通常のウェブアプリのように、HTML、CSS、Javascript等で構成されます。 また、下記のようなメリットがあります。 通常のウェブアプリよりも高速 インストール可能 どのブラウザでも動く オフラインでも閲覧可能 プッシュ通知を送れる・受け取れる これを用いられているウェブアプリを例としてご紹介すると、Twitterです。 PCのChrome上では検索ボックスの右側にPCに下矢印のマークが表示されます。 これをクリックすると、ポ
PWA Night CONFERENCE 2020 https://conf2020.pwanight.jp/speaker/takepepe/
PWAでアプリショートカットを設定可能に
[レベル: 上級] PWA のアイコンからショートカットメニューを利用できるようになりました。 ショートカットメニューは、そのアプリでよく使われる機能にすぐにアクセスできる機能です。 アプリのショートカット こちらはアプリ版 Twitter のアイコンを長押しタップしたところです。 Twitter でよく使われる機能がショートカットメニューとして出現します。 こちらは PWA 版 Twitter のアイコンを長押しタップしたところです。 標準のメニューが表示されるだけです。 このように、ショートカットを構成するとそのアプリ固有のアクションをメニューに表示できます。 たとえば、次のようなショートカットメニューがあります。 よくアクセスするページ――トップページ、タイムライン、注文履歴など サイト内検索 メールや投稿の作成 よく聴くプレイリストの再生 ユーザーが頻繁に実行するタスクをショートカ
iPhone 11, iPadOS and iOS 13 for PWAs and web development
⚠️ Check an updated version of this article at ⏩ firt.dev It’s that time again. iOS 13 has just been released with the new branded iPadOS 13 coming in a few days, and iPhone 11 variations being sold from today. So it’s time again to talk what’s new or different for Progressive Web Apps, web design and web development in general. It’s incredible it’s been 9 years since my first post discovering wha
【ノーコード初心者におすすめ】Glideの使い方「無料でECサイトを作ってみよう」│NoCode Japan News
1．ノーコード開発ツールGlideとは？ まずGlideとは何なのか、Glideを使うと何が出来るのかを確認していきましょう。 Glideは、アメリカ発のアプリケーション開発用ノーコードツールの一つです。データベースをスプレッドシートで管理することができ、ある程度プログラミングやデータベースの知識があるとスムーズにキャッチアップできる他ツールに比べても圧倒的なわかりやすさを実現しています。 システム開発においてもっとも重要とされる設計の一つがデータベースの設計ですが、プログラミング経験のない人であっても、GlideであればMicrosoft ExcelやGoogle スプレッドシートの扱い方さえ分かっていれば、自由自在にデータを扱うことができるようになります。 もちろんノーコードツールとしての魅力はそれだけではありません。テンプレートが非常に豊富で、基本的に思いつくような機能であれば、ほと
Why Progressive Web Apps Are The Future of Mobile Web [2019 Research]
Progressive Web Apps: They Simply Work Much Better Than Your Typical Mobile Website. Progressive Web Apps? They simply work much better than your typical mobile website. When Pinterest replaced their mobile website with a progressive web app (PWA) they immediately saw tremendous lift across several important metrics: Source: A Pinterest Progressive Web App Performance Case Study PWAs just work bet
![Why Progressive Web Apps Are The Future of Mobile Web [2019 Research]](https://cdn-ak-scissors.b.st-hatena.com/image/square/38c441b86460baca987f4e8bde226178d7744813/height=288;version=1;width=512/https%3A%2F%2Fymedialabs.com%2Fwp-content%2Fuploads%2F2019%2F08%2Fpwa-social.png)
PWA Update Notification with Create React App | Felix Gerschau
javascriptpwaPWA Update Notification with Create React AppLearn how to trigger update notifications that ensure that your users are using the latest version of your Progressive Web App. Watch my PWA online course 📹You can now watch my course on how to turn your React app into a PWA on Skillshare. Learn what you need to know to get started, and turn your React app into a PWA in just 10 minutes. Wa
Microsoft and Google team up to make PWAs better in the Play Store
Web shortcuts on Android — now available to PWA developers through PWABuilderWe’re glad to announce a new collaboration between Microsoft and Google for the benefit of the web developer community. Microsoft’s PWABuilder and Google’s Bubblewrap are now working together to help developers publish PWAs in the Google Play Store. PWABuilder.com is Microsoft’s open source developer tool that helps you b
メンテナンス実施の翌日、ブログのトップページが更新されない報告があがりました。 ServiceWorker応答 Date、Expiresとも前日のコンテンツが、ServiceWorkerのキャッシュ応答により表示される状態でした。 Webサーバからの応答 キャッシュを迂回するスーパーリロードを行うと、正しい最新のコンテンツが取得できる状態でした。 原因 Nuxt関連パッケージの更新 revision 付与が 必須となる仕様変更を含むパッケージへのアップデートが原因でした。 NuxtでPWAが更新されない問題の調査 キャッシュ設定 当サイトのサービスワーカーのキャッシュ設定はデフォルト。キャッシュの最大有効期限を明示しない状態で利用していた事で、サービスワーカーのキャッシュが長時間残りやすい状況に至ったと推測されます。 確認 対処方針を決定するため、PWA、サービスワーカーを撤去した検証環境
Entering the mobile development environment is tricky. Mobile developers have to make a lot of decisions before launching their applications. Some of these key decisions involve: What languages do I use? Which platforms do I publish on? Which devices do I have to support…
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
iOS（Safari）は、Androidに比べるとHTML標準仕様への対応が遅れがちです。 PWA仕様への対応も例に漏れず、最新のiOS15.2においても不完全な状態です。 それでもiOS13辺りからはそれなりに使える状態になってきたので、個人的に開発しているWebアプリではiOS13.4以降をPWAに対応させました。 今回はその経験から、iOSのPWA対応時に気をつけるべき事やちょっとしたテクニックを紹介します。 PWA対応の目的 なぜWebアプリをPWA対応させるのか？ 自分としては以下2点がPWA対応の主なモチベーションだと考えています。 ネイティブアプリのようにスマートフォンのホーム画面に導線を置ける アドレスバーなど不要なUI無しのフルスクリーンでWebアプリを起動できる 実はこの2点に関しては、Webアプリモードという機能を使うことでiOS4の頃には既に実現可能でした。 ただW
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
Progressive Web App (PWA)“A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver a native app-like experience to users. These apps meet certain requirements (see below), are deployed to servers, accessible through URLs, and indexed by search engines.” A Progressive Web App (PWA) works like any other normal app but with a lot of added features and a lot less hassle. T
Trusted Web Activityを触ってみる
暑くなってきましたね。なんか昨夜暑すぎて非常に寝苦しかったので、就寝をあきらめ、今まで「時間がない」を言い訳に着手していなかった技術検証を寝落ちするまでひとまず進めてみようと一人立ち上がったオジサンが私です。お久しぶりです。こちら改めまして 「会社の意見は一切代表していませんし、ありません。すべて私の個人的な見解です。」 な技術検証作業ログです。 実は2017年ごろにコンセプトが公開されたTrusted Web Activityという「フルスクリーンなChromeを一つのActivityとして立ち上げてPWAを表示する」ためのAndroidのフィーチャーを、残念ながら私は一切触って来なかった背景があり、概念としてはわかるんだけど実際どんなものかよくわかってなかったので、この寝れない夜を利用してこのブログをアプリ化してみることにしました。 0. 前提私はAndroidアプリ開発はスーパー初心
「PWA を仕事でやりたいけど、上司やクライアントを説得できず案件化できない...」そんな悩みをお持ちのあなたに、ビジネスサイドの口説き方をお伝えします！
8bはシンプルで使いやすいオンラインのWebサイトビルダーです。直感的な操作でWebサイトを作成、公開する事が出来ます よくあるビルダーサービスですが、UIもまぁまぁ分かりやすく、PWAにも対応しています。ページも複数作れるみたいです 有償版は月1ドル程度でSSL対応、作成したWebページのエクスポート、独自ドメイン対応、ページ数が無制限になる等のサービスが追加されます Google AMPにも対応、全てのテンプレートはモバイルフレンドリーに設計されています。広告も削除とあるんですが今のところ広告は見当たりませんので、無償版はそのうち挿入されるかもしれませんね 使ってみた エディターです。ブロック単位でスタイルや画像を編集、テキストはクリックでツールバーが表示されます。テキストはその場に入力します。メニューのリンクも最初は分からなかったんですが、ツールバーが出えるだけでテキストの編集はその
Vite Plugin PWA
PWAVite Plugin PWA integrations for Vite and the ecosystem Zero-config and framework-agnostic PWA Plugin for Vite
目標：ServiceWorkerにキャッシュを保持して、とりあえずオフラインでも表示できるようにする。 PWAやってみたい ページスピードあげたい はじめに そもそもサービスワーカーって何!?という方はこちらの記事が分かりやすかったです。 参考：Service Workerってなんなのよ (Service Workerのえほん) 実装するにあたりWorkboxというGoogleのライブラリを使います。PWAのライブラリというよりはサービスワーカーの設定が簡単にできるライブラリという認識です。（※そのためホーム画面追加やプッシュ通知はこのライブラリには含まれません。多分。） 今回は最も簡単な方法をご説明したいので、GulpやWorkboxCLI等のビルトツールは使いません。キャッシュしたい（オフライン対応させたい）リソースを地道に書いていきます。（別の記事で書きます） Servicework
さてさて、前回記事「Laravel + Vue + GraphQLでデータ取得」では最近知った新しい技術をテーマにした内容をお届けしました。 そして、今回はその流れで「知ってはいたけど、なかなかチャレンジする機会がなかった」内容をお届けしたいと思います。 ズバリ、それは・・・ PWA（Progressive Web Application） です。 PWAとは、簡単に言うと「ウェブの技術でスマホのアプリがつくれる」というもので、大部分のシェアを占める iPhone、Android 両方に対応しています。（厳密にはiOSの場合、インストール部分などで未整備の部分もあります） そこで！ 今回はLaravelを使って、PWAを実装してみたいと思います。 ぜひ楽しみながらやってみましょう❗ （最後に今回開発したソースコード一式をダウンロードできますよ😊） 「正直言うと、手こずりました😂」 開発
【Other】【CSS / jQuery / javascript】PWAでプッシュ通知を実装してみる（１）準備と解説｜虹色ミツバチ
NOTIFICATION 当サイトの更新をプッシュ通知で受け取ることができます。 プッシュ通知を受け取る プッシュ通知を解除する PWAでプッシュ通知を実装するのが大変だったので書いておきます。 目標はこんな感じ。 freoをPWA化する プッシュ通知の購読をサイトから簡単に行えるようにする プッシュ通知の送信は手動で行うものとする（サイトの更新のお知らせとか簡単なものしかしないので） 色々やって結果がこれ。 サイトをWindows・Android・iOSにインストールできるようになった 一度キャッシュした画面ならサイトをオフラインでも閲覧できるようになった サイトの表示が軽くなった サイト上にプッシュ通知の購読状況が表示されるようになった サイト上でプッシュ通知の購読開始・購読停止ができるようになった フォアグラウンドのGoogleChrome、Firefoxを利用している複数人に対して
統合開発環境@マイナポイント受け取り忘れたの引きずってる @sadnessOjisan 今週ここでLTするのですが、準備整いました。初見でweb pushするまでにハマるところ＆ヘイトが溜まる箇所●●選します。 PWA Night vol.7 ～PWAのミライや活用方法をみんなで考えよう～ pwanight.connpass.com/event/139818/ #pwanight 2019-08-19 01:21:57
PWAdvent ❄ 24 great browserfeatures - from the first to the 24th of december 2020
PWAdvent is the perfect advent calendar for everyone who's excited about the web platform. Take a look at all the great stuff the web has to offer.
What's new, what's missing, new challenges and new abilities by Maximiliano Firtman Twitter @firt About Newsletter Published 4 years ago (16 Sep 2020) About 21 min reading time #ios #webview #pwa #store From today, iOS 14 and iPadOS 14 are available to most users in the world. I've played with it, and here you have a list of the essential changes for PWA and Web Designers and Developers. As usual
追記 2022/06/27 現状、サイト更新もメンテナンスもしておらず。サイト公開されていたURLは削除しました。 はじめに 皆様は、朝起きたときこんなことないですか・・・？ だるい、勤怠連絡のメール入れるのめんどくさい 頭痛い、文章考えたくない 眠い、寝起きだし考える余裕ない そう、我々人間は休みの連絡を入れるのがめんどくさいと思っています。 さて、そんな状況を改善するには・・・ 我々プログラマはコードを書いていこう。 というわけで、WEBで文章を作ってくれるマイクロサービスを作ってしまいました。 もともとプログラマがなぜコードを書くのか、それはめんどくさいことを自動化したり簡略化したり、技術で解決したいからです。 こういうものを作るときに気をつけなければいけないのは、いかに使いやすく作るかです 簡単に使えるように とりあえず、UIの専門家ではないので、実際に出来上がったものを触ってもら
Microsoftの「Progressive Web Apps（PWA）」への取り組みは、2018年にいったん加速したかに見えたものの、その後勢いが衰えてしまったようだった。しかし、2019年11月に入って、同社内の複数のチームが、PWAの導入計画に言及し始めている。 ウェブサイトやアプリをネイティブアプリのように動作させるPWAに関する取り組みでは、Googleが以前から最も先行している。だが、他のベンダーも、数年前からPWAのトレンドに乗り始めた。Microsoftも、「Windows 10」や「Edge」ブラウザーにPWAのサポートを取り入れるべく、以前から計画を進めている。 Microsoftは現在、「Outlook.com」と「Outlook on the web」をPWAに対応させようとしているようだと、Thurrott.comが伝えている。Thurrott.comのPaul
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adaptive icon support in PWAs with maskable icons | Articles | web.dev
Pep
PWAのキホン～作り方から活用どころまで～
Service Workerとブラウザでの通知について
【Vue.js】Vue CLI 3のプロジェクトをPWA化する | kawadeblog
EU圏内でWebアプリ禁止？iOS17.4が引き起こす波紋 - iPhone Mania
PWAでカメラを使うためiOSとAndroidで異なるmanifestを読み込む - Qiita
pwanight.jp - このウェブサイトは販売用です！ - pwanight リソースおよび情報
Customize the window controls overlay of your PWA's title bar | Articles | web.dev
PWAにアプリショートカットを導入する(長押しオプション) - Qiita
Next.js環境でのPWA(Progressive Web App)の導入手順
Unlocking new capabilities for PWA
当ブログサイト(DevelopersIO)におけるPWAサポート終了のおしらせ | DevelopersIO
Everything You Need to Know About PWAs
VueとPWAで作ったサイトのキャッシュを新しいファイルがあった場合に自動更新したい
iOSのPWA対応時に気をつけるべきこと - Qiita
Push Notifications, WebXR, and better PWA support coming to iOS－firt.dev
Build a PWA Using Only Vanilla JavaScript
PWA どうやって始める？ ビジネスサイドはこうやって口説こう！
シンプルで使いやすくPWAにも対応したオンラインWebサイトビルダー・「8b」
WorkboxでPWAを導入する方法～オフライン対応編～ - Qiita
PWAアプリをLaravel + Vueでつくる方法（ダウンロード可）
PWA Night vol.7 ～PWAのミライや活用方法をみんなで考えよう～ まとめ
Safari on iOS 14 and iPadOS 14 for PWA and Web Developers－firt.dev
作ったら始まるNuxtでPWAものがたり - Qiita
マイクロソフト、「Outlook.com」でPWAをサポートとの情報