Learn PWA | web.devStay organized with collections Save and categorize content based on your preferences.
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
Progressive Web Apps (PWA) 学習者のメモ その1 (Service Worker) - Qiita
この記事について PWAについての理解がふわっとしていたので、おさらいし直した内容を記しました。 2019年2月時点のメモとなりますが、誤記などありましたらどうぞご指摘ください。 Progressive Web Apps とは Google が提唱・推進しているアプリ https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja 概念はGoogle の説明を参照するとして、仕様面で見ると Web技術 (html、css、JavaScript、および各種 Web API) を利用したアプリ ウェブサイトで公開可能、Appストアを経由せずに配布できる スマートフォンにインストール可能 Service Worker を利用し、アプリプログラムをキャッシュすることで、ネットにつながっていなくても動作可
ServiceWorkerを簡単に書けるworkbox-swの使い方 - Qiita
GMOペパボ Advent Calendar 2017の11日分のエントリーになります。 皆さんはPWA(Progressive Web Apps)をご存知でしょうか。 分かりやすさを優先して言うならば、新しい技術によってネイティブアプリのような動作が可能になったWebアプリケーションのことで、オフラインで動作したりプッシュ通知が送れるWebアプリケーションを実現することができます。 （詳細はGoogle Developersや私の発表スライドをご参照ください） さて今回はPWA作成にあたってとても便利なライブラリであるworkbox-sw（以下、workbox）の紹介記事となります。 workboxとは簡単な記述で最適なServiceWorkerのコードを生成してくれるライブラリです。 PWA自体どうやらまだ認知度が低く、それを作るためのライブラリ関連もまた情報不足だったため今回の記事を
workbox + webpackでServiceWorkerを使いPWA化してみた - Qiita
Web App Manifest 実現したこと ServiceWorkerを有効に manifest.jsonを設置 HTTPS対応 ServiceWorkerを有効に workbox-sw + webpackで実現 workbox Google製ServiceWorkerのコードを生成を支援してくれるライブラリ インストール npm install --save-dev workbox-sw # webpackでworkboxを使うためにプラグインもインストール npm install --save-dev workbox-webpack-plugin const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); const dist = __dirname + '/dist' // webpack config { pl
最大公約数的なServiceWorker制作から見るPWAの勘所
WordPress の PWA プラグイン制作を通して考えた、PWA実装のキーになる ServiceWorker によるキャッシュ制御の勘所をお話ししました。 PWA 設計時のヒントになれば幸いです。Read less
冒険を作ろう。HTML5で動くRPGまとめ - ニフクラ mobile backend（mBaaS）お役立ちブログ
平素より弊社サービスをご利用いただきまして誠にありがとうございます。 ニフクラ mobile backendは、2024年3月31日をもって本サービスの提供を終了させていただくこととなりました。 提供終了するサービスにつきまして、以下の通り更新いたします。 提供終了するサービス ■提供終了するサービス ・ニフクラ mobile backend ・Fujitsu Hybrid IT Service Digital Application Platform mobile backend ■対象 ・サービスをご利用中のすべてのお客様 ■サービス終了日 ・2024年3月31日 ■サービス終了に伴う影響 ・ニフクラ mobile backendは、2023年11月30日を持ちまして新規受付は終了させていただきます。 ・Fujitsu Hybrid IT Service Digital Applica
Debugging Service Workers
プログレッシブ ウェブアプリ: オフライン コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 1. ようこそ このラボでは、既存のウェブ アプリケーションをオフラインで使用できるようにします。これは、プログレッシブ ウェブアプリ ワークショップの一連のコンパニオン Codelab の最初です。このシリーズにはさらに 7 つの Codelab があります。 学習内容 Service Worker を手動で作成する 既存のウェブ アプリケーションに Service Worker を追加する Service Worker と Cache Storage API を使用してリソースをオフラインで使用できるようにする 必要な予備知識 簡易 HTML と JavaScript 必要なもの Service Worker をサポートするブラウザ 2. 準備 まず、この Co
Ionic Frameworkとは
Overview Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as Angular, React, or Vue. Alternatively, it can be used standalone without any frontend framework using a simple script include. If you’d like to learn more about Ionic before diving in, we created a
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 - エンジニアHub｜Webエンジニアのキャリアを考える！
PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装 PWAをテーマにしたコミュニティ「PWA Night」を運営する菅家大地さんが、既存のWebアプリをPWA化する簡単な実装方法を解説します。 はじめまして、菅家（@kan_dai）といいます。普段は株式会社TAMという会社でフロントエンドをメインに、クライアントのWebサイト制作やWebサービスの開発をしています。PWA（Progressive Web Apps）をテーマにしたコミュニティ「PWA Night」の運営もしています。 さて、2018年ごろからPWAという言葉を聞く機会が多くなってきました。2019年現在、毎月コンスタントにPWAに関する仕事の相談を受けるようになっており、PWAへの関心の高まりを感じます。日本経済新聞やスマートフォン版Yahoo! Japanといった有名サービスでの
Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法
Web Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法※当サイトにはプロモーションが含まれています。 1. はじめにウェブページの弱点の一つは、インターネット接続環境でないと見られない（使えない）ことです。 Google は PWA (Progressive Web Apps) というアプリケーション開発手法を提唱しており、これに従えばオフラインでも動作するウェブアプリケーションを作成することができます。但し、かなり面倒ですし、単純なウェブページを作りたいだけの場合はオーバースペックと言ってよいでしょう。 本ページでは、PWA でも使われている Service Worker という技術を使って、ウェブページまたはシンプルなウェブアプリケーションをオフラインでも閲覧できる（動作する）形で作成する方法を紹介します。 2. 今回使用する題材以前作って本サイト
PWA勉強会を開催しました - hirarin blog
2018年3月3日ひなまつりの夜にG`sAcademyでPWA勉強会を開催しました。 勉強会を主催するのは初めてのことでとても緊張しましたが、自分が卒業したG`sAcademyでの開催であったり、クローズドな参加者募集（今回はG`sAcademy生が対象でした）であったり、周りのみなさんの協力があったおかげで有意義な時間になったと思います。 開催した経緯 当日のスケジュール 発表 LT1:PWAサンプルを作ってみた LT2:プログラミング愛してま～す！sw 編 LT3:Vuejs+GitHubPagesで始めるPWA LT4:PWAを導入した経緯 感想 開催した経緯 PWA自体は前々から興味があり、ちょっと触ってみたり（後述）記事を追っかけていました。そんな中、G`sAcademyのFacebookグループで管理者の児玉さんから「だれかPWA勉強会やらないー？」という声かけがあり、あ、じゃ
PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita
What's PWA ? Progressive Web Apps （プログレッシブ ウェブ アップス）の略 Googleが推進している、モバイルユーザーの体験（UX）向上を目的とするプロジェクト・技術のこと PWAは、わざわざApple StoreやGoogle Play Storeからインストールする必要はありません 不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。 ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。 ▼このように、Webサイトを直接ホームに追加することでアプリケーション化されます 導入事例 大手WEBサイトからで導入がはじまりつつあります コンバージョンアップにも効果的です Trivago https://www.trivago.com Twitter Lite https://mobi
PWAの実装をしてみた - hiroppy's site
そういえば PWA の実装したことがなかったなと思ったので少し触ってみた。 PWA(Progressive Web Apps) とは？ インストールが不要で、不安定なネットワークでも素早く起動し、プッシュ通知を可能にします。 また、ホーム画面にアイコンも表示でき、アプリと同様の扱いをすることが可能となります。 つまり、アプリに近づけた web ですね。 以下の記事が詳しいのでそちらを見てください;) Google Codelabs Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs wil... 目的 https, localhost でしか Service Worker は動かないので常に安全 Service Worker の更新プロセスにより常に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PWA（Progressive Web Apps）のカレンダー | Advent Calendar 2021 - Qiita
PWAdvent ❄ 24 great browserfeatures - from the first to the 24th of december 2020
Workbox Broadcast Cache Update | Workbox | Google Developers
PWAのキホン～作り方から活用どころまで～
Taking your web app offline (in a good sense)
PWA Night Conf: ScrapboxでのServiceWorkerとCacheの活用 - daiiz
