<div id="app"> <input type="text" v-model="addText" placeholder="ToDoを入力"> <button v-on:click="addToDo()">追加</button><hr> <ul v-for="todo in list"> <li>{{ todo.id }}:{{ todo.text }}</li> </ul> </div>
はじめに 先月、フロントエンドエンジニア界隈ではリニューアルした日経電子版が高速すぎてヤバイ件に注目が集まりましたね。 今自分で注目しているVue.jsと、PWAでSPAをつくるためのことはじめを記事にしようと思います。 1. PWAとは PWA(Progressive Web Application)とは、一言で言えば「ネイティブアプリのような使い勝手を実現したWebアプリ」です。 Googleのコードラボを一通りやると全体像がつかめるかと思います。 PWAでできること ホームスクリーンへの追加(Add to homescreen) PWAで作られたWebアプリケーションにアクセスした際に、ホーム画面への追加を促すことができます。 条件は下記です。 - 必要な情報が記載されたマニフェストファイルが存在する - サイトにService Workerが登録されている - HTTPS経由で配信
以下は、THE COMPLETE GUIDE TO PROGRESSIVE WEB APPSの日本語訳です。 THE COMPLETE GUIDE TO PROGRESSIVE WEB APPS Progressive Web Apps (PWA)は、モバイルアプリ開発の最新トレンドで、2018年初頭ではAndroid端末にだけ対応しています。 WebKitはSafariとモバイルSafariの技術を元に、最近(2017年8月)Service Workerをブラウザに導入する作業を開始したと発表しました。 これは要するに、遅かれ早かれiOS端末にも搭載されるということを意味するので、Appleが決心しさえすればiPhoneやiPadでもPWAを使用できるようになるということです。 PWAは画期的な新技術というわけではなく、Webベースのアプリケーションを作成するための一連のテクノロジーを識
Vue CLI 3 で PWA チュートリアル(Service Workers / Add to Home Screen / Push Notifications)Vue.jsFirebasePWAFirebaseCloudMessagingvue-cli オリジナル記事 https://blog.n11sh1.com/vue-pwa-tutorial-ja/ PWAとは? PWA(Progressive Web App) の一部に以下のような機能があります。 Service Workers Add to Home Screen Push Notifications これにより Webアプリ として開発しても Nativeアプリ 同様のUXをユーザーに提供できます。 ここらへんを Vue を使って試していきます。 Ref. Progressive Web Apps | Web | Goog
⚠️ Updated version of this article ⏩ firt.dev One year after the first initial support for PWAs on iOS, Apple released iOS 12.2 for iPhone and iPads with what it seems to be the biggest step forward in the last year, addressing the two most annoying problems we’ve been dealing with PWAs: reload effect and OAuth logins. However, as expected, the release is not free of bugs or problems, but at least
1. PWAとは? PWA(Progressive Web Apps)はGoogle Chromeエンジニア Alex Russell氏が2015年に考案した概念として知られています。特徴としてネイティブアプリのようなユーザー体験をWEBで提供するのが目的です。 PWAの特徴 FAST : パフォーマンスの良い、軽決な動作 Integrated : OSと統合されたユーザー体験 Engaging : アプリのような体験を提供 Reliable : オフラインでも動作する便利性 PWAを実現するAPI PWAを実現するために中心となる機能を提供するのが「Service Worker」です。 Service Worker Service Workerは「バックグラウンドで動作するプログラミング可能なネットワークプロキシ」のことです。Service Workerを利用するとWebページのオフライ
「PWA」は、アプリ的な機能をWebで実現する仕組みWeb担当者さんのなかには「PWA」という言葉にまだなじみがない方も多いかもしれません。 わかりやすく説明すると、「PWA」とは、スマホアプリのような機能や動作をWebサイトで実現するための仕組みです(「Progressive Web Apps(プログレッシブ ウェブ アプリ)」の略)。 ウェブ標準として定められている仕様に則ってHTML+CSS+JavaScriptで動的なサイトを作れば、 アプリストアを通さなくてもWebサイト経由で利用できスマホのホームスクリーンに起動アイコンを追加してアプリのような全画面で起動でき(ブラウザのURLバーなど非表示)ネットワーク接続がなくてもコンテンツを表示でき(キャッシュを活用)プッシュ通知もサイトから送れるそんな「アプリ的な」ものを実現できるというもの。 一番のポイントは「サクサク動くインターフェ
With iOS 11.3, Apple has silently added support for the basic set of new technologies behind the idea of “Progressive Web Apps” (PWAs). It’s time to see how they work, what are their abilities and challenges, and what do you need to know if you already have a published PWA. ⚠️ Updated version of this article ⏩ firt.dev This App is a PWA and it appears full screen -offline capable- on an iPad. It a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く