PWA導入の成果と課題 / nikkei-pwa-html5conf2018 - Speaker Deck
HTML5 Conference 2018 https://events.html5j.org/conference/2018/11/ で発表したPWAに関するスライドです。 [日経電子版 サイト高速化とPWA対応] https://speakerdeck.com/sisidovski/nikkei-high-performance-pwa [Nikkei achieves a new level of quality and performance with their multi-page PWA] https://developers.google.com/web/showcase/2018/nikkei [「改めまして、Progressive Web Appsと申します」── Web UXの新たな基準を考える] https://html5experts.jp/uskay/25391
Goodbye Electron, Hello Desktop PWAs – David Novicki – Medium
Okay maybe I am jumping the gun on this but this is some exciting news to say the least! Chrome v70’s recent announcementA recent Chrome version(v70) has released some exciting support for Desktop Progressive Web Applications on Linux and Windows. Here is Chrome’s current support list. One thing you will immediately notice is that MacOS is missing from the list. Fear not it should be here for Chro
Creating Your First Vue.js PWA Project – The Web Tub – Medium
Vue.js PWA ProjectIn our previous article, Why Progressive Web Apps, we have identified a few benefits that PWA provides to improve web applications for online and offline usage. With a bit of responsive design, Progressive Web Apps would be perfect for both mobile and desktop markets. In this article, we will cover how to build our first PWA project with the Vue.js framework by implementing the P
PWAの将来性についての考察 - astamuse Lab
デザイン部でフロントエンドエンジニアをしているkitoです。 先日、iOS 11.3のリリースでiPhoneでもPWAの一部の機能が利用できるようになりました。（プッシュ通知等は利用できない）今回は、Web界隈で急速に注目を上げ始めているPWA（Progressive Web Apps）の将来性を考察したいと思います。 いわゆるフロントエンド界隈では、新しいツールや技術が短いスパーンで登場しては消えていくということを繰り返しています。新陳代謝が激しい故に、革新的な技術がいち早く取り入れられる若々しいエコシステムは利点ではありますが、反面、苦労して学習した技術やツールが、立ちどころに古びて投資が無駄になってしまうケースも間々あります。これは現代のフロントエンドエンジニアには避けられない運命でしょう。とはいえ、それをむしろ楽しみ新しい技術の到来やそれをリードする若きエンジニアたちの登場を喜ぶべ
Progressive Web Apps on iOS are here 🚀
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
A Pinterest Progressive Web App Performance Case Study
Pinterest’s new mobile web experience is a Progressive Web App. In this post we’ll cover some of their work to load fast on mobile hardware by keeping JavaScript bundles lean and adopting Service Workers for network resilience. Why a Progressive Web App (PWA)? Some history.The Pinterest PWA started because they were focused on international growth, which led them to the mobile web. After analyzing
App Shell モデルの素振り（後編）SSR なき世界観を模索してみた
3. その他 SPA にありがちな懸念点の検討 書き終わって読み直すに、いくつかの方法論は浮かぶが思った以上にやってみねぇと分からんという感じです。 ここでは SPA + SSR における完全な HTML を生成するサーバーサイドと、SPA + BFF (Backend For Frontend) くらいのゆるやかなサーバーサイドを別のアプローチとします。どのみち完全に静的な HTML と API サーバだけで複雑な SPA を成り立たせるのは無理があるので BFF の支援は前提に入ります。 また、SPA + SSR のダルさの根源は node の CPU ぶん回し対策や、キャッシュサーバーの管理などを伴うキャッシュストラテジーの煩雑性と定義します。単純に SPA + SSR を実現するだけなら道具も成熟してきているので、さほど難しくはなくなってきているという扱いにしておきます。 3-1.
App Shell モデルの素振り（前編）webpack と Workbox を利用した構築
App Shell モデルという設計パターン App Shell モデルは、共通のガワ部分を構成する HTML、CSS、JavaScript をシェルと定義し、その中に入る動的なコンテンツ部分と構造的に分離して扱えるように設計されます。 アプリケーション シェル（App Shell）アーキテクチャは、ネイティブ アプリのように瞬時に、そして確実にユーザーの画面に読み込める Progressive Web App を構築する方法の 1 つです。 アプリの「シェル」とは、ユーザー インターフェースが機能するために必要な最小限の HTML、CSS、JavaScript です。これらをオフラインで使用できるようにキャッシュしておくことで、ユーザーが同じページに再アクセスした際に、瞬時に高いパフォーマンス が発揮されます。つまり App Shell は、ユーザーがアクセスするたびにネットワークからす
PWAの実装をしてみた - 技術探し
一年以上前の記事なので、コードが古いです。気をつけて読んでください。 PWAとは？ 目的 技術スタック Service Worker PWAのview App Shell Content キャッシュ戦略 読み込みフロー Web App Manifest デザイン FirefoxとChromeしかService Workerないけどどうするの？ ネットワーク 実装 ライブラリ webpack-offline 構成 ファイル ルーティング アセットのインストール API周り SSR 資料 さいごに そういえばPWAの実装したことがなかったなと思ったので少し触ってみた。 PWAとは？ PWA(Progressive Web Apps) インストールが不要で、不安定なネットワークでも素早く起動し、プッシュ通知を可能にします。 また、ホーム画面にアイコンも表示でき、アプリと同様の扱いをすることが可能
Apply instant loading with the PRPL pattern | Articles | web.dev
Apply instant loading with the PRPL pattern Stay organized with collections Save and categorize content based on your preferences. PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster: Preload the late-discovered resources. Render the initial route as soon as possible. Pre-cache remaining assets. Lazy load other routes and non-critical assets. In t
Why “Progressive Web Apps vs. native” is the wrong question to ask
Updated October 2022 I wrote this post in back 2016, when Progressive Web Apps were very new. Fast forward to 2022 — PWAs have been embraced by Instagram, Twitter, Tiktok, Pinterest, Telegram and many other brands, enabling fast, reliable, engaging and installable websites. The road here wasn’t easy, and many misconceptions about PWAs stood across: <strike>they only work in Chrome, they can’t be a
Android Oreo takes a bite out of Progressive Web Apps
On August, 21st after the solar eclipse, Google released the final version of Android 8 now known as Android Oreo. The sun wasn’t the only thing that was hidden for a while today, as Progressive Web Apps have acquired new problems. I’ve installed Android 8 on my Google Pixel, and I’ve tested a couple of things regarding websites and PWAs and then I have a couple of bad news to share. Android Insta
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Getting started with PWAs: an iOS nightmare – Marie Foussette – Medium
GitHub - nuxt-community/pwa-module: Zero config PWA solution for Nuxt.js
elzup.org - このウェブサイトは販売用です！ - elzup リソースおよび情報
GitHub - elzup/annictmimi: Annict comment reader client on PWA
PWAs are coming to iOS 11.3: Cupertino, we have a problem
Chrome Dev Summit 2017 - Livestream (Day 1)
DevTools Tips for Progressive Web Apps
GitHub - codebusking/next-hnpwa: HNPWA with Next.js