Progressive Web Apps - Index

Intro

Progressive Web Apps or PWA technology is expected to end the nightmare of developing platform  specific apps for achieving one purpose. Currently this is tough for mobile developers as they have to develop for Android and iOS. Thanks to Microsoft for ending Windows phones. But still there is Windows app store where applications for Windows 10 can be downloaded. Still its nightmare to have one app working for all the platforms though there are many technologies are there to address the same such as Xamarin. Yes that is a big prediction that one day PWA will make Xamarin like platforms obsolete similar to how HTML5 made Flash & Silverlight into history.

https://en.wikipedia.org/wiki/Progressive_Web_Apps

The purpose of this post is to index all the links related to PWA in one place at least for my personal use. It will be including links my future PWA related posts as well. I am not the person doing it and I tried to include similar indexes at the end of this post.

Basics

Some basics on what is PWA.

https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

https://medium.com/samsung-internet-dev/6-myths-of-progressive-web-apps-81e28ca9d2b1

https://docs.google.com/presentation/d/1b27LiMtxkOgReHEI6FZGc8lyuu0wrKjwgQ2ZbDz6yak/edit#slide=id.g2014fe46a9_9_16

Feature detection

Not all browsers support PWA also not all support all features. Since PWA included bunch of features, better do feature detection than checking the browser version.

https://github.com/tomayac/pwa-feature-detector

https://jakearchibald.github.io/isserviceworkerready/index.html

Features

Below are the features of PWA. Not a complete list as its still evolving.

Navigation Preload

https://developers.google.com/web/updates/2017/02/navigation-preload

Offline Storage

This is not really PWA feature but can be leveraged to build offline application.

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa

Important thing to note here is the eviction criteria. If there is pressure browser may delete the offline data.

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

Service Worker

Highlight of PWA which help us to develop offline applications

https://bitsofco.de/the-service-worker-lifecycle/

https://w3c.github.io/ServiceWorker/
https://developers.google.com/web/fundamentals/codelabs/offline/
https://developers.google.com/web/fundamentals/primers/service-workers/

Messaging between ServiceWorker and application.
http://craig-russell.co.uk/2016/01/29/service-worker-messaging.html#.W_QjVjhKiUn

Push notification

This will take the web apps further towards native feel. Also help us to reengage users. 

https://developers.google.com/web/fundamentals/codelabs/push-notifications/

Installation

Another highlight. This feature is going to help us to get our web apps installed as native apps.

Manifest - https://developer.mozilla.org/en-US/docs/Web/Manifest

https://samsunginter.net/docs/ambient-badging/

https://medium.com/samsung-internet-dev/what-does-it-mean-to-be-an-app-ace43eb6b94d

Publishing to AppStores

The app stores are getting PWA apps along with native apps. One day there will be more PWA apps than native. The day where all the device capabilities/APIs are exposed via PWA specs.

https://www.pwabuilder.com/ - Make existing app as installable via store.
https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b

Developing PWA

What developers needs to know about PWA.

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/
https://medium.com/codingthesmartway-com-blog/getting-started-with-progressive-web-apps-pwa-ab05bcc25bfd

Debugging and experiences

Seems little difficult to debug at this point. But will definitely get improvements over time.
https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/

https://www.captechconsulting.com/blogs/my-experience-using-service-workers

https://gist.github.com/Rich-Harris/fd6c3c73e6e707e312d7c5d7d0f3b2f9

Lighthouse for debugging - https://developers.google.com/web/tools/lighthouse/

Testing PWA

In the world of DevOps we need to have coded test cases to have continuous delivery. This space needs more innovations.

https://github.com/googlearchive/sw-unit-test-sample

https://hackernoon.com/service-worker-testing-made-easy-9a2d8e9aa50

https://medium.com/dev-channel/testing-service-workers-318d7b016b19

https://stackoverflow.com/questions/47807982/unit-test-service-worker

Platform specific

Not all platforms started supporting same way. Below goes platform specific details. Hope some day I can make this section obsolete.

Windows

https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps
https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/

Sample apps

We are not alone. There are apps out there which use PWA. Its reality.

https://pwa.rocks/

For quick demos

https://expensemanager.demo.vaadin.com/ - Keeps data in local cache, Installable

Source code

Some repos to browse for PWA.

https://github.com/GoogleChromeLabs/airhorn - This demonstrates the installation scenario

https://github.com/mdn/pwa-examples

https://github.com/gokulkrishh/demo-progressive-web-app

Other indexes like this

https://github.com/hemanth/awesome-pwa