PWA（プログレッシブウェブアプリ） PWA（プログレッシブ・ウェブ・アプリ）をオフラインで表示する（part2）
前回の続きです。オフライン対応したコードを見ていきます。コード全文以下はPWAのコードです。index.html: <h1>Hello, PWA!</h1> <p>This is my first Progressive Web App.<...
PWA（プログレッシブウェブアプリ）
PWA（プログレッシブウェブアプリ） PWA（プログレッシブウェブアプリ） PWA（プログレッシブ・ウェブ・アプリ）をオフラインで表示する(Part1)
PWA（プログレッシブ・ウェブ・アプリ）をオフラインでも表示できるようにするためには、サービスワーカーを利用してアプリのリソースをキャッシュし、ネットワークに接続できない場合でもそのキャッシュを利用してアプリを表示するようにします。プロジェ...
PWA（プログレッシブウェブアプリ） 【PWA】Webアプリケーションでサービスワーカーを使用してプッシュ通知を扱う
Webアプリケーションでサービスワーカーを使用してプッシュ通知を扱います。サービスワーカーは、バックグラウンドでスクリプトを実行し、プッシュ通知、キャッシング、オフラインサポートなどの機能を提供するために使用されます。このコードは、以下のイ...
PWA（プログレッシブウェブアプリ） Firebase Cloud Messaging (FCM) を使用してサーバーサイドからプッシュ通知を送信する
Firebase Cloud Messaging (FCM) を使用してサーバーサイドからプッシュ通知を送信し、それをVercelでホスティングし、GitHubでコードを管理するプロセスは以下のステップで構成されます。プロジェクトのセットア...
PWA（プログレッシブウェブアプリ） Service Workerとは？基本的な特徴と機能について
Service Workerは、ウェブブラウザにおける強力なテクノロジーであり、バックグラウンドで動作し、ウェブアプリケーションに対してさまざまな機能を提供するためのスクリプトです。このテクノロジーは、ウェブページが閉じられた後も実行を続け...
PWA（プログレッシブウェブアプリ） 【PWA】可愛いワンコの画像をプッシュ通知で送るWebアプリを作る｜webPush
こんにちは、ワンコ好きの皆さん！ ようこそ「ワンコライフ」へ！私たちのミッションは、あなたの日常にちょっとした笑顔とワクワクをお届けすること。どんなに忙しい日でも、ふとした瞬間に「可愛いワンコ」の画像がスマホにポップアップして、あなたの心を...
PWA（プログレッシブウェブアプリ） PWA（Progressive Web App）でバッジが消えない場合のJavaScriptの処理
PWA（Progressive Web App）でバッジが消えない場合のJavaScriptの処理に関しては、以下のステップを試してみてください。Service Workerの更新確認Service Workerの更新確認: バッジが表示さ...
PWA（プログレッシブウェブアプリ） PWA（Progressive Web Apps）とは？特徴やメリットについて解説
PWA（Progressive Web Apps）とは？PWA（Progressive Web Apps）は、ウェブ技術を利用して作成されるアプリケーションの一種で、従来のウェブページよりも高度な機能とユーザー体験を提供します。以下にその特...
PWA（プログレッシブウェブアプリ） 【PWA】ボタンをクリックしてプッシュ通知を送り画像を添付する方法
Web Push通知を実装するために、Progressive Web App（PWA）にプッシュ通知・Web Push機能を組み込んでみます。プッシュ通知の権限をリクエスト（Notification.requestPermission）この...
PWA（プログレッシブウェブアプリ） 【PWA】Web Push APIを使用してブラウザに通知を送信する
プッシュ通知を送信するには、Web Push APIを使用してブラウザに通知を送信します。以下は、プッシュ通知を送信するJavaScriptのサンプルコードです。※プッシュ通知を送信するにはサーバーサイドの実装も必要です。Service W...
PWA（プログレッシブウェブアプリ） 【PWA】プッシュ通知の権限をアナウンスする画面を表示したい（JavaScript）
Notification API を使用プッシュ通知の権限をアナウンスする画面を表示するためには、JavaScriptとブラウザの Notification API を使用します。リクエストする簡単な例以下は、購読するボタンが押されたときに...
PWA（プログレッシブウェブアプリ） Firebase Cloud Messagingを使用してPush通知を送信するための基本的な手順
Firebaseプロジェクトの作成と設定:Firebaseコンソールにアクセスし、新しいプロジェクトを作成します。プロジェクトの設定で、Firebase Cloud Messaging（FCM）を有効にします。Firebaseプロジェクトの...
PWA（プログレッシブウェブアプリ） FirebaseでPWAのPush通知アプリを作る（Part1）
Firebaseを使用してPWA（プログレッシブWebアプリケーション）のPush通知アプリを作成する方法についての詳細な手順を以下に示します。これはPart1であり、Firebaseのセットアップと基本的なPWAの設定に焦点を当てます。以...
PWA（プログレッシブウェブアプリ） 【PWA】iOS 16.4のPWA（プログレッシブウェブアプリケーション）にアプリケーションバッジを設定する
iOS 16.4のPWA（プログレッシブウェブアプリケーション）にアプリケーションバッジを設定するには、Navigator.setAppBadgeを使用できます。以下は、このタスクを実行する基本的な手順です。Service Workerの登...
PWA（プログレッシブウェブアプリ） PWA（Progressive Web App）とFirebase Cloud Messaging（FCM）を使用してプッシュ通知の仕組みを作る
PWA（Progressive Web App）とFirebase Cloud Messaging（FCM）を使用して、プッシュ通知の仕組みを説明します。PWA（プログレッシブ Web アプリケーション）の概要PWAは、ウェブアプリケーショ...
PWA（プログレッシブウェブアプリ） Progressive Web App (PWA) と Firebase Cloud Messaging (FCM) を組み合わせてPWAからプッシュ通知を送信する仕組みとサンプルコード
Progressive Web App (PWA) と Firebase Cloud Messaging (FCM) を組み合わせて、PWAからプッシュ通知を送信する仕組みと、サンプルコードを説明します。Firebase プロジェクトのセッ...
PWA（プログレッシブウェブアプリ） WordPress（ワードプレス）をプログレッシブウェブアプリ（PWA）に変換する
WordPress（ワードプレス）をプログレッシブウェブアプリ（PWA）に変換するプロセスは、一般的なウェブサイトをPWAにアップグレードするプロセスと似ています。WordPressをPWA化する一般的なステップを示します。サービスワーカー...
PWA（プログレッシブウェブアプリ） 【WordPress】WordPressをPWA化できる便利プラグイン「PWA」
Progressive Web App（PWA）は、ウェブサイトをネイティブアプリのような体験を提供することを目指した技術です。WordPressサイトをPWA化するための便利なプラグインが「PWA」です。PWAプラグインとは？このプラグイ...
PWA（プログレッシブウェブアプリ） Lighthouse（ライトハウス）｜SEOチェックができるChrome拡張機能
Lighthouse（ライトハウス）拡張機能とは？Lighthouse（ライトハウス）は、Googleが提供するオープンソースのウェブサイト品質向上ツールであり、主にウェブページのパフォーマンス、アクセシビリティ、ユーザビリティ、SEO（検...
PWA（プログレッシブウェブアプリ） WordPress（ワードプレス）をプログレッシブウェブアプリ（PWA）化する流れについて
WordPress（ワードプレス）をプログレッシブウェブアプリ（PWA）に変換するには、いくつかの手順を踏む必要があります。以下に、一般的な手順を示します。Service Worker の追加Service Worker の追加: Serv...
PWA（プログレッシブウェブアプリ） Next.jsでGenerateSWプラグインを使用する｜workbox-webpack-plugin（PWA化）
GenerateSWプラグインを使用するNext.jsでGenerateSWプラグインを使用してService Workerを構築する場合、以下の手順を実施できます。これにより、Progressive Web App（PWA）機能をNext...
PWA（プログレッシブウェブアプリ） Build failed because of webpack errors｜next-pwaプラグインの設定に問題？
next-pwaプラグインの設定に問題？このエラーは、おそらくnext-pwaプラグインの設定に問題があるために発生しています。Failed to compile.Please check your GenerateSW plugin co...
PWA（プログレッシブウェブアプリ） next-pwaとは？Next.jsにnext-pwaをインストールする流れ(Part1)
next-pwaとは？next-pwaは、Next.jsアプリケーションにProgressive Web App (PWA)の機能を追加するためのプラグインです。next-pwaを使用すると、Next.js アプリケーションをプログレッシブ...
PWA（プログレッシブウェブアプリ） Vercel上に環境構築したNext.jsでPWAを導入する｜nextjs-notion-starter-kit（Part1）
以下はVercel上にnextjs-notion-starter-kitを使用してNext.jsでPWAを導入する手順です。nextjs-notion-starter-kitとは？nextjs-notion-starter-kitは、Not...
PWA（プログレッシブウェブアプリ） manifest.jsonとは？定義ファイルについて
manifest.jsonとはmanifest.jsonは、Webアプリケーションやブラウザ拡張機能の開発に使用されるJSONファイルです。このファイルは、アプリケーションまたは拡張機能の基本情報や設定、アイコンなどのリソースの場所を定義し...
PWA（プログレッシブウェブアプリ） PWA（Progressive Web Apps）とは？PWAのメリットや作り方について
PWA（Progressive Web Apps）とは？PWA（Progressive Web Apps）／プログレッシブウェブアプリは、Web技術を使用してネイティブアプリのような動作を実現することができるアプリです。PWAは、以下の手順...
PWA（プログレッシブウェブアプリ） PWA（Progressive Web Apps）とは？メリットや具体例について
PWAとは?PWAとは、「Progressive Web Apps」の略称で、Webアプリケーションの一種です。従来のWebアプリケーションとは異なり、スマートフォンやタブレット、デスクトップなどの様々なプラットフォームで利用でき、ネイティ...
PWA（プログレッシブウェブアプリ） 【GoogleChrome】デスクトップにGoogleアプリのショートカットを作る方法
GoogleChromeからGoogleアプリ呼び出しするまずは、「新しいタブ」を開きます。ウィンドウの上の方の「＋」アイコンをクリックするか、「Ctrl+T」を押します。すると、画面の右上に・・・が９個並んだアイコンがあります。ここを押す...
