フロントエンドのデベロッパーが2021年に向けて何に注目すべきかを紹介します。 特に上級職や転職など、ステップアップを目指す人は要チェックです！ 10 Things Front-End Developers Should Learn in 2021 by Simon Holdorf 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フレームワーク 2. 静的サイトジェネレーター（SSG） 3. JAMstack 4. プログレッシブウェブアプリ（PWA） 5. GraphQL 6. コードエディタ/IDE 7. テスト環境 8. クリーンなコード 9. Git 10. ソフトスキル 終わりに はじめに 2021年は、フロントエンドの開発がテクノロジー業界で最もホットなトレンドの1つになることは間違いないでしょう。フ
マッチングアプリ強者を体験できる PWA 開発で、Web プッシュ通知を理解しよう - Qiita
どうも、親からもらったお年玉でマッチングアプリを始めるも、いいね 0 件のまま 3 ヶ月で退会した@sadnessOjisan です。 今日はタイトルの通り、マッチングアプリ強者を体験できる PWA を開発します。具体的には、いいね 通知がたくさん届くアプリを開発します。なおこのアプリは「通知止まらん www」を体験できるアプリを作ったの影響を深く受けました。ただし、これから作る push 通知体験アプリでは、通知の疑似体験ではなく本当に通知が届きます シンプルにプッシュを送るだけのコード: https://github.com/sadnessOjisan/simple-push マッチングアプリ っぽいUIがついたコード: https://github.com/sadnessOjisan/simple-push-ui 書いた動機 この記事では Firebase を使った web push
PWA(Progressive Web Apps)対応サイトの作り方・実装方法まとめ・入門 － AWS上で学習したPWA導入例とLighthouse Report Viewerの使い方 - NRIネットコムBlog
小西秀和です。 現在、AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 概要編などAWSのサーバーレスな静的ウェブサイトホスティングをテーマにしたブログ記事を執筆しています。 今回もAWSは関係しますが、フロントエンドに近い話題で、最近動向が本格的になってきたと感じているPWA(Progressive Web Apps)について私が自主的に学習した内容を記事にしてみました。 私の場合はAmazon S3、Amazon CloudFront、AWS Certificate Manager、Amazon Route53を使用した静的ウェブサイトに最小限のコンテンツをデプロイしてPWAの実装について学習しました。 また、Lighthouse Report ViewerというPWAなどの品質テストができるツールを使用して、PWAの基準に合格し、Pe
Service Workerがもつ圧倒的な力。SEO担当者は変化に適応が必要 | Moz - SEOとインバウンドマーケティングの実践情報
PWA、SPA、Service Workerとは？（前編で解説）SPAを可能にするApp Shellアーキテクチャ（中編で解説）Service Workerがもつ圧倒的な力まとめ3. Service Workerがもつ圧倒的な力最初にはっきりさせておきたいことがある。それは、ここまでで解説してきた「SPA」と、ここから取り上げる「Service Worker（サービス・ワーカー）」は、互いに排他的なものではないということだ。 つまりこの2つは共存するものだということだ。どちらもPWAと呼ばれるものの基盤となっているが、SPAではないPWAをつくることも可能だし、従来の静的なウェブサイト（クライアントサイドでレンダリングする処理がないサイト）にService Workerを統合することもできる（近い将来、そのようなサイトが増える僕は思っている）。 さらに、Service Workerはウェブ
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
今回の話はWasmというよりもService Workerの話がメインになりますが、WasmとService Workerを組み合わせることで、ブラウザー上でサーバー処理をリアルに再現することができるので、このタイトルにしています。 まずは動画をご覧ください。 見ていただくと分かるように、ブラウザー上でPHPのコードを書くとその実行結果が右側に表示されています。 特に面白い点が、お問い合わせフォームのPOST後の処理までもブラウザー上だけで実行できているという点です。 これはWasmとService Workerを組み合わせて実現しています。 大体以下のようなプロセスで実現しています。 Wasmはブラウザー側でも実行可能ですが、あえてService Worker上で実行しているのは、URLへのリクエストに対してそのリクエストにインターセプト（介入）することで、POST後の処理などもブラウザ
PWAをNativeAppだと錯覚させる
こんにちは、@kaa_a_zuです。PWAという単語を聞いて、皆さんは何を想像しますか？A2HS、オフライン利用、プッシュ通知など様々な機能があるかと思います。今回は、あまり知られていないけど、WebAppを確実にNativeAppに近付ける機能についてご紹介をします。また、この記事は 2021年のPWA(Progressive Web App)のアドベントカレンダー 19日目の内容になります。 私が想定している読者は、全てのWeb開発に関わる方々です。中でも「既にPWAサービスを展開している」「既存のPWAを今すぐにNativeAppに近づけたい」という開発者に届けることができたら嬉しいです。 目次 PWA と ProjectFugu について マニフェストファイルの基礎 さらにNativeAppに近付ける マニフェストファイル(2021年末版) 1. PWA と ProjectFugu
FirestoreとLINE Messaging APIでチャットシステムを内製してる話 〜運用での学びを添えて〜 - Leverages Tech Blog
はじめに はじめまして！ Leverages（レバレジーズ）Advent Calendar 2019 18日目担当の吉澤です。 普段は、看護師向けの転職サイトや社内システムの開発・運用などをしています。 今回は、LINEでの顧客対応に用いられるチャットシステムの構築についてと実際運用してみてどうなの？みたいなところを書いていこうと思います。 何作ってるの？ ↓ざっくりこんな感じのやつを作っています。 開発に至った背景については以下の記事に書かれています。 markezine.jp LINEのMessaging APIとFirestoreを用いて、社内のSFA/CRMシステムから顧客とLINEのやり取りができるような機能です。 以下、内製のSFA/CRMシステムを社内システムと略します。 構成 全体的な構成としては以下の様になっています。 サーバーサイド まず、ユーザーがメッセージを送るとL
Service Worker のライフサイクルとスコープを理解する - 30歳からのプログラミング
Service Worker は独自のライフサイクルを持っている。ブラウザにインストールされ、有効化され、そして新しい Service Worker に置き換えられる。 Service Worker を正しく使うためには、このライフサイクルに対する理解が不可欠である。これを理解していないと、意図した通りに動かせず、古い Service worker が動作し続けてしまうなどの不具合を起こしてしまう恐れがある。 そのためこの記事では、Service Worker はどのようなライフサイクルを辿るのかを見ていく。 また、Service Worker の挙動には「スコープ」という概念も影響してくるため、スコープについても説明する。 プッシュ通知やオフライン対応などの、Service Worker を使うとどんなことが出来るようになるのか、といったことについては扱わない。それらの機能の基盤である
PWAは、Webサイトを「アプリ化」する技術のことで、現在では多くのWebサイトに取り入れられています。 その理由は、ユーザーエクスペリエンスの向上につながり、アプリよりも開発コストを削減することができるからです。 そこで本記事では、PWAとは何か、導入するメリット・デメリットなどを紹介します。Webサイトのアプリ化を検討している方は、ぜひ参考にしてみてください。 PWAとは「Progressive Web Apps」の略で、Webサイトをネイティブアプリのように利用できるようにする仕組み・技術のことです。 ネイティブアプリとは、iPhoneならApp Store、AndroidならGoogle Playといったアプリストアからインストールして使用するアプリのこと。「アプリ」と聞いて多くの人がイメージするのが、このネイティブアプリでしょう。 PWAを実装したWebサイトは、オフラインで動作
令和4年のPush通知を改めて整理する
はじめに iOSのPush通知は定期的にアップデートを繰り返しており、常に最新の技術を追っていく必要があります。 本記事では令和4年時点での全体像把握のため、概要の整理を行いました。 ※ あくまで全体感のキャッチアップを目的としているため、各トピックの詳細な解説は行っていません。 Push通知とは サーバーサイドから、任意のタイミングでユーザーの特定端末に通知を送信できる仕組み AppleのPush通知基盤であるAPNsに通知の送信をリクエストし、そこからユーザー端末に対してデータが送信される 似たものとしてローカル通知があるが、こちらはアプリ内の特定タイミングで通知を登録するもの 公式ドキュメントはこちら 要素 APNs Appleが提供しているPush通知基盤 ユーザー端末へのPush通知の送信はここを介して行われる Production環境とSandbox環境がある Producti
React JSを使用した【PWA】化の構築方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
GoogleはProgressive Web App(PWA)という新しいテクノロジーを提供しました。 PWAテクノロジーは市場に出回ってからしばらく経ちますが、その人気はここ数年で急上昇しております。 PWA開発の基本と定義を見ていきましょう。 PWAとは？ PWAで構築する理由 ReactでPWA Webアプリ作成 Manifest.json アプリのビルド Service Workerの登録 最後に PWAとは？ PWA（Progressive Web App）は、Webアプリケーションとネイティブアプリケーションの利点を組み合わせたアプリケーションであり、ハードウェア機能を含めたクロスプラットフォームアプリを提供します。 PWAは、ネイティブアプリよりも開発とサポートが迅速で、低コストであるため、注目されています。 この技術は、モバイルアプリとWebサイトの両方で最高のユーザーエク
久しぶりに、所得税・住民税・事業税・国保の計算をバージョンアップしたいなぁと考え、必要性はそこまでないですが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 ┌──────────
WebWorkerでゴリゴリの重い処理をさせて横から制御したい時の手段 | g200kg Music & Software
これは Javascript のかなり細かい部分の話なので似たようなケースで困った事がある人以外にとってはどうでも良い話だと思いますが......。 JavaScript は元々シングルスレッド構造なのであまり重い処理をさせるには向いていないのだ、という事は昔から言われていました。 重い処理をしようとした時にまず影響を受けやすいのは UI 周りの動作です。 UI をちゃんと動かしつつ重い処理をさせるためには、処理を小分けにしてタイマーから駆動する等の手法がとられます。 またこの時、コールバックで小分けにした処理を繋げるとソースが見づらくなるので Promise や async/await を使う、という手段が定石となっていったのですが、そもそも、ひとまとまりの重い処理をやらせたいならやっぱり別スレッドで走らせたい、という事で WebWorker というものが作られました。 これによって J
ServiceWorkerの事前読み込みとキャッシュ化でプロダクトを高速化した話 - KAKEHASHI Tech Blog
はじめに こんにちは、KAKEHASHIのMusubiInsightチームでエンジニアをしている高田です。 MusubiInsightとは、薬剤師さんの業務データを可視化するBIツールになります。 そんなMusubiInsightにおいて、表示の高速化を狙いにServiceWorkerという技術を導入したので、紹介したいと思います。 MusubiInsightの課題 ServiceWorkerが何か、という話をする前に、MusubiInsightの課題について触れておきます。 ありがたいことに、MusubiInsightのユーザー数は堅調に増加していますが、それに伴いパフォーマンス低下の課題が浮き彫りになってきました。 特に、薬局数や薬剤師数の多い法人様では1リクエストでのAPIの計算量が大きく、なかなかレスポンスが返ってこないために、ユーザー体験を損なってしまっていました。 そこで、チー
2019年もあと残りわずか。 年末は振り返りをする良い機会ですよね。 そんなわけで今年の Chrome の進化の話や、Chrome 周りの出来事をまとめていきたいと思います。 自分の主観でインパクトが大きかったものから順番に上げていきます。 ※ 本記事は STORES.jp Advent Calendar 2019 - Adventar の10日目の記事です。 Native lazy loading ページ表示速度改善でよく使われる手法の画像の lazy load（遅延読み込み）。 lazy load は今まで lazy load 用の JavaScript のライブラリを読み込んで実装するのが一般的でしたが、Chrome 76からの機能でブラウザの機能として lazy load を実行できるようになった、というものです。 lazy load をさせたい要素に対して、loading="la
週刊Railsウォッチ（20200428後編）Rubyのバックトレース順序が戻る、KubernetesでRailsをスケール、セキュリティソフト入れますか？ほか｜TechRacho by BPS株式会社
2020.04.28 週刊Railsウォッチ（20200428後編）Rubyのバックトレース順序が戻る、KubernetesでRailsをスケール、セキュリティソフト入れますか？ほか こんにちは、hachi8833です。ついさっき見つけた記事がよかったので貼りました。 元記事: 世界各地の親が｢ネット授業｣に悲鳴を上げる訳 | ほしいのは「つかれない家族」 | 東洋経済オンライン | 経済ニュースの新基準 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 毎月第一木曜日に「公開つっつき会」を開催しています: お気軽にご応募ください ⚓Ruby ⚓Rubyのバックトレース順序が戻る Wow! I really appreciate th
目標：ServiceWorkerにキャッシュを保持して、とりあえずオフラインでも表示できるようにする。 PWAやってみたい ページスピードあげたい はじめに そもそもサービスワーカーって何!?という方はこちらの記事が分かりやすかったです。 参考：Service Workerってなんなのよ (Service Workerのえほん) 実装するにあたりWorkboxというGoogleのライブラリを使います。PWAのライブラリというよりはサービスワーカーの設定が簡単にできるライブラリという認識です。（※そのためホーム画面追加やプッシュ通知はこのライブラリには含まれません。多分。） 今回は最も簡単な方法をご説明したいので、GulpやWorkboxCLI等のビルトツールは使いません。キャッシュしたい（オフライン対応させたい）リソースを地道に書いていきます。（別の記事で書きます） Servicework
プッシュ通知はサーバーからアプリに対して通知を送信できるもので、スマートフォンのアプリ等で日常的に触れていると思います。今回はWebアプリでプッシュ通知を利用する為のPushAPIについて調べたことを紹介したいと思います。 PushAPI Webアプリがプッシュ通知を利用できるようにPushAPIが用意されています。用意されたAPIを利用することで簡単にプッシュ通知が利用できるようになっています。 developer.mozilla.org Service Worker PushAPIの説明に入る前にService Workerについて軽く説明します。 developer.mozilla.org Service WorkerはWebアプリとは別スレッドで動作し、Webアプリ、ブラウザー、ネットワークの間にいるプロキシサーバーのような存在です。WebアプリごとにこのService Worke
【Other】【CSS / jQuery / javascript】PWAでプッシュ通知を実装してみる（１）準備と解説｜虹色ミツバチ
NOTIFICATION 当サイトの更新をプッシュ通知で受け取ることができます。 プッシュ通知を受け取る プッシュ通知を解除する PWAでプッシュ通知を実装するのが大変だったので書いておきます。 目標はこんな感じ。 freoをPWA化する プッシュ通知の購読をサイトから簡単に行えるようにする プッシュ通知の送信は手動で行うものとする（サイトの更新のお知らせとか簡単なものしかしないので） 色々やって結果がこれ。 サイトをWindows・Android・iOSにインストールできるようになった 一度キャッシュした画面ならサイトをオフラインでも閲覧できるようになった サイトの表示が軽くなった サイト上にプッシュ通知の購読状況が表示されるようになった サイト上でプッシュ通知の購読開始・購読停止ができるようになった フォアグラウンドのGoogleChrome、Firefoxを利用している複数人に対して
背景 現在のWeb開発では、複雑なアプリケーションの要件や、複数のタブの使用の普及に伴い、フロントエンドエンジニアは異なるタブ間のデータ通信や共同作業の問題を解決する必要があります。これには、データの共有、リアルタイム通信の実現、あるタブでの操作が他のタブに即座に反映されることの確保などが含まれます。オンラインのチームコラボレーションツールでは、複数のタブで同時にドキュメントを編集することができるようにしたり、電子商取引サイトでは、ユーザーが1つのタブで商品をカートに追加し、別のタブでカートのリアルタイム更新を確認できるようにする必要があります。特に、Ptengine では、図1に示すような視覚的なイベント設定プロセスにおいて、タブ間通信が必要です。 本文では、さまざまなタブ間通信の方法について詳しく説明し、実際の課題の解決方法を理解するのに役立ちます。初心者でも経験豊富なプロフェッショナ
直近プッシュ通知の実装が必要になったためハマったところ中心に結果をメモる。 受け取り側 pwa-moduleはOneSignalをサポートしているため、Nuxtでプッシュ通知をやりたい場合これを使うのが一番簡単。 pwa.nuxtjs.org とりあえずpwa moduleとone signal moduleを入れてnuxt.config.jsに設定を書けば受け取り側の設定は終わる。 yarn add @nuxtjs/onesignal @nuxtjs/pwa nuxt.config.js // 省略 modules: [ '@nuxtjs/onesignal', '@nuxtjs/pwa' ], oneSignal: { init: { appId: 'One Signalコンソールで発行したID', allowLocalhostAsSecureOrigin: true, // loca
Workbox + webpackでServiceWorkerのオフラインキャッシュと戯れる - Hivelocity (ハイベロシティ) デジタルでビジネスを最適化
HivelocityでフロントエンドエンジニアをしているHaradaです。 先日PWAのカンファレンスに参加する機会があったので、最近のPWA事情について知識をアップデートしておこうと前から気になっていたWorkboxを使ったデモを作成してみたので、その辺りを少しご紹介したいと思います。 せっかくなので、将来的に自社プロダクトへの実装も視野に入れて、今回はwebpackからWorkboxを使用する構成でトライしてみました。 Workboxとは 普段開発に従事していない人でも、トレンドとしてPWA（Progressive Web Apps）という言葉は聞いたことがあると思います。 端的に言うと、Webサイトでスマホアプリのような機能や動作を実現するための仕組みです。 一般的にPWAの利点として主に以下のようなものが挙げられています。 ホーム画面へのアイコン追加プッシュ通知オフラインでも動作す
Web のお仕事をしなくなって、ここ最近 Web のキャッチアップがめっきり減っている今日この頃。 Web のお仕事に携わってた頃は、FCM を使った WebPush の実装は経験があるのですが、FCM を使わずにできるようになっているということで、リハビリがてら VAPID での Web Push API を改めて実装してみました。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VAPID WebPush Demo</title> </head> <body> <button id="btnWebPushTest">プッシュ通知テスト</button> <script src="js/vapid_demo.js"></script> </body> </html> let convertedVapidKey, su
スマートフォンアプリではおなじみのプッシュ通知ですが、ウェブサイトからもプッシュ通知できることをご存知でしょうか？ JavaScriptのServiceWorkerとPush APIを使用することで、ウェブサイトからでもスマートフォンアプリと同様にユーザーにプッシュ通知を送ることができます。また、モバイルだけでなくデスクトップでも通知を行うことができるため、ユーザーエンゲージメントの向上の手法として有効です。 プッシュ通知のデモ プッシュ通知を行う簡単なサンプルを用意しました。Chrome 42以降のブラウザで確認してください（2018年3月現在のChrome 65で動作することを確認しています）。 「プッシュ通知の配信設定」のトグルを選択すると、「cURLコマンド」のボックスにコマンドが生成されます。このコマンドをMacをお使いの方はTerminal上から実行してください。Windows
PWAとは？ PWAとは、「Progressive Web Apps」の略称で、PCやスマホでWebアプリを表示する際に、ネイティブアプリのような動作を可能にする仕組みのことです！ PWAを導入するメリットとして OSによる制限がないこと プッシュ通知を送ることができること ホーム画面にアイコンを設置できること Webアプリ上でキャッシュを使用でき、ローカルのキャッシュに保存できるため、再びアプリを開いた際の読み込みのスピードが従来よりも速くなること などが挙げられます！ 実装 まずは、app/views/layouts/application.html.erbに以下のように2箇所追記します！ <!DOCTYPE html> <html> <head> <title>Example</title> <%= favicon_link_tag('favicon.ico') %> + <link
Firebase Cloud Messaging でウェブプッシュ通知するFirebase Cloud Messaging(FCM) でウェブプッシュ通知の送受信をします。プッシュサービスを含むプッシュ通知を取り巻く全体像を広く浅く解説します。通知メッセージのクリック処理や、ユーザートークンの削除についても触れています。 はじめにFirebase Cloud Messaging (通称 FCM) はクロスプラットフォームにメッセージ送信する仕組みです。 これを使うことで、Web プッシュプロトコル を考えることなく、プッシュ通知を実装できます。 FCM は無料で利用できるので、ユーザーエンゲージメントを高める手段として有効です。 今回は、FCM をウェブアプリで使う方法を紹介します。 FCM と利用制限FCM は 多くの Web API を利用します。具体的には、Window スコープでは
Chrome 80 がリリースされ、デベロッパー向けに多数の新機能が追加されました。 以下がサポートされています。 ワーカー内のモジュール JavaScript でのオプションのチェーン 新しいオリジン トライアル オリジン トライアルから卒業した機能 その他、 ピート・ル・ページです。Chrome 80 のデベロッパー向け新機能を詳しく見ていきましょう。 モジュール ワーカー ウェブワーカー向けの新しいモードである Module Worker を利用できるようになりました。これは、人間工学に基づいた、JavaScript モジュールのパフォーマンス上のメリットです。ワーカー コンストラクタは、<script type="module"> に合わせてスクリプトの読み込みと実行の方法を変更する新しい {type: "module"} オプションを受け入れます。 const worker =
はじめに 聖地の写真を共有するサービス「Holy Place Photo」にService Workerによるキャッシュを実装しました。 そのためネットワークがオフラインでも下記のようにサクサク動きます!!!! Service Worker Demo pic.twitter.com/t04xSRl7B2 — tiwu (@tiwu_official) 2019年2月25日 また、LighthouseのPWAのスコアは100を取れました。 この記事ではService Workerを利用したキャッシュの設計、Laravel + Vue.jsのWebアプリケーションでの実装を解説していきたいと思います。 注意書き 僕の考えた最強のService Workerのキャッシュの設計のため唯一の正解ではありません キャッシュの設計はサービスによって違うと思うのでこの記事は一つの参考にしてください まずS
【Other】【CSS / jQuery / javascript】PWAでプッシュ通知を実装してみる（３）Firebaseでプッシュ通知に必要なトークンを処理する｜虹色ミツバチ
前回までの記事で、PWA化にはmagnifest.jsonとserviceworker.jsが必要と解説し、そのサンプルを掲載しました。 今回からは目標だったプッシュ通知について解説します。 プッシュ通知の仕組みとFirebaseを利用することにした経緯 PWAを使ったプッシュ通知では、ブラウザで「プッシュ通知を受け取る」設定をした時に、「トークン」が発行されます。 これはブラウザ単位で発行されるので、PCのGoogle ChromeとスマホのAndroidでは別々のトークンが発行されます。 この「トークン」に対して、PWAを利用したサイト（ウェブアプリ）の管理者がサーバーからCurlコマンドを叩くことでプッシュ通知を送信します。 すなわち、「トークン」をどこかに保存しておく必要がありそうです。 トークンを取得したとしても、プッシュ通知を１件１件送っていくのは時間がかかりそうな気がします。
PWA(Progressive Web Apps)とは、Webサイトにネイティブアプリのような機能を持たせたものです。ブラウザからインストールできて、オフラインでも動作させること可能になります。また、特別なツールは必要なく、HTMLとJavaScriptで作成できます。今回は、PWAとはどのような仕組みで構成されるのか確認してみましょう。 今回作成するPWAのサンプル - ファイルを4つ用意すると作れる PWAの機能について WebサイトがPWAに対応するとどんな良いことがあるのでしょうか。まず、ネイティブアプリのように、インストールできるというのが大きなメリットです。スマートフォンであれば「ホーム画面」にアプリを配置できます。PCでもアプリケーションフォルダにショートカットが作成されるので、起動が容易になります。例えば、以下はChromeでTwitterを開いてインストールしたところです
作ったもの https://ramen-sender.vercel.app どんなアプリ？ プッシュ通知を購読し、プッシュ通知送信ボタンを押すとプッシュ通知を購読している自分も含めたユーザ全員にラーメン画像のプッシュ通知を送りつけることが出来ます。 また、飯テロといえば深夜なので毎日24時にラーメン画像がプッシュ通知で送られてきます。 送られてくるラーメン画像はすべて私が撮ったものです。 なんで作ったの？ iOSのsafariのPWAでもPush通知ができるようになる！ iOS16で実装される！ みたいな情報があったから、iOS16出たしなんか作ってみよう！って思ってたんだけど 実際に使えるようになるのは2023年中(予定)らしい。 はい解散！ ではなく、その代わり？というか前段なのかな、MacOS 13 Venturaのsafari16でプッシュ通知が対応した1らしい！っていうのを見つけ
AWS Amplify の ServiceWorker で Web Push 対応を実装してみる - クライアント編 - Qiita
Web Push、送りたいことありますよね。 この記事は Web Push 通知を使うアプリを AWS Amplify で作ってみる話です。 特にクライアント側を AWS Amplify でどう実装するかを見てみます。 当初サーバー側もあわせて書こうとしたのですが、分量が多くなりそうだったので今回は一旦クライアント編として、サーバー編はまた Amplify の API カテゴリを絡めたものを後日書きます（たぶん）。 Web Push やりたいときにやらなきゃいけないこと Web Push を運用しようとすると、けっこう色々やることがあります。 Push を受け取るクライアント側 Service Worker の実装 購読状態管理、Service Worker 登録等を行うフロントアプリケーションの実装 購読処理時に払い出されるエンドポイントをサーバーサイドに送信 Push を送るサーバー側
はじめましての方ははじめまして。 またお前かな方はこんにちは。 Nな人（えぬなひと）と申します。 普段はQiitaや自前ブログ「Nな人のWeb示録」で記事を投稿しておりますが、 今回はノリでZennに記事を書いていこうと思います。 では、やっていきましょうか。 目的 service workerなるものを使えば、ブラウザでPush通知が使える！（iPhone以外） アプリケーションではなく、Webの技術で作れるってすごい！先進的！（iPhone以外） ということで、ServiceWorkerで個人的に一番やってみたかった、WebPushを実装していこうと思います。 これでアプリを作らなくてもPush通知が送れるようになりますね！（iPhone以外） とても便利な世界になってきました。（iPhone以外） お断り ServiceWorkerには 「manifest.json」や「servic
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと
ServiceWorkerの落とし穴8選 - Repro Tech Blog
Service WorkerとWasmを組み合わせてサーバー処理をブラウザーでリアルに再現する
PWAとは？Webサイトを「ほぼアプリ化」する方法 | 株式会社パンタグラフ
【Vue.js】Vue CLI 3のプロジェクトをPWA化する | kawadeblog
Chrome周りで2019年に変化したことまとめ - Qiita
WorkboxでPWAを導入する方法～オフライン対応編～ - Qiita
Push APIでプッシュ通知を実装 - interprism's blog
マルチ通信：クロスタブ通信の多様な選択肢の探究 - Qiita
Nuxtのpwa-moduleでプッシュ通知令和版 - うしろのこの本ください
そこそこ小さくまとめたVAPID Web Push通知デモ(Node.js) - Qiita
Webサイトからプッシュ通知を送ろう！ JavaScriptでのプッシュ通知の実装方法 - ICS MEDIA
【Rails】WebアプリにPWAを導入してネイティブアプリっぽくしてみた！ - Qiita
Firebase Cloud Messaging でウェブプッシュ通知する | miyauci.me
Chrome 80 の新機能 | Blog | Chrome for Developers
僕の考えた最強のService Workerキャッシュ戦略で爆速サービスを作った - Qiita
ゼロからはじめるJavaScript(14) ブラウザからインストールできるアプリPWAを作ってみよう
ラーメン画像をプッシュ通知で送りつけあって飯テロするクソWebアプリを作った - Qiita
JSとPHPでWebPushを送信するWebアプリケーションを作ってみる