Getting started with the PWA

Did you know that Steve Jobs was the one who had the idea to transform web applications into native applications. In 2007 Steve Jobs introduced the visionary idea of web applications “that look exactly like and behave exactly like native applications.”

It was not until 2015 that this idea was brought to fruition by Chrome developer Alex Russell and designer Frances Berriman. Since then, the biggest players like Google and Microsoft have promoted the concept of PWA as a way to bridge the gap between the Web and native apps. History of Progressive Web Apps When responsive web design reshaped the internet in 2012, the technology had stewed since the early 2000s. Now, as…medium.com

PWAs have full access to Windows 10 functionality APIs and can be installed on the entire UWP family of devices (including more secure Windows 10 devices in S mode) while ensuring compatibility with other browsers and devices.

In short, you can deploy PWA on Microsoft Store and Google play. PWA works everywhere, whether your users are on a Surface Book, an Android, an iPad, an Xbox One, a TV, a mac OS, an iOS, a windows, a Linux system. Only once for all platforms.

Now that we know the history of the pwa, we will see the different tools and resources necessary to create a pwa.

What is a PWA and why use it ?

Progressive Web Apps | Google Developers Progressive Web Apps are user experiences that have the reach of the web, and are: Reliable - Load instantly and never…developers.google.com web.dev In this collection, you'll learn what makes a Progressive Web App special, how they can affect your business, and how…web.dev Progressive Web Apps on Windows - Microsoft Edge Development With Progressive Web Apps (or simply PWAs) you do not have to decide between using open web technologies for…docs.microsoft.com What is a PWA and why should you care? A useful intro to progressive web applications in 2019blog.bitsrc.io

There are several libraries for creating a PWA. Among these are WorkBox and PWABuilder. WorkBox is a framework developed by Google while PWABuilder is a tool developed by Microsoft.

1 - WorkBox

Workbox is a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build Progressive Web Apps. Workbox | Google Developers Edit descriptiondevelopers.google.com

2 - PWABuilder

PWABuilder was founded by Microsoft as a community guided, open source project to help move PWA adoption forward. New PWABuilder release! Towards the end of last year we expanded the PWABuilder team and decided on some new directions for PWABuilder which…medium.com

- Getting started with PWABuilder

Getting started with PWABuilder. PWABuilder was founded by Microsoft as a community guided, open source project to help move PWA adoption forward.medium.com

- PWABuilder VSCode extension

PWABuilder The PWABuilder VSCode extension helps you transform any web app to a PWA, right inside of VSCode! This extension is in…marketplace.visualstudio.com

- Build a PWA using PWABuilder

3 - Creating PWA with Angular

Your Angular app as Progressive Web App A Progressive Web App (or PWA) is a web application that provides a set of capabilities to give web sites an app-like…medium.com

- Creating PWA with Angular 5

Creating PWA with Angular 5. I’ve been delaying my acquaintance with new Angular framework for too long time. As a big fan of AngularJS v1.x, I…medium.com Creating PWA with Angular 5. Part 2: Progressifying the application This is the continuation of my previous article, where we’ve created our first Angular 5 application. And I hope…medium.com

- Building a Search-Engine Optimized PWA with Angular

Building a Search-Engine Optimized PWA with Angular - Part 1 Progressive Web App + Angular + SEO = Awesome! Here's howblog.bitsrc.io Building a Search-Engine Optimized PWA with Angular — Part 2 How to build an SEO PWA with Angular and friendsblog.bitsrc.io

4 - Creating Your First Vue.js PWA

Creating Your First Vue.js PWA Project In our previous article, Why Progressive Web Apps, we have identified a few benefits that PWA provides to improve web…medium.com

- Building a PWA with Vue.js from scratch

Building a PWA with Vue.js from scratch This tutorial will walk through the basics of how to create a Progressive Web Application using Vue.js and the Vue CLI…erichjames.com

- Turn your Vue Web App into a PWA

- Build Your First PWA with Vue and TypeScript

Build Your First PWA with Vue and TypeScript This tutorial shows you how to build a PWA with Vue and TypeScript.developer.okta.com

5 - PWA for wordpress

PWA for WP & AMP PWA plugin is bringing the power of the Progressive Web Apps to the WP & AMP to take the user experience to the next…wordpress.org Super Progressive Web Apps Progressive Web Apps (PWA) is a new technology that combines the best of mobile web and the best of mobile apps to…wordpress.org PWA Progressive Web Apps are user experiences that have the reach of the web, and are: Reliable - Load instantly and never…wordpress.org

6 - Windows Title Bar Customization for Web Apps

MicrosoftEdge/MSEdgeExplainers PWAs hosted within a user agent (UA) frame are able to declare which browser display mode best meets the needs of the…github.com

7 - Publish PWA on Google Play Store

- Trusted Web Activities Quick Start

Trusted Web Activities Quick Start Guide | Web On Android Trusted Web Activities can be a bit tricky to set up, especially if all you want to do is display your website. This…developers.google.com Google Play Store now open for Progressive Web Apps 😱 Chrome 72 for Android shipped the long-awaited Trusted Web Activity feature, which means we can now distribute PWAs in…medium.com

- Bubblewrap

Bubblewrap is a Command Line Interface (CLI) that helps developers to create a Project for an Android application that launches an existing Progressive Web App (PWAs) using a Trusted Web Activity. GoogleChromeLabs/bubblewrap Bubblewrap is a set of tools and libraries designed to help developers to create, build and update projects for Android…github.com

- PWABuilder

Enter the URL to your PWA at https://pwabuilder.com and hit the start button

Tap the Build My PWA button and then choose the Android platform.

Tap the download button and PWABuilder will run llama-pack behind the scenes on your PWA and give you a zip folder with everything you need to deploy your PWA to the Google Play store! No Android Studio required, the APK and Cert are in the zip 🎉🎉. Source 👉🏽 here.

Microsoft and Google team up to make PWAs better in the Play Store Microsoft and Google team up to make PWAs better in the Play Store We’re glad to announce a new collaboration between Microsoft and Google for the benefit of the web developer community…medium.com

Publishing your PWA in the Play Store in a couple of minutes using PWA Builder Publishing your PWA in the Play Store in a couple of minutes using PWA Builder During our last PWA Builder release, we recently announced a new feature to generate from your PWA a signed APK. It's…davrous.com