Progressive Web App (PWA) Links

“The web is becoming a platform for lightweight apps that can be accessed on-demand, installed without friction, and incrementally updated” from Twitter’s Lite blog article.

“Progressive web apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications.” WikiPedia

Google has been talking about PWA’s for awhile and my interest is growing in the PWA approach. “Progressive Web Apps are user experiences that have the reach of the web, and are:

• Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
• Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
• Engaging - Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.”

I recommend the PWA Fundamentals on Pluralsight from May 2017 to get a good introduction.

Here are links that I’ve gathered over the last few months. I will add more as I come across them, so keep checking back.

• Progressive Web Apps using the Angular Service Worker Google doc
  • This is being updated and is open for comments* Walkthrough from Google on building your first PWA
• A Beginner’s Guide to Progressive Web Apps & the Frontend Web - July 2017
• An Extensive Guide To Progressive Web Applications November 27, 2018
• Twitter built a PWA - April 6, 2017
• Yes, That Web Project Should Be a PWA - August 30, 2017
  • “Even with so much well-written, accessible content about PWAs freely available, misinformation abounds.”
• Google I/0 2016 app showcase
  • there are many other showcases as well (The Weather Channel, Alibab, etc)
• A community-driven list of stats and news related to PWAs
• Lyft, as a PWA tweet - November 11, 2016
• List of PWAs on GitHub
• Hacker News readers as Progressive Web Apps
• Slides from Daniel Black at a May 2017 SF Dev Meetup
• Learn Anything
• Google’s checklist
• HTMl5 articles
• Any web site can become a PWA – but we need to do better - Christian Heilman - June 27, 2017
• Progressive Web Apps The Right Way - May 25, 2017
• Ionic Dev Survey - July 2017
  • “Finally, 31.5% of developers are targeting progressive web apps. That’s a big jump for something the dev community just started talking about two years ago”
• What, Exactly, Makes Something A Progressive Web App? - September 2016
  • details on what makes for a good progressive web app.
• Will the Real Web Developer Please Stand Up? - August 27, 2017
  • a list of expectations for PWAs and a flavor for the complexities

• Putting the “App” in Progressive Web Apps - September 07, 2017

  • “It’s not one solution, it’s more like several best practices you can implement to create better web applications.”

• Apple’s refusal to support Progressive Web Apps is a detriment to future of the web - July 24, 2017

  • A word of caution, based on Apple’s approach “One thing is for sure though: We can’t just hop on the PWA train and forget about native apps completely. We need to call this what it is — a detriment to the future of the web.”

• Welcoming PWAs: Apple now supports service workers on Safari - February 21, 2018

  • “With Safari 11.1, Apple will introduce service workers to both macOS and iOS”

• Windows 10 version 1803 will bring full support for Progressive Web Apps - September 22, 2017

  • “To be clear, PWAs on the Windows Store will behave and look like native UWP apps, and Windows 10 users should not see any difference. Microsoft Teams is a perfect example of a PWA done well.”

• Microsoft’s Bold Plan to Bring PWAs to Windows 10 - October 29, 2017

  • “As a result, the Hosted Web Apps platform will blend into PWAs on Windows 10 over time, I was told.”
  • “We are providing the same support for PWAs in Windows 10 as Google does [in Android],” Burtoft said.

• Welcoming Progressive Web Apps to Microsoft Edge and Windows 10 - February 6, 2018

• MS Edge docs

• Progressive Web Apps made easy with ASP.NET Core - November 15, 2017

  • Mads Kristensen has created a NuGet package for Asp.Net Core to add middleware that will add needed PWA capabilities.

• 6 myths of Progressive Web Apps - October 6, 2017

  • “In this post, I’ll share some common myths (IMHO) about PWAs.”

• Designing For A Browserless Web - November 27, 2017

• Betting on the Web - September 8, 2017

• Web apps are only getting better - April 11, 2018

• Goodbye Electron, Hello Desktop PWAs - November 9, 2018

• The Complete Guide To Progressive Web Apps with Ionic 4

• Goodbye Electron, Hello Desktop PWAs - November 9, 2018

• Will PWAs Replace Native Mobile Apps? - December 28, 2018

• Mobile Dev Weekly - several good links - January 31, 2018

PWA Stats - “A community-driven list of stats and news”

Microsoft Edge Docs about PWA

Shared Experiences

• A Progressive Roadmap for your Progressive Web App from CloudFour - August 27, 2017
  • “One of the hidden benefits of Progressive Web Apps is that you can start right now and roll out features incrementally.”
• A React & Preact PWA Performance Case Study - September 12, 2017
  • “What they saw compared to their old mobile site was a 70%+ improvement in time to first paint , 31% improvement in time-to-interactive. and loaded in under 4 seconds over 3G for many typical visitors and on their target hardware.”
• A Pinterest Progressive Web App Performance Case Study - November 29, 2017
  • “Over 3 months, Pinterest rebuilt their mobile web experience using React, Redux and webpack”
  • “Time spent is up by 40% compared to the old mobile web experience, user-generated ad revenue is up 44% and core engagements are up 60%:”
• From SPA to PWA with ASP.NET Core 2.0 and Aurelia - December 14, 2017
• I built a Progressive Web App and published it in 3 app stores. Here’s what I learned.
• Pinterest 1 year retro
  • “Weekly active users on mobile web have increased 103 percent year-over-year overall, with a 156 percent increase in Brazil and 312 percent increase in India. On the engagement side, session length increased by 296 percent, the number of Pins seen increased by 401 percent and people were 295 percent more likely to save a Pin to a board.”
• I built a PWA and published it in 3 app stores. Here’s what I learned. April 13, 2018

Podcasts

Videos

MS Build 2018

Service Workers

Network traffic goes through the Service worker first. “A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.” (Google’s introduction)

• Service Worker Cookbook from Mozilla
• Pluralsight course
• Google’s introduction

• Is is ready?

• Service Worker gotchas - June 12, 2017

• Offline POSTs with Progressive Web Apps - August 15, 2017

  • “Caching POST requests is, at the time of this writing, an open issue in the Service Worker spec. A lot of people are requesting the ability to cache POSTs, but until it arrives, we have to rely on workarounds. As part of my internship this summer, I came up with a way to store POST data locally if the user is offline (without using the Cache API), and then send the data to the server as soon as internet connection is regained.”

• Is ServiceWorker ready?

• What Are Service Workers and How They Help Improve Performance - July 12, 2018

Manifest

Tools

• All the tools you need to build and deploy your Progressive Web Apps at pwabuilder.com
  • Generate a Manifest and a Service Worker
  • Manifoldjs is becoming PWA Builder, to simplify building Progressive Web Apps - Feb 14, 2017
• Progressive Web App with Webpack
• Google’s Workbox “Use Workbox to simplify your development by making it easy to take advantage of powerful service worker features, eliminate boilerplate code, and automate service worker generation.”
  • Getting Started with Workbox: JavaScript Libraries for your next Progressive Web App - July 27, 2017

• Workbox, the easier way of adding a service worker to your web app. - October 28, 2017

  • Workbox: Flexible PWA Libraries (Chrome Dev Summit 2017) talk (video) - October 23, 2017
  • From Web Site to PWA with Workbox (GDD India ‘17)
  • Is this pre 3.0 workbox?
  • workbox-cli -> import then const workboxSW = new WorkboxSW(); and workboxSW.precache([]);
  • module.exports = configuration
  • revision hash for workbox to help clean it out
  • He starts them on the Google walk-through lab for using Workbox.

• What Progressive Web Apps can do for you - August 21, 2017

  • Ionic is all in and coming out with the “Stencil” web component tool.

• PWA Tools extension for VS Code from John Papa

• What Web Can Do Today

• Generate a Manifest at RealFaviconGenerator.net

• Google’s PWA Compat tool “PWACompat will fetch your manifest file and do work needed for your user’s browser, regardless of whether they’re on a mobile device or desktop.”

Aurelia

VueJs

• Upgrading Ele.me to Progressive Web App

Angular

StencilJs

• Build A Fast Offline-First PWA with StencilJs - October 12, 2017

Newsletters

Please let me know about more links that I can add.