-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* ➕ Adding >> @nuxtjs/pwa * ✨ PWA >> Adding empty settings for setup and a plugin for handling updates. * ✨ App >> PWA Plugin for checking installable and controlling it. * 💄 PWA >> Button for installing PWA if possible. * 📝 Changelog >> Adding pwa feature.
- Loading branch information
Showing
10 changed files
with
196 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| <template> | ||
| <v-tooltip | ||
| v-if="isInstallable" | ||
| left | ||
| > | ||
| <template #activator="{ on, attrs }"> | ||
| <v-chip | ||
| class="mr-2" | ||
| color="info" | ||
| bordered | ||
| small | ||
| v-bind="attrs" | ||
| v-on="on" | ||
| @click="installPwa" | ||
| > | ||
| Add to Home Screen | ||
| </v-chip> | ||
| </template> | ||
| <span>Install it as a PWA app and access it from your home screen</span> | ||
| </v-tooltip> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'AppPwaChip', | ||
| data() { | ||
| return { | ||
| } | ||
| }, | ||
| computed: { | ||
| isInstallable() { | ||
| // If app is already installed, don't show install button | ||
| if (this.$pwa.installed) { | ||
| return false | ||
| } | ||
| return this.$pwa.installable | ||
| } | ||
| }, | ||
| methods: { | ||
| installPwa() { | ||
| this.$pwa.install().catch((err) => { | ||
| this.$toast.error(err.message) | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| export default async(context) => { | ||
| const workbox = await window.$workbox | ||
|
|
||
| if (!workbox) { | ||
| console.debug('[PWA] -> Workbox couldn\'t be loaded.') | ||
| return | ||
| } | ||
|
|
||
| workbox.addEventListener('installed', (event) => { | ||
| if (!event.isUpdate) { | ||
| console.debug('[PWA] -> The PWA is on the latest version.') | ||
| return | ||
| } | ||
|
|
||
| console.debug('[PWA] -> There is an update for the PWA, reloading...') | ||
| window.location.reload() | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| // Check: https://web.dev/customize-install/ | ||
| export default ({ app }, inject) => { | ||
| // Window Listener for installable event | ||
| function initInstallableListener(pwa) { | ||
| // Window Listener -> Event is triggered when the app can be installed | ||
| window.addEventListener('beforeinstallprompt', (e) => { | ||
| e.preventDefault() // Prevent the mini-infobar from appearing on mobile | ||
| pwa.deferredPrompt = e // Stash the event so it can be triggered later | ||
| pwa.showInstallPromotion() // Update UI notify the user they can install the PWA | ||
| console.log('[PWA] -> "beforeinstallprompt" event was fired.') | ||
| }) | ||
| } | ||
|
|
||
| // Window Listener for installed event | ||
| function initInstalledListener(pwa) { | ||
| window.addEventListener('appinstalled', () => { | ||
| pwa.installed = true // App is installed | ||
| pwa.hideInstallPromotion() // Hide the app-provided install promotion | ||
| pwa.deferredPrompt = null // Clear the deferredPrompt so it can be garbage collected | ||
| console.log('[PWA] -> App was installed.') | ||
| }) | ||
| } | ||
|
|
||
| // Plugin object | ||
| const pwa = { | ||
| deferredPrompt: null, // Initialize deferredPrompt | ||
| installable: false, // Check to show browser install prompt | ||
| installed: false, // Check if 'pwa' is installed | ||
| async install() { | ||
| // Hide the possibility to install app | ||
| this.hideInstallPromotion() | ||
|
|
||
| // Checks if install prompt is saved from the event listener | ||
| if (this.deferredPrompt) { | ||
| // Show the install prompt | ||
| this.deferredPrompt.prompt() | ||
|
|
||
| // Wait for the user to respond to the prompt | ||
| const { outcome } = await this.deferredPrompt.userChoice | ||
| console.log(`[PWA] -> User response to the install prompt: ${outcome}`) | ||
|
|
||
| // We've used the prompt, and can't use it again, throw it away | ||
| this.deferredPrompt = null | ||
|
|
||
| // Init Listener again | ||
| initInstallableListener(this) | ||
| return true | ||
| } else { | ||
| console.error('[PWA] -> Install prompt did not exist.') | ||
| throw new Error('App could not be installed.') | ||
| } | ||
| }, | ||
| showInstallPromotion() { | ||
| this.installable = true | ||
| }, | ||
| hideInstallPromotion() { | ||
| this.installable = false | ||
| }, | ||
| getPWADisplayMode() { | ||
| // Track how the PWA was launched - https://web.dev/customize-install/#track-how-the-pwa-was-launched | ||
| const isStandalone = window.matchMedia('(display-mode: standalone)').matches | ||
| if (document.referrer.startsWith('android-app://')) { | ||
| return 'twa' | ||
| } else if (navigator.standalone || isStandalone) { | ||
| return 'standalone' | ||
| } | ||
| return 'browser' | ||
| } | ||
| } | ||
|
|
||
| // Init Event Listener | ||
| initInstallableListener(pwa) | ||
| initInstalledListener(pwa) | ||
|
|
||
| // Inject $pwa in Vue, context and store | ||
| inject('pwa', pwa) | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters