Add WebView to Progressive Web App (PWA)?

Question

I have been creating Progressive Web App (PWA) using Angular 6.

Tt's possible to add WebView to my application?

How I can do to achieve this?

Thanks.

Answer 1

If you wanted to do the other way around, load your PWA inside a WebView, that would be possible.

To do it all yourself, there are tutorials you can follow:

• Android: https://medium.com/@stevesohcot/andriod-studio-webview-tutorial-4651701d7d1a

• iOS: https://www.ioscreator.com/tutorials/webview-ios-tutorial-ios11

But it may be easier to use a wrapper, to set up a suitable environment for the PWA:

• Android: https://github.com/xtools-at/Android-PWA-Wrapper

• iOS: https://github.com/xtools-at/iOS-PWA-Wrapper

---

You can also get some good tips from this question.

Amongst other things, it suggests using PWA Builder, which does look quite nice. From the site:

PWA Builder was founded by Microsoft as a community guided, open source project to help move PWA adoption forward.

I think it will create your Android and iOS builds all in one go.

---

This paper discusses the current state of play (2018) and also has some example code for checking which PWA features are available in the WebView you are using.

Answer 2

Progressive web app itself is a web app and so you can't add webview to it, which is only applicable when you are having a native app and want to show some web content.

Why would you want to have a webview in a webapp (PWA is also a web app, its just that it can be installed to home screen).