スキルアップを始める!

PWA(プログレッシブウェブアプリ)

PWA(プログレッシブウェブアプリ)

PWA(プログレッシブ・ウェブ・アプリ)をオフラインで表示する(part2)

前回の続きです。オフライン対応したコードを見ていきます。 コード全文 以下はPWAのコードです。 index.html: <h1>Hello, PWA!</h1> <p>This is my first Progressive Web Ap...
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 ...
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 の追加: S...
PWA(プログレッシブウェブアプリ)

Next.jsでGenerateSWプラグインを使用する|workbox-webpack-plugin(PWA化)

GenerateSWプラグインを使用する Next.jsでGenerateSWプラグインを使用してService Workerを構築する場合、以下の手順を実施できます。 これにより、Progressive Web App(PWA)機能をNe...
PWA(プログレッシブウェブアプリ)

Build failed because of webpack errors|next-pwaプラグインの設定に問題?

next-pwaプラグインの設定に問題? このエラーは、おそらくnext-pwaプラグインの設定に問題があるために発生しています。 Failed to compile. Please check your GenerateSW plugin...
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は、N...
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」を押します。 すると、画面の右上に・・・が9個並んだアイコンがあります。 ここ...
URLをコピーしました!