From ba7471f01cfcc3ed31f7ce77d739fbc101d19f2f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 21 Mar 2023 16:52:42 +0000 Subject: [PATCH 1/6] add react docs --- docs/react/pwa.md | 41 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/docs/react/pwa.md b/docs/react/pwa.md index 24611d1c5ad..a3a07a1f1a9 100644 --- a/docs/react/pwa.md +++ b/docs/react/pwa.md @@ -7,13 +7,46 @@ sidebar_label: Progressive Web Apps Create Progressive Web Apps (PWA) in React - Ionic Framework -## Making your React app a PWA +## Making your React app a PWA with Vite -The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, a base project from Create React App (CRA) and the Ionic CLI provides this already. +The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead. + +To get started, install the `vite-plugin-pwa` package: + +```shell +npm install -D vite-plugin-pwa +``` + +Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`: + +```javascript +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import { VitePWA } from 'vite-plugin-pwa' + +export default defineConfig({ + plugins: [ + react(), + VitePWA({ registerType: 'autoUpdate' }) + ], +}) +``` + +This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build. + +For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/). + +## Making your React app a PWA with Create React App + +:::note +As of Ionic CLI v7, Ionic React starter apps ship with Vite instead of Create React App. See [Making your React app a PWA with Vite](#making-your-react-app-a-pwa-with-vite) for Vite instructions. +::: + +The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, a base project from Create React App (CRA) and the Ionic CLI provides this already. In the `index.ts` for your app, there is a call to a `serviceWorker.unregister()` function. The base that CRA provides has service workers as an opt-in feature, so it must be enabled. To enable, call `serviceWorker.register()`. @@ -42,7 +75,7 @@ By default, react apps package comes with the Ionic logo for the app icons. Be s Features like Service Workers and many JavaScript APIs (such as geolocation) require the app to be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers. ::: -## Service Worker configuration +### Service Worker configuration By default, CRA/React Scripts come with a preconfigured Service Worker setup based on [Workbox's Webpack plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin). This utilises a cache-first strategy, meaning that your app will load from a cache, even if the network returns a newer version of the app. From 844fe6f651deffd178ef880208ff180ae04f85eb Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 21 Mar 2023 16:52:45 +0000 Subject: [PATCH 2/6] add vue docs --- docs/vue/pwa.md | 38 +++++++++++++++++++++++++++++++++++--- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index 2c75702bd46..87b957037e7 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -1,4 +1,5 @@ --- +title: Progressive Web Apps in Vue sidebar_label: Progressive Web Apps --- @@ -10,11 +11,42 @@ sidebar_label: Progressive Web Apps /> -# Progressive Web Apps in Vue +## Making your Vue app a PWA with Vite -## Making your Vue app a PWA +The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, we recommend using the [Vite PWA Plugin](https://vite-pwa-org.netlify.app/) instead. -The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Vue CLI has some utilities for adding this for you. +To get started, install the `vite-plugin-pwa` package: + +```shell +npm install -D vite-plugin-pwa +``` + +Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`: + +```javascript +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import { VitePWA } from 'vite-plugin-pwa' + +export default defineConfig({ + plugins: [ + vue(), + VitePWA({ registerType: 'autoUpdate' }) + ], +}) +``` + +This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build. + +For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/). + +## Making your Vue app a PWA with Vue CLI + +:::note +As of Ionic CLI v7, Ionic Vue starter apps ship with Vite instead of Vue CLI. See [Making your Vue app a PWA with Vite](#making-your-vue-app-a-pwa-with-vite) for Vite instructions. +::: + +The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, the Vue CLI has some utilities for adding this for you. For existing projects, you can run the `vue add` command to install the PWA plugin for Vue. From a9df6e634b43d0c5dcd38d2a634c0cc5892dc4f2 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 21 Mar 2023 16:53:20 +0000 Subject: [PATCH 3/6] move firebase to vuecli/cra sections --- docs/react/pwa.md | 4 ++-- docs/vue/pwa.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/react/pwa.md b/docs/react/pwa.md index a3a07a1f1a9..5ab4f2f9054 100644 --- a/docs/react/pwa.md +++ b/docs/react/pwa.md @@ -81,9 +81,9 @@ By default, CRA/React Scripts come with a preconfigured Service Worker setup bas Because of the nature of CRA/React Scripts, the configuration for this is internal to React Scripts, meaning that it cannot be customized without ejecting from React Scripts. Currently, the Ionic CLI does not support an ejected React App, so if this action is taken, you'll need to use npm/yarn scripts instead of the Ionic CLI. -## Deploying +### Deploying -### Firebase +#### Firebase Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html). diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index 87b957037e7..daff387919b 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -149,11 +149,11 @@ In addition to the service worker, the Vue PWA plugin also is responsible for cr Be sure to update the icons in `public/img/icons` to match your own brand. If you wanted to customize the theme color or name, be sure to read the [PWA plugin docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa#configuration) on GitHub. -## Deploying +### Deploying You can use various hosts like Firebase, Vercel, Netlify, or even Azure Static Web Apps. All will have similar setup processes that need to be completed. For this guide, Firebase will be used as the hosting example. In addition to this guide, the [Vue CLI docs](https://cli.vuejs.org/guide/deployment.html) also have a guide on how to deploy to various providers. -### Firebase +#### Firebase Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html). From 9d41ffc8a56b28ebc7f20f09bfc2eabc9f66195d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 21 Mar 2023 16:54:17 +0000 Subject: [PATCH 4/6] add deploy note --- docs/react/pwa.md | 2 +- docs/vue/pwa.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/pwa.md b/docs/react/pwa.md index 5ab4f2f9054..0d7a198596e 100644 --- a/docs/react/pwa.md +++ b/docs/react/pwa.md @@ -38,7 +38,7 @@ export default defineConfig({ This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build. -For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/). +For more information on configuring the Vite PWA Plugin as well as how to deploy your PWA, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/). ## Making your React app a PWA with Create React App diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index daff387919b..afb8024685c 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -38,7 +38,7 @@ export default defineConfig({ This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build. -For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/). +For more information on configuring the Vite PWA Plugin as well as how to deploy your PWA, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/). ## Making your Vue app a PWA with Vue CLI From ee74fb76c8662461cc1c2f962cc402a3e8fcbfd1 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 21 Mar 2023 16:59:33 +0000 Subject: [PATCH 5/6] add deploy info --- docs/react/pwa.md | 4 +++- docs/vue/pwa.md | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/react/pwa.md b/docs/react/pwa.md index 0d7a198596e..36aaa7a775d 100644 --- a/docs/react/pwa.md +++ b/docs/react/pwa.md @@ -38,7 +38,9 @@ export default defineConfig({ This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build. -For more information on configuring the Vite PWA Plugin as well as how to deploy your PWA, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/). +For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/). + +See the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployment/) for information on how to deploy your PWA. ## Making your React app a PWA with Create React App diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index afb8024685c..b322831ceac 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -38,7 +38,9 @@ export default defineConfig({ This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build. -For more information on configuring the Vite PWA Plugin as well as how to deploy your PWA, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/). +For more information on configuring the Vite PWA Plugin, see the [Vite PWA "Getting Started" Guide](https://vite-pwa-org.netlify.app/guide/). + +See the [Vite PWA "Deploy" Guide](https://vite-pwa-org.netlify.app/deployment/) for information on how to deploy your PWA. ## Making your Vue app a PWA with Vue CLI From b79fc3ad19a5c7562f733bfe12909a4222cc3fb3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 23 Mar 2023 17:36:50 +0000 Subject: [PATCH 6/6] use react 18 syntax --- docs/react/pwa.md | 17 +++++++++++------ versioned_docs/version-v6/react/pwa.md | 17 +++++++++++------ 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/docs/react/pwa.md b/docs/react/pwa.md index 36aaa7a775d..ef57dc05667 100644 --- a/docs/react/pwa.md +++ b/docs/react/pwa.md @@ -54,17 +54,22 @@ In the `index.ts` for your app, there is a call to a `serviceWorker.unregister() ```ts import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import App from './App'; -import * as serviceWorker from './serviceWorker'; +import * as serviceWorkerRegistration from './serviceWorkerRegistration'; -ReactDOM.render(, document.getElementById('root')); +const container = document.getElementById('root'); +const root = createRoot(container!); +root.render( + + + +); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -// serviceWorker.unregister(); -serviceWorker.register(); +// Learn more about service workers: https://cra.link/PWA +serviceWorkerRegistration.register(); ``` Once this package has been added, run `ionic build` and the `build` directory will be ready to deploy as a PWA. diff --git a/versioned_docs/version-v6/react/pwa.md b/versioned_docs/version-v6/react/pwa.md index 24611d1c5ad..2cee872655d 100644 --- a/versioned_docs/version-v6/react/pwa.md +++ b/versioned_docs/version-v6/react/pwa.md @@ -19,17 +19,22 @@ In the `index.ts` for your app, there is a call to a `serviceWorker.unregister() ```ts import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import App from './App'; -import * as serviceWorker from './serviceWorker'; +import * as serviceWorkerRegistration from './serviceWorkerRegistration'; -ReactDOM.render(, document.getElementById('root')); +const container = document.getElementById('root'); +const root = createRoot(container!); +root.render( + + + +); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -// serviceWorker.unregister(); -serviceWorker.register(); +// Learn more about service workers: https://cra.link/PWA +serviceWorkerRegistration.register(); ``` Once this package has been added, run `ionic build` and the `build` directory will be ready to deploy as a PWA.